stack/src/components/items/media-item/media-item.twig line 1

Open in your IDE?
  1. {% set is_video = props.video.src ? true : false %}
  2. {% set is_product = props.variant == "product" ? true : false %}
  4. {%- set class_name = [
  5.   "i-media",
  6.   "u-posr",
  7.   is_video ? "--video u-img-hover" : null,
  8.   is_product ? "--product" : null
  9. ]|join(' ')|trim -%}
  11. {%- set attrs = [
  12.   'class="' ~ class_name ~ '"',
  13. ] -%}
  15. {%- if is_video %}
  16.   {%- set attrs = attrs|merge(['data-fancybox data-src="' ~ props.video.src ~ '"']) -%}
  17. {%- endif -%}
  19. {%- set attrs = attrs|join(' ')|trim -%}
  21. {% set img_props = {
  22.   width: is_product ? 656 : 568,
  23.   height: is_product ? 656 : 568,
  24.   objectfit: is_product ? "contain" : "cover",
  25.   is_placeholder: true,
  26.   ratio: "1-1",
  27. } %}
  29. <div {{ attrs|raw }}>
  30.   {% if props.img %}
  31.     {% include "@Components/img/img.twig" with {props: props.img|merge(img_props)} %}
  32.   {% else %}
  33.     {% include "@Components/img/img.twig" with {props: {
  34.       src: base_path ~ "images/content/placeholder.png",
  35.     }|merge(img_props)} %}
  36.   {% endif %}
  38.   {% if is_video %}
  39.     <div class="i-media__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle">
  40.       {% include "@Components/icon/icon.twig" with {props: {
  41.         src: "@Images/svg/play.svg",
  42.         size: "xxl",
  43.         color: "primary",
  44.       }} %}
  45.     </div>
  46.   {% endif %}
  48.   {% if props.tag and is_product %}
  49.     {% include "@Components/items/tag-item/tag-item.twig" with {props: {
  50.       title: props.tag.title,
  51.       size: "sm-base",
  52.       variant: "product",
  53.       extra_class: "i-media__tag u-posa"
  54.     }} %}
  55.   {% endif %}
  56. </div>