custom/plugins/NetzpBlog6/src/Resources/views/storefront/page/blog/post-media.html.twig line 1

Open in your IDE?
  1. {% if post.blogmedia|length > 0 %}
  2.     <div class="blog-media" id="blog-media-gallery_{{ element.id }}">
  3.         {% for media in post.blogmedia %}
  4.             {% block netzp_blog_media_item %}
  5.                 <div>
  6.                     {% if media.media %}
  7.                         {% set height = element.config.height.value ?? 12 %}
  8.                         {% set subHtml = element.config.showGalleryCaption.value ? media.media.translated.title : '' %}
  10.                         {% set thumbnailClass = 'type-image img-fluid' %}
  11.                         {% set thumbnailStyle = 'height: ' ~ height ~ 'rem; width: ' ~ height ~ 'rem;' %}
  13.                         {% if media.media.mediatype.name == 'VIDEO' %}
  14.                             {% block netzp_blog_media_item_video %}
  15.                                 <div class="item">
  16.                                     {% block netzp_blog_media_item_video_element %}
  17.                                         <div data-html="#video_{{ loop.index }}"
  18.                                              data-sub-html="{{ subHtml }}"
  19.                                              class="lightbox type-video" style="{{ thumbnailStyle }}"
  20.                                              alt="{{ media.media.translated.alt }}" title="{{ media.media.translated.title }}">
  21.                                             {% sw_icon 'video-camera' style { 'size': 'lg' } %}
  22.                                             <div class="file-extension">{{ media.media.fileExtension|upper }}</div>
  23.                                         </div>
  24.                                     {% endblock %}
  25.                                     {% block netzp_blog_media_item_video_caption %}
  26.                                         {% if element.config.showThumbnailCaption.value and media.media.translated.title %}
  27.                                             <div class="caption" style="max-width: {{ height }}rem">{{ media.media.translated.title }}</div>
  28.                                         {% endif %}
  29.                                     {% endblock %}
  30.                                 </div>
  31.                             {% endblock %}
  33.                         {% elseif media.media.mediatype.name == 'DOCUMENT' %}
  34.                             {% block netzp_blog_media_item_document %}
  35.                                 <div class="item">
  36.                                     {% block netzp_blog_media_item_document_element %}
  37.                                         <a href="{{ media.media.url }}" download
  38.                                            alt="{{ media.media.translated.alt }}"
  39.                                            title="{{ media.media.translated.title }}">
  40.                                             <div class="type-document" style="{{ thumbnailStyle }}"
  41.                                                  alt="{{ media.media.translated.alt }}" title="{{ media.media.translated.title }}">
  42.                                                 {% sw_icon 'file' style { 'size': 'lg' } %}
  43.                                                 <div class="file-extension">{{ media.media.fileExtension|upper }}</div>
  44.                                                 <div class="download-icon">
  45.                                                     {% sw_icon 'cloud-download' style { 'size': 'sm' } %}
  46.                                                 </div>
  47.                                             </div>
  48.                                         </a>
  49.                                     {% endblock %}
  50.                                     {% block netzp_blog_media_item_document_caption %}
  51.                                         {% if element.config.showThumbnailCaption.value and media.media.translated.title %}
  52.                                             <div class="caption" style="max-width: {{ height }}rem">{{ media.media.translated.title }}</div>
  53.                                         {% endif %}
  54.                                     {% endblock %}
  55.                                 </div>
  56.                             {% endblock %}
  58.                         {% elseif media.media.mediatype.name == 'AUDIO' %}
  59.                             {% block netzp_blog_media_item_audio %}
  60.                                 <div class="item">
  61.                                     {% block netzp_blog_media_item_audio_element %}
  62.                                         <a href="{{ media.media.url }}" download
  63.                                            alt="{{ media.media.translated.alt }}"
  64.                                            title="{{ media.media.translated.title }}">
  65.                                             <div class="type-audio" style="{{ thumbnailStyle }}"
  66.                                                  alt="{{ media.media.translated.alt }}" title="{{ media.media.translated.title }}">
  67.                                                 {% sw_icon 'micophone' style { 'size': 'lg' } %}
  68.                                                 <div class="file-extension">{{ media.media.fileExtension|upper }}</div>
  69.                                             </div>
  70.                                         </a>
  71.                                     {% endblock %}
  72.                                     {% block netzp_blog_media_item_audio_caption %}
  73.                                         {% if element.config.showThumbnailCaption.value and media.media.translated.title %}
  74.                                             <div class="caption" style="max-width: {{ height }}rem">{{ media.media.translated.title }}</div>
  75.                                         {% endif %}
  76.                                     {% endblock %}
  77.                                 </div>
  78.                             {% endblock %}
  80.                         {% elseif media.media.mediatype.name == 'IMAGE' %}
  81.                             {% block netzp_blog_media_item_image %}
  82.                                 <div class="item">
  83.                                     {% block netzp_blog_media_item_image_element %}
  84.                                         <a href="{{ media.media.url }}" data-sub-html="{{ subHtml }}" class="lightbox">
  85.                                             {% sw_thumbnails 'blog_detail_media_image_thumbnail' with {
  86.                                                 media: media.media,
  87.                                                 sizes: {
  88.                                                     'xs': '501px',
  89.                                                     'sm': '315px',
  90.                                                     'md': '427px',
  91.                                                     'lg': '333px',
  92.                                                     'xl': '284px',
  93.                                                     'default': '100vw'
  94.                                                 },
  95.                                                 attributes: {
  96.                                                     'class': thumbnailClass,
  97.                                                     'style': thumbnailStyle,
  98.                                                     'alt':   media.media.translated.alt,
  99.                                                     'title': media.media.translated.title
  100.                                                 }
  101.                                             } %}
  102.                                         </a>
  103.                                     {% endblock %}
  104.                                     {% block netzp_blog_media_item_image_caption %}
  105.                                         {% if element.config.showThumbnailCaption.value and media.media.translated.title %}
  106.                                             <div class="caption" style="max-width: {{ height }}rem">
  107.                                                 {{ media.media.translated.title }}
  108.                                             </div>
  109.                                         {% endif %}
  110.                                     {% endblock %}
  111.                                 </div>
  112.                             {% endblock %}
  113.                         {% endif %}
  114.                     {% endif %}
  115.                 </div>
  116.             {% endblock %}
  117.         {% endfor %}
  118.     </div>
  120.     {% for media in post.blogmedia %}
  121.         {% if media.media %}
  122.             {% if media.media.mediatype.name == 'VIDEO' %}
  123.                 <div style="display: none" id="video_{{ loop.index }}">
  124.                     <video class="lg-video-object lg-html5" controls preload="none">
  125.                         <source src="{{ media.media.url }}" type="{{ media.media.mimetype }}">
  126.                         Your browser does not support HTML5 video.
  127.                     </video>
  128.                 </div>
  129.             {% endif %}
  130.         {% endif %}
  131.     {% endfor %}
  133.     <template data-netzp-blog-gallery data-netzp6-blog-gallery-options='{
  134.         "selectorId": "blog-media-gallery_{{ element.id }}",
  135.         "selector": ".lightbox",
  136.         "download": false,
  137.         "captionFromTitleOrAlt": false,
  138.         "counter": {{ element.config.showGalleryCounter.value ? 'true' : 'false' }}
  139.     }'></template>
  140. {% endif %}