custom/plugins/NetzpBlog6/src/Resources/views/storefront/element/blog-index-slider.html.twig line 1

Open in your IDE?
  1. {% if element.data.result is empty %}
  2.     <div class="cms-listing-col col-12">
  3.         {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  4.             type: 'info', content: 'netzp.blog.msg.noposts'|trans|sw_sanitize
  5.         } %}
  6.     </div>
  7. {% else %}
  8.     <div class="blog-slider"
  9.          data-product-slider="true"
  10.          data-product-slider-options='{
  11.             "slider": {
  12.                 "gutter": 20,
  13.                 "autoplayButtonOutput": false,
  14.                 "nav": false,
  15.                 "controls": true,
  16.                 "autoplay": false,
  17.                 "mouseDrag": true
  18.             }
  19.          }'>
  21.         <div class="row blog-slider-container m-0 p-0" data-product-slider-container="true">
  22.             {% for post in element.data.result %}
  23.                 {% set postDetailUrl = seoUrl('frontend.blog.post', {'postId': post.id} ) %}
  24.                 {% set paramPage = app.request.get('p') ? 'p=' ~ app.request.get('p') : '' %}
  25.                 {% set paramCategory = app.request.get('c') ? 'c=' ~ app.request.get('c') : '' %}
  26.                 {% set paramAuthor = app.request.get('a') ? 'a=' ~ app.request.get('a') : '' %}
  27.                 {% set urlParams = [paramPage, paramCategory, paramAuthor] | filter(p => p != '') | join('&') %}
  28.                 {% if urlParams %}
  29.                     {% set postDetailUrl = postDetailUrl ~ '?' ~ urlParams %}
  30.                 {% endif %}
  31.                 <div>
  32.                     <div class="card blog-card h-100" style="background-color: {{ element.config.backgroundColor.value }}">
  33.                         {% set image = null %}
  34.                         {% if post.imagepreview %}
  35.                             {% set image = post.imagepreview %}
  36.                         {% elseif post.image %}
  37.                             {% set image = post.image %}
  38.                         {% endif %}
  40.                         {% if image %}
  41.                             {% set thumbnailClass = element.config.imageMode.value == "contain" ? "contain" : "cover" %}
  42.                             <a href="{{ postDetailUrl }}">
  43.                                 {% if image.mediaType.name == 'IMAGE' %}
  44.                                     {% sw_thumbnails 'blog_slider_image_thumbnail' with {
  45.                                         media: image,
  46.                                         sizes: {
  47.                                             'xs': '501px',
  48.                                             'sm': '315px',
  49.                                             'md': '427px',
  50.                                             'lg': '333px',
  51.                                             'xl': '284px'
  52.                                         },
  53.                                         attributes: {
  54.                                             'class': 'card-img-top ' ~ thumbnailClass,
  55.                                             'alt':   image.translated.alt ?: '',
  56.                                             'title': post.translated.title ?: ''
  57.                                         }
  58.                                     } %}
  59.                                 {% elseif image.mediaType.name == 'VIDEO' %}
  60.                                     <video class="video" controls>
  61.                                         <source src="{{ image.url }}" type="{{ image.mimetype }}">
  62.                                         Your browser does not support HTML5 video.
  63.                                     </video>
  64.                                 {% endif %}
  65.                             </a>
  66.                         {% else %}
  67.                             <div class="blog-card-paceholder">&nbsp;</div>
  68.                         {% endif %}
  70.                         <div class="card-body d-flex flex-column p-2">
  71.                             {% block blog_content_post_inner_title %}
  72.                                 <a href="{{ postDetailUrl }}">
  73.                                     <h4 class="mt-2 mb-0">{{ post.translated.title }}</h4>
  74.                                 </a>
  75.                             {% endblock %}
  77.                             {% if element.data.pluginConfig.showmeta %}
  78.                                 {% block blog_content_post_inner_meta %}
  79.                                     {% sw_include "@Storefront/storefront/page/blog/post-meta.html.twig" with { config: element.data.pluginConfig } %}
  80.                                 {% endblock %}
  81.                             {% endif %}
  83.                             {% if post.translated.teaser %}
  84.                                 {% block blog_content_post_inner_teaser %}
  85.                                     <div class="card-text mt-3 mb-1">
  86.                                         {{ post.translated.teaser }}
  87.                                     </div>
  88.                                 {% endblock %}
  89.                             {% endif %}
  91.                             {% block blog_content_post_inner_more %}
  92.                             <div class="mt-auto">
  93.                                 <a href="{{ postDetailUrl }}"
  94.                                    class="btn btn-outline-primary btn-sm mt-2">
  95.                                     {{ "netzp.blog.msg.more"|trans }}
  96.                                 </a>
  97.                             </div>
  98.                             {% endblock %}
  99.                         </div>
  100.                     </div>
  101.                 </div>
  102.             {% endfor %}
  103.         </div>
  105.         <div class="blog-slider-controls-container">
  106.             <div class="base-slider-controls"
  107.                  data-product-slider-controls="true">
  108.                 <button class="base-slider-controls-prev product-slider-controls-prev">
  109.                     {% sw_icon 'arrow-head-left' %}
  110.                 </button>
  111.                 <button class="base-slider-controls-next product-slider-controls-next">
  112.                     {% sw_icon 'arrow-head-right' %}
  113.                 </button>
  114.             </div>
  115.         </div>
  116.     </div>
  117. {% endif %}