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

Open in your IDE?
  1. {# activate load per default. If it is not activated only a data-src is set instead of the src tag. #}
  2. {% if load is not defined %}
  3.     {% set load = true %}
  4. {% endif %}
  6. {# By default no original image will be loaded as soon as thumbnails are available. #}
  7. {# When set to true the orginal image will be loaded when the viewport is greater than the largest available thumbnail. #}
  8. {% if loadOriginalImage is not defined %}
  9.     {% set loadOriginalImage = false %}
  10. {% endif %}
  12. {# By default the srcset sizes will be calculated automatically if `columns` are present and no `sizes` are configured. #}
  13. {# When set to false the sizes attribute will not be generated automatically. #}
  14. {% if autoColumnSizes %}
  15.     {% set autoColumnSizes = true %}
  16. {% endif %}
  18. {# uses cms block column count and all available thumbnails to determine the correct image size for the current viewport #}
  19. {% if media.thumbnails|length > 0 %}
  20.     {% if autoColumnSizes and columns and sizes is not defined %}
  21.         {# set image size for every viewport #}
  22.         {% set sizes = {
  23.             'xs': (theme_config('breakpoint.sm') - 1) ~'px',
  24.             'sm': (theme_config('breakpoint.md') - 1) ~'px',
  25.             'md': ((theme_config('breakpoint.lg') - 1) / columns)|round(0, 'ceil') ~'px',
  26.             'lg': ((theme_config('breakpoint.xl') - 1) / columns)|round(0, 'ceil') ~'px'
  27.         } %}
  29.         {# set image size for largest viewport depending on the cms block sizing mode (boxed or full-width) #}
  30.         {% if layout == 'full-width' %}
  31.             {% set container = 100 %}
  32.             {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'vw'}) %}
  33.         {% else %}
  34.             {% set container = 1360 %}
  35.             {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'px'}) %}
  36.         {% endif %}
  37.     {% endif %}
  39.     {% set thumbnails = media.thumbnails|sort|reverse %}
  41.     {# generate srcset with all available thumbnails #}
  42.     {% set srcsetValue %}{% apply spaceless %}
  43.         {% 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 %}
  44.     {% endapply %}{% endset %}
  46.     {# generate sizes #}
  47.     {% set sizesValue %}{% apply spaceless %}
  48.         {% set sizeFallback = 100 %}
  50.         {# set largest size depending on column count of cms block #}
  51.         {% if autoColumnSizes and columns %}
  52.             {% set sizeFallback = (sizeFallback / columns)|round(0, 'ceil') %}
  53.         {% endif %}
  55.         {% set breakpoint = {
  56.             'xs': theme_config('breakpoint.xs'),
  57.             'sm': theme_config('breakpoint.sm'),
  58.             'md': theme_config('breakpoint.md'),
  59.             'lg': theme_config('breakpoint.lg'),
  60.             'xl': theme_config('breakpoint.xl')
  61.         } %}
  63.         {% if thumbnails|first.width > breakpoint|reverse|first %}
  64.             {# @deprecated tag:v6.5.0 - Variable `maxWidth` and parent condition will be removed #}
  65.             {% set maxWidth = thumbnails|first.width %}
  66.         {% endif %}
  68.         {% for key, value in breakpoint|reverse %}(min-width: {{ value }}px) {{ sizes[key] }}{% if not loop.last %}, {% endif %}{% endfor %}, {{ sizeFallback }}vw
  69.     {% endapply %}{% endset %}
  70. {% endif %}
  73. {# Is lazy loading enabled? #}
  74. {% if config('IntediaImgbolt.config.imLazyLoadingEnabled') %}
  75.    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
  76.         data-src="{{ media|sw_encode_media_url }}"
  77.        {% if media.thumbnails|length > 0 %}
  78.            data-srcset="{{ srcsetValue }}"
  79.            {% if sizes['default'] %}
  80.            data-sizes="{{ sizes['default'] }}"
  81.            {% elseif sizes|length > 0 %}
  82.            data-sizes="{{ sizesValue }}"
  83.            {% endif %}
  84.        {% endif %}
  85.        {% if attributes is not defined %}{% set attributes = {} %}{% endif %}
  86.        {% set attributes = attributes|merge({ class: attributes.class ~ ' im-lazy'}) %}
  87.        {% for key, value in attributes %}{% if value != '' %} {{ key }}="{{ value }}"{% endif %}{% endfor %}
  88.    />
  89. {% else %}
  90.    <img {% if load %}src="{{ media|sw_encode_media_url }}" {% else %}data-src="{{ media|sw_encode_media_url }}" {% endif %}
  91.        {% if media.thumbnails|length > 0 %}
  92.            {% if load %}srcset="{{ srcsetValue }}" {% else %}data-srcset="{{ srcsetValue }}" {% endif %}
  93.            {% if sizes['default'] %}
  94.            sizes="{{ sizes['default'] }}"
  95.            {% elseif sizes|length > 0 %}
  96.            sizes="{{ sizesValue }}"
  97.            {% endif %}
  98.        {% endif %}
  99.        {% for key, value in attributes %}{% if value != '' %} {{ key }}="{{ value }}"{% endif %}{% endfor %}
  100.    />
  101. {% endif %}