custom/plugins/FroshLazySizes/src/Resources/views/storefront/utilities/thumbnail-lazysize.html.twig line 1

  1. {% block thumbnail_utility_lazysize %}{% apply spaceless %}
  2.     {% if attributes is not defined %}
  3.         {% set attributes = {} %}
  4.     {% endif %}
  6.     {% if attributes.class %}
  7.         {% set attributes = attributes|merge({'class': 'frosh-proc lazyload ' ~ attributes.class}) %}
  8.     {% else %}
  9.         {% set attributes = attributes|merge({'class': 'frosh-proc lazyload'}) %}
  10.     {% endif %}
  12.     {% if attributes.alt is not defined and media.translated.alt is defined %}
  13.         {% set attributes = attributes|merge({'alt': media.translated.alt}) %}
  14.     {% endif %}
  16.     {% if attributes.title is not defined and media.translated.title is defined %}
  17.         {% set attributes = attributes|merge({'title': media.translated.title}) %}
  18.     {% endif %}
  20.     {% set metaProportion = media.metaData %}
  21.     {% if media.thumbnails|length > 0 %}
  22.         {% set thumbnails = media.thumbnails|filter((v) => v.width <= metaProportion.width)|sort((a, b) => a.width <=> b.width)|reverse %}
  24.         {% if thumbnails %}
  25.             {# generate srcset with all available thumbnails #}
  26.             {% set srcsetValue %}{% apply spaceless %}
  27.                 {{ media.url|frosh_encode_url }} {{ thumbnails|first.width + 1 }}w, {% for thumbnail in thumbnails %}{{ thumbnail.url|frosh_encode_url }} {{ thumbnail.width }}w{% if not loop.last %}, {% endif %}{% endfor %}
  28.             {% endapply %}{% endset %}
  29.         {% endif %}
  30.     {% endif %}
  32.     {% set ratio = metaProportion.width / metaProportion.height|default(1) %}
  34.     {% set inlineStyle = "aspect-ratio:" ~ ratio ~ ";" %}
  35.     {% if attributes.style %}
  36.         {% set attributes = attributes|merge({'style': inlineStyle ~ attributes.style}) %}
  37.     {% else %}
  38.         {% set attributes = attributes|merge({'style': inlineStyle}) %}
  39.     {% endif %}
  41.     {% set parentFit = parentFit ?? attributes['data-object-fit'] ?? false %}
  42.     {% if not parentFit and 'product-image' in attributes.class and 'is-standard' in attributes.class %}
  43.         {% set parentFit = 'contain' %}
  44.     {% endif %}
  46.     {% if not config('FroshLazySizes.config.UseAdvancedRatio') %}
  47.         {% set ratio = max(1, ratio) %}
  48.     {% endif %}
  50.     {% block thumbnail_utility_img %}
  51.         {% if src is not defined %}
  52.             {% set src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
  53.         {% endif %}
  55.         <img src="{{ src }}"
  56.             data-src="{{ media.url|frosh_encode_url }}"
  57.             {% if srcsetValue %}
  58.                 data-srcset="{{ srcsetValue }}"
  59.                 data-sizes="auto"
  60.                 data-aspectratio="{{ ratio }}"
  61.                 {% if parentFit %}data-parent-fit="{{ parentFit }}"{% endif %}
  62.             {% endif %}
  63.             {% for key, value in attributes %}
  64.                 {{ key }}="{{ value }}"
  65.                 {% if key == 'itemprop' %}
  66.                     content="{{ media.url|frosh_encode_url }}"
  67.                 {% endif %}
  68.             {% endfor %}
  69.         />
  71.     {% endblock %}
  72. {% endapply %}{% endblock %}