vendor/store.shopware.com/faesslichslider/src/Resources/views/storefront/faesslich-slider/generic-element.html.twig line 1

Open in your IDE?
  1. {% block faesslich_slider_slide_type %}
  2.     {% block faesslich_slider_picture %}
  3.         {% if (mediaUsage == 'picture' and mediaTypeSplit == 'image') or (isCarouselElement and mediaTypeSplit == 'image') and not entry.useYtVideo %}
  4.             <div class="faesslich-slider-slide-item--picture">
  5.                 {% block faesslich_slider_picture_inner %}
  6.                 <picture>
  7.                 {% if entry.mediaMobile %}
  8.                     <source media="(max-width:640px)" srcset="{{ entry.mediaMobileUrl }}">
  9.                 {% endif %}
  10.                 {% if entry.mediaTablet %}
  11.                     <source media="(max-width: 1024px)" srcset="{{ entry.mediaTabletUrl }}">
  12.                 {% endif %}
  13.                     <source media="(min-width:1025px)" srcset="{{ entry.mediaUrl }}">
  15.                     {% sw_thumbnails_faesslich 'product-image-thumbnails' with {
  16.                         media: media,
  17.                         sizes: {
  18.                             'default': '100px',
  19.                             'xs': '501px',
  20.                             'sm': '315px',
  21.                             'md': '427px',
  22.                             'lg': '333px',
  23.                             'xl': '284px'
  24.                         },
  25.                         attributes: {
  26.                             'class': 'faesslich-slider-slide-item--picture--image' ,
  27.                             'alt': (sliderElementTitle ? sliderElementTitle|striptags|e('html_attr') : ""),
  28.                             'title': (entry.mediaAlt ? entry.mediaAlt|e('html_attr') : sliderElementTitle ? sliderElementTitle|striptags|e('html_attr') : ""),
  29.                             'alt': (entry.mediaAlt ? entry.mediaAlt|e('html_attr') : sliderElementTitle ? sliderElementTitle|striptags|e('html_attr') : ""),
  30.                             'style': "object-fit: #{entry.mediaScale}; object-position: #{entry.mediaPosition}"
  31.                         }
  32.                     } %}
  33.                 <picture>
  34.                 {% endblock %}
  35.             </div>
  36.         {% endif %}
  37.     {% endblock %}
  39.     {% block faesslich_slider_overlay %}
  40.         <{% if not entry.linkWholeSliderArea %}div{% else %}a href="{{ ctaUrl }}"{% endif %} class="faesslich-slider-slide-item--overlay"{% if sliderElementBgOverlay %} style="background-color: {{ sliderElementBgOverlay }}"{% endif %}>
  41.         </{% if not entry.linkWholeSliderArea %}div{% else %}a{% endif %}>
  42.     {% endblock %}
  44.     {% block faesslich_slider_video %}
  45.         {% if mediaTypeSplit == 'video' and not entry.useYtVideo %}
  46.             <div class="faesslich-slider-slide-item--video">
  47.                 <video width="100%" height="100%" autoplay loop playsinline muted preload="auto">
  48.                     <source src="{{ media.url }}" type="{{ media.mimeType }}"/>
  49.                 </video>
  50.             </div>
  51.         {% endif %}
  52.     {% endblock %}
  54.     {% block faesslich_slider_youtube_video %}
  55.         {% if entry.useYtVideo and entry.ytVideoUrl %}
  56.             {% set ytUrl = entry.ytVideoUrl|replace({
  57.                 'www.youtube.com/embed/': 'www.youtube-nocookie.com/embed/',
  58.                 'www.youtube.com/watch?v=': 'www.youtube-nocookie.com/embed/',
  59.                 'youtube.com/embed/': 'www.youtube-nocookie.com/embed/',
  60.                 'youtube.com/watch?v=': 'www.youtube-nocookie.com/embed/',
  61.                 'youtu.be/': 'www.youtube-nocookie.com/embed/'})
  62.             %}
  63.             <div class="faesslich-slider-slide-item--yt-video">
  64.                 <iframe class="faesslich-slider-slide-item--yt-video-iframe lazyload" data-src="{{ ytUrl }}?modestbranding=1&autohide=1&autoplay=1&showinfo=0&controls=0&mute=1" allow="accelerometer; autoplay; muted; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  65.             </div>
  66.         {% endif %}
  67.     {% endblock %}
  70.     {% if entry.useMediaInsteadOfProductCover %}
  71.         {% block faesslich_slider_additional_image %}{% endblock %}
  72.     {% endif %}
  74.     {% block faesslich_slider_content %}
  75.         {% if sliderElementTopLine or sliderElementTitle or sliderElementDescription or sliderElementDescriptionAdditional or sliderElementCtaText %}
  76.             <{% if not entry.linkWholeSliderArea %}div{% else %}a href="{{ ctaUrl }}"{% endif %} class="faesslich-slider-slide-item--content">
  77.                 {% block faesslich_slider_content_inner %}
  78.                 <{% if entry.linkWholeArea and not entry.linkWholeSliderArea %}a href="{{ ctaUrl }}"{% else %}div{% endif %}
  79.                         class="faesslich-slider-slide-item--content-inner{% if not entry.hideBadges %} -badges-visible{% endif %}{% if entry.useProductCoverAsAdditionalMedia %} -additional-image-visible{% endif %}"
  80.                         {% if entry.textBoxBgColor or entry.textBoxTextColor %} style="
  81.                             {% if entry.textBoxBgColor %}background-color: {{ entry.textBoxBgColor }};{% endif %}
  82.                             {% if entry.textBoxTextColor %}color: {{ entry.textBoxTextColor }};{% endif %}
  83.                                 "{% endif %}
  84.                 >
  85.                     {% block faesslich_slider_content_inner_upper_headline %}
  86.                         {% if sliderElementTopLine and not isCarouselElement %}
  87.                             <div class="slide-item--upper-headline">{{ sliderElementTopLine|raw }}</div>
  88.                         {% endif %}
  89.                     {% endblock %}
  91.                     {% block faesslich_slider_content_inner_headline %}
  92.                         {% if sliderElementTitle %}
  93.                             <div class="slide-item--headline">{{ sliderElementTitle|raw }}</div>
  94.                         {% endif %}
  95.                     {% endblock %}
  97.                     {% block faesslich_slider_content_inner_description %}
  98.                         {% if sliderElementDescription %}
  99.                             {% if '<' not in sliderElementDescription and '>' not in sliderElementDescription %}<div class="slide-item--paragraph" {% if entry.textBoxTextColor %}style="color: {{ entry.textBoxTextColor }};"{% endif %}>{% endif %}
  100.                             {% block faesslich_slider_content_inner_description_text %}
  101.                                 {{ sliderElementDescription|raw }}
  102.                             {% endblock %}
  103.                             {% if '<' not in sliderElementDescription and '>' not in sliderElementDescription %}</div>{% endif %}
  104.                         {% endif %}
  105.                     {% endblock %}
  106.                     {% block faesslich_slider_content_inner_description_additional %}
  107.                         {% if sliderElementDescriptionAdditional %}
  108.                             {% if '<' not in sliderElementDescriptionAdditional and '>' not in sliderElementDescriptionAdditional %}<div class="slide-item--paragraph" {% if entry.textBoxTextColor %}style="color: {{ entry.textBoxTextColor }};"{% endif %}>{% endif %}
  109.                             {% block faesslich_slider_content_inner_description_additional_text %}
  110.                                 {{ sliderElementDescriptionAdditional|raw }}
  111.                             {% endblock %}
  112.                             {% if '<' not in sliderElementDescriptionAdditional and '>' not in sliderElementDescriptionAdditional %}</div>{% endif %}
  113.                         {% endif %}
  114.                     {% endblock %}
  116.                     {% block faesslich_slider_content_inner_cta %}
  117.                         {% if entry.sliderElementCtaUrl and entry.sliderElementCtaText %}
  118.                             <div class="slide-item--button-wrapper">
  119.                                 <{% if not entry.linkWholeArea and not entry.linkWholeSliderArea %}a{% else %}span{% endif %}
  120.                                         class="{% if isCarouselElement %}slide-item--inline-cta{% else %}btn btn-{{ entry.sliderElementCtaType }}{% endif %}"
  121.                                         {% if not entry.linkWholeArea %}href="{{ ctaUrl }}"{% endif %}
  122.                                         rel="noopener">
  123.                                     {% block faesslich_slider_content_inner_cta_inner %}
  124.                                         {{ entry.sliderElementCtaText|raw }}
  125.                                     {% endblock %}
  126.                                 </{% if not entry.linkWholeArea and not entry.linkWholeSliderArea %}a{% else %}span{% endif %}>
  127.                             </div>
  128.                         {% endif %}
  129.                     {% endblock %}
  131.                     {% block faesslich_slider_content_inner_cta2 %}
  132.                         {% if entry.sliderElementCta2Url and entry.sliderElementCta2Text and entry.showAdditionalCta and not entry.linkWholeArea and not entry.linkWholeSliderArea %}
  133.                             <div class="slide-item--button-wrapper ml-2">
  134.                                 <a class="{% if isCarouselElement %}slide-item--inline-cta ml-4{% else %}btn btn-{{ entry.sliderElementCta2Type }}{% endif %}"
  135.                                    href="{{ cta2Url }}"
  136.                                    rel="noopener">
  137.                                     {% block faesslich_slider_content_inner_cta2_inner %}
  138.                                         {{ entry.sliderElementCta2Text|raw }}
  139.                                     {% endblock %}
  140.                                 </a>
  141.                             </div>
  142.                         {% endif %}
  143.                     {% endblock %}
  145.                     </{% if entry.linkWholeArea and not entry.linkWholeSliderArea %}a{% else %}div{% endif %}>
  147.                     {% endblock %}
  148.             </{% if not entry.linkWholeSliderArea %}div{% else %}a{% endif %}>
  149.         {% endif %}
  150.     {% endblock %}
  151. {% endblock %}