stack/src/components/img/img.twig line 1

Open in your IDE?
  1. {%- set class_name = [
  2.   "img",
  3.   props.objectfit in ["cover", "contain"] ? "--" ~ props.objectfit : null,
  4.   props.is_placeholder ? "--placeholder" : null,
  5.   props.ratio in ["4-3", "16-9", "3-2", "1-1", "3-4"] ? "--ratio-" ~ props.ratio : null,
  6.   props.extra_class|default(false) ? props.extra_class : null
  7. ]|join(' ')|trim -%}
  9. {%- set attrs = [
  10.   'class="' ~ class_name ~ '"',
  11. ] -%}
  13. {%- set attrs = attrs|join(' ')|trim -%}
  15. {# Image Attributes #}
  16. {%- set src_attribute = props.native_lazyload or props.disable_lazy ? 'src="' : 'src="" data-src="' -%}
  17. {%- set src_set_attribute = props.native_lazyload or props.disable_lazy ? 'srcset="' : 'srcset="" data-srcset="' -%}
  19. {%- set img_attrs = [
  20.   src_attribute ~ props.src|default("") ~ '"'
  21. ] -%}
  23. {%- set img_attrs = img_attrs|merge(['alt="' ~ props.alt|default("") ~ '"']) -%}
  25. {%- if props.width is defined -%}
  26.   {%- set img_attrs = img_attrs|merge(['width="' ~ props.width ~ '"']) -%}
  27. {%- endif -%}
  29. {%- if props.height is defined -%}
  30.   {%- set img_attrs = img_attrs|merge(['height="' ~ props.height ~ '"']) -%}
  31. {%- endif -%}
  33. {%- if props.native_lazyload and not props.disable_lazy|default(false) -%}
  34.   {%- set img_attrs = img_attrs|merge(['loading="lazy"']) -%}
  35. {%- endif -%}
  37. {%- if props.sizes -%}
  38.   {%- set img_attrs = img_attrs|merge(['sizes="' ~ props.sizes|join(', ')|trim ~ '"']) -%}
  39. {%- endif -%}
  41. {%- if props.draggable|default(false) == false -%}
  42.   {%- set img_attrs = img_attrs|merge(['draggable="false"']) -%}
  43. {%- endif -%}
  45. {%- if props.srcset is defined -%}
  46.   {%- set img_attrs = img_attrs|merge([src_set_attribute ~ props.srcset|join(', ')|trim ~ '"']) -%}
  47. {%- endif -%}
  49. {% if props.fetchpriority in ["high", "low"] %}
  50.   {%- set img_attrs = img_attrs|merge(['fetchpriority="' ~ props.fetchpriority ~ '"']) -%}
  51. {% endif %}
  53. {%- set img_attrs = img_attrs|join(' ')|trim -%}
  55. <div {{ attrs|raw }}>
  56.   <picture>
  57.     {% if props.sources %}
  58.       {% include "@Components/source/source.twig" with {props: {
  59.         sources: props.sources,
  60.         native_lazyload: props.native_lazyload,
  61.         disable_lazy: props.disable_lazy,
  62.       }} %}
  63.     {% endif %}
  65.     <img {{ img_attrs|raw }}>
  66.   </picture>
  67. </div>