custom/plugins/OttCmsAdvanced/src/Resources/views/storefront/ott-cms-slider/slide/image.html.twig line 1

Open in your IDE?
  1. <div class="OttCmsSlider__slide-container">
  2.     {% if '' != slide.linkUrl %}
  3.         <a href="{{ slide.linkUrl }}"
  4.            {% if slide.linkTargetBlank %}target="_blank"{% endif %}
  5.            class="OttCmsSlider__slide-inner d-block{% if 'zoom-out' == slide.imageAnimationType %} has-animation-zoom-out{% endif %}"
  6.         >
  7.     {% else %}
  8.         <div class="OttCmsSlider__slide-inner"
  9.              {% if 'zoom-out' == slide.imageAnimationType %}has-animation-zoom-out{% endif %}
  10.         >
  11.     {% endif %}
  13.     <div class="OttCmsSlider__image-wrapper{% if 'cover' == slide.imageType %} OttCmsSlider__image-wrapper-cover{% endif %}{% if slide.imageRoundedBorder %} has-rounded-border{% endif %}"
  14.          {% if 'cover' == slide.imageType %}
  15.              style="background-image: url('{{ mediaCollection.get(slide.image).getUrl() }}');background-position: center center;background-repeat: no-repeat;{% if 'zoom-out' == slide.imageAnimationType %}background-size: 110% 110%;{% endif %}"
  16.          {% endif %}
  17.     >
  18.         {% if 'default' == slide.imageType %}
  19.             <img class="OttCmsSlider__image w-100{% if slide.imageRounded or slide.imageRoundedBorder %} is-rounded{% endif %}{% if slide.imageRoundedBorder %} has-rounded-border{% endif %}"
  20.                  src="{{ mediaCollection.get(slide.image).getUrl() }}"
  21.             />
  22.         {% endif %}
  23.     </div>
  25.     <div class="OttCmsSlider__text-below mt-3 text-center">
  26.         {{ slide.text }}
  27.     </div>
  29.     {% if '' != slide.badgeImage %}
  30.         <div class="OttCmsSlider__badge{% if 2 <= responsive.xs.items %} is-small-mobile{% endif %}"
  31.                 {% if '' != slide.badgeBackgroundColorHover %}data-badge-background-color-hover="{{ slide.badgeBackgroundColorHover }}"{% endif %}
  32.                 {% if '' != slide.badgeBackgroundColor %}
  33.                     data-badge-background-color="{{ slide.badgeBackgroundColor }}"
  34.                     style="background: {{ slide.badgeBackgroundColor }};"
  35.                 {% endif %}
  36.         >
  37.             <img src="{{ mediaCollection.get(slide.badgeImage).getUrl() }}" class="OttCmsSlider__badge-icon" />
  38.         </div>
  39.     {% endif %}
  41.     {% if '' != slide.linkUrl %}
  42.         </a>
  43.     {% else %}
  44.         </div>
  45.     {% endif %}
  46. </div>