custom/plugins/zenitPlatformHorizon/src/Resources/views/storefront/utilities/thumbnail.html.twig line 1

Open in your IDE?
  1. {# TODO: @zenit - check on sw update #}
  2. {# activate load per default. If it is not activated only a data-src is set instead of the src tag. #}
  3. {% if load is not defined %}
  4.     {% set load = true %}
  5. {% endif %}
  7. {# By default no original image will be loaded as soon as thumbnails are available. #}
  8. {# When set to true the orginal image will be loaded when the viewport is greater than the largest available thumbnail. #}
  9. {% if loadOriginalImage is not defined %}
  10.     {% set loadOriginalImage = false %}
  11. {% endif %}
  13. {# By default the srcset sizes will be calculated automatically if `columns` are present and no `sizes` are configured. #}
  14. {# When set to false the sizes attribute will not be generated automatically. #}
  15. {% if autoColumnSizes is not defined %}
  16.     {% set autoColumnSizes = true %}
  17. {% endif %}
  19. {% if attributes is not defined %}
  20.     {% set attributes = {} %}
  21. {% endif %}
  23. {% if attributes.alt is not defined and media.translated.alt is defined %}
  24.     {% set attributes = attributes|merge({'alt': media.translated.alt}) %}
  25. {% endif %}
  27. {% if attributes.title is not defined and media.translated.title is defined %}
  28.     {% set attributes = attributes|merge({'title': media.translated.title}) %}
  29. {% endif %}
  31. {# uses cms block column count and all available thumbnails to determine the correct image size for the current viewport #}
  32. {% if media.thumbnails|length > 0 %}
  33.     {% if autoColumnSizes and columns and sizes is not defined %}
  34.         {# set image size for every viewport #}
  35.         {% set sizes = {
  36.             'xs': (theme_config('breakpoint.sm') - 1) ~'px',
  37.             'sm': (theme_config('breakpoint.md') - 1) ~'px',
  38.             'md': ((theme_config('breakpoint.lg') - 1) / columns)|round(0, 'ceil') ~'px',
  39.             'lg': ((theme_config('breakpoint.xl') - 1) / columns)|round(0, 'ceil') ~'px'
  40.         } %}
  42.         {# Start: @zenit - Consider portrait images, because the width of their thumbnails is less than the calculated thumbnail specification #}
  43.         {% set imageHeight = media.metaData.height|intval %}
  44.         {% set imageWidth = media.metaData.width|intval %}
  45.         {% if imageHeight > 0 and imageWidth > 0 %}
  46.             {% set imageAspectRatio = imageHeight / imageWidth %}
  47.         {% endif %}
  49.         {% if imageAspectRatio > 1 %}
  50.             {% set sizes = {
  51.                 'xs': (theme_config('breakpoint.sm') * imageAspectRatio - 1) ~'px',
  52.                 'sm': (theme_config('breakpoint.md') * imageAspectRatio - 1) ~'px',
  53.                 'md': ((theme_config('breakpoint.lg') * imageAspectRatio - 1) / columns)|round(0, 'ceil') ~'px',
  54.                 'lg': ((theme_config('breakpoint.xl') * imageAspectRatio - 1) / columns)|round(0, 'ceil') ~'px'
  55.             } %}
  56.         {% endif %}
  57.         {# End: @zenit - Consider portrait images, because the width of their thumbnails is less than the calculated thumbnail specification #}
  59.         {# set image size for largest viewport depending on the cms block sizing mode (boxed or full-width) #}
  60.         {% if layout == 'full-width' %}
  61.             {% set container = 100 %}
  62.             {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'vw'}) %}
  63.         {% else %}
  64.             {# ... @zenit - add layout container width from theme configuration #}
  65.             {% set container = theme_config("zen-layout-container-width") ?: 1400 %}
  66.             {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'px'}) %}
  68.             {# Start: @zenit - Consider portrait images, because the width of their thumbnails is less than the calculated thumbnail specification #}
  69.             {% if imageAspectRatio > 1 %}
  70.                 {% set sizes = sizes|merge({ 'xl': ((container / columns) * imageAspectRatio)|round(0, 'ceil') ~'px'}) %}
  71.             {% endif %}
  72.             {# End: @zenit - Consider portrait images, because the width of their thumbnails is less than the calculated thumbnail specification #}
  73.         {% endif %}
  74.     {% endif %}
  76.     {% set thumbnails = media.thumbnails|sort|reverse %}
  78.     {# generate srcset with all available thumbnails #}
  79.     {% set srcsetValue %}{% apply spaceless %}
  80.         {% if loadOriginalImage %}{{ media|sw_encode_media_url }} {{ thumbnails|first.width + 1 }}w, {% endif %}{% for thumbnail in thumbnails %}{{ thumbnail.url | sw_encode_url }} {{ thumbnail.width }}w{% if not loop.last %}, {% endif %}{% endfor %}
  81.     {% endapply %}{% endset %}
  83.     {# generate sizes #}
  84.     {% set sizesValue %}{% apply spaceless %}
  85.         {% set sizeFallback = 100 %}
  87.         {# set largest size depending on column count of cms block #}
  88.         {% if autoColumnSizes and columns %}
  89.             {% set sizeFallback = (sizeFallback / columns)|round(0, 'ceil') %}
  90.         {% endif %}
  92.         {% set breakpoint = {
  93.             'xs': theme_config('breakpoint.xs'),
  94.             'sm': theme_config('breakpoint.sm'),
  95.             'md': theme_config('breakpoint.md'),
  96.             'lg': theme_config('breakpoint.lg'),
  97.             'xl': theme_config('breakpoint.xl')
  98.         } %}
  100.         {% if thumbnails|first.width > breakpoint|reverse|first %}
  101.             {# @deprecated @zenit tag:v3.1.0 - Variable `maxWidth` and parent condition will be removed #}
  102.             {% set maxWidth = thumbnails|first.width %}
  103.         {% endif %}
  105.         {% for key, value in breakpoint|reverse %}(min-width: {{ value }}px) {{ sizes[key] }}{% if not loop.last %}, {% endif %}{% endfor %}, {{ sizeFallback }}vw
  106.     {% endapply %}{% endset %}
  107. {% endif %}
  108. <img {% if load %}src="{{ media|sw_encode_media_url }}" {% else %}data-src="{{ media|sw_encode_media_url }}" {% endif %}
  109.     {% if media.thumbnails|length > 0 %}
  110.         {% if load %}srcset="{{ srcsetValue }}" {% else %}data-srcset="{{ srcsetValue }}" {% endif %}
  111.         {% if sizes['default'] %}
  112.         sizes="{{ sizes['default'] }}"
  113.         {% elseif sizes|length > 0 %}
  114.         sizes="{{ sizesValue }}"
  115.         {% endif %}
  116.     {% endif %}
  117.     {% for key, value in attributes %}{% if value != '' %} {{ key }}="{{ value }}"{% endif %}{% endfor %}
  118. />