feat: set aspect-ratio within css to reduce CLS

Author: tinect

CHANGELOG_de-DE.md

@@ -1,3 +1,9 @@
+# 1.1.0
+
+* Set aspect-ratio with inline-css to reserve space of images which reduces Cumulative Layout Shift (CLS)
+* Set class `frosh-proc` onto images managed by this plugin, use selector `img.frosh-proc` to set specific css style
+* Add usage of variable `src`. Use this to determine an own placeholder image or preload image.
+
 # 1.0.28
 
 * Beschränke Konfiguration auf "Alle Saleschannel"

CHANGELOG_en-GB.md

@@ -1,3 +1,9 @@
+# 1.1.0
+
+* Set aspect-ratio with inline-css to reserve space of images which reduces Cumulative Layout Shift (CLS)
+* Set class `frosh-proc` onto images managed by this plugin, use selector `img.frosh-proc` to set specific css style
+* Add usage of variable `src`. Use this to determine an own placeholder image or preload image.
+
 # 1.0.28
 
 * Restrict configuration to "All Saleschannels"

composer.json

@@ -11,7 +11,7 @@
         "thumbnail"
     ],
     "description": "This plugins allows you to use variable thumbnails, without having them on storage.",
-    "version": "1.0.28",
+    "version": "1.1.0",
     "type": "shopware-platform-plugin",
     "license": "mit",
     "authors": [

src/Resources/views/storefront/utilities/thumbnail.html.twig

@@ -4,9 +4,9 @@
     {% endif %}
 
     {% if attributes.class %}
-        {% set attributes = attributes|merge({'class': 'lazyload ' ~ attributes.class}) %}
+        {% set attributes = attributes|merge({'class': 'frosh-proc lazyload ' ~ attributes.class}) %}
     {% else %}
-        {% set attributes = attributes|merge({'class': 'lazyload'}) %}
+        {% set attributes = attributes|merge({'class': 'frosh-proc lazyload'}) %}
     {% endif %}
 
     {% if attributes.alt is not defined and media.translated.alt is defined %}
@@ -31,16 +31,19 @@
 
     {% set ratio = (metaProportion.width / max(metaProportion.height, 1))|round(3, 'floor') %}
 
-    {% if fullWidth %}
-        {% if ratio >= 1  %}
-            {% set inlineStyle = "width: 100vw; height: " ~ (100 / ratio)|round(3) ~ "vw" %}
-        {% else %}
-            {% set inlineStyle = "width: " ~ (100 * ratio)|round(3)~ "vw; height: 100vw" %}
-        {% endif %}
+    {% set inlineStyle = "aspect-ratio:" ~ ratio ~ ";" %}
+    {% if attributes.style %}
+        {% set attributes = attributes|merge({'style': inlineStyle ~ attributes.style}) %}
+    {% else %}
+        {% set attributes = attributes|merge({'style': inlineStyle}) %}
     {% endif %}
 
     {% block thumbnail_utility_img %}
-        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+        {% if src is not defined %}
+            {% set src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
+        {% endif %}
+
+        <img src="{{ src }}"
             data-src="{{ media.url|frosh_encode_url }}"
             {% if srcsetValue %}
                 data-srcset="{{ srcsetValue }}"
@@ -54,9 +57,6 @@
                     content="{{ media.url|frosh_encode_url }}"
                 {% endif %}
             {% endfor %}
-            {% if inlineStyle is defined %}
-                style="{{ inlineStyle }}"
-            {% endif %}
         />
 
     {% endblock %}