friendsofshopware/froshlazysizes

This plugin allows you to use lazy loading for your images.

LazySizes for Shopware 6

This plugin has built-in Lazyloading with auto generated sizes for best fitting sizes.

Install

Download the plugin from the release page and enable it in shopware.

By composer

composer require frosh/lazy-sizes

From source

Run npm install in src/Resources/app/storefront within the plugin directory

By zip

download latest release and upload into admin: https://github.com/FriendsOfShopware/FroshLazySizes/releases/latest/download/FroshLazySizes.zip

Adding more thumbnail sizes:

• Save new size in the folder of the media management
• then run the command bin/console media:generate-thumbnails on the console to update the thumbnails for all images in the database
• Clear shop cache

Selectively deactivate plugins lazysizes and lazyloading function

This might be useful to optimize loading images above the fold or if you don't like to use the plugin for specific images or tooltip.

Specific images

Add variable lazysizes with value false before using sw_thumbnails in the template.

Cms sections

Add css class no-lazysizes to your sections

Cms blocks

Add css class no-lazysizes to your block

Overwrite no-lazysizes of sections class in block

Add class lazysizes to your block

License

The MIT License (MIT). Please see License File for more information.

froshlazysizes's Issues

Nach der Installation sind die Bilder weg

PHP Version

8.1.17

Shopware Version

6.4.19

Actual behaviour

Hallo Friends of Shopware,

vielen Dank für die Bereitstellung des Lazy Loading Plugins. Nach der Installation sind erstmal alle Bilder weg, siehe
Screenshot.
Müssen die neu generiert werden? Kann man das manuell irgendwie anstoßen?

Vielen Dank.

Schöne Grüße,
Matthias Rau

Expected behaviour

.

Steps to Reproduce?

.

shopware-cli cannot release 2.0.1

PHP Version

No response

Shopware Version

No response

Actual behaviour

https://github.com/FriendsOfShopware/FroshLazySizes/actions/runs/4588749667/jobs/8103185816

Expected behaviour

....

Steps to Reproduce?

...

2.1.1 - missing release tag

PHP Version

No response

Shopware Version

No response

Plugin Version

2.1.1

Actual behaviour

2.1.1 wasn't released - seem's like the job failed.

Expected behaviour

release tag for 2.1.1

Steps to Reproduce?

check releases

Since the Update to Version 2.0.1 the images are no longer displayed

PHP Version

8.1

Shopware Version

6.4.20

Actual behaviour

Since the Update to Version 2.0.1 the images are no longer displayed. If i deactivate the plugin the images are displayed again. Caches and Storages are all cleared.

Expected behaviour

Images are visible

Steps to Reproduce?

Update to 2.0.1

How to use plugin function for images, inserted in templates

Question

If we use images in footer blocks, is there an option to use lazy loading and lazy sizes by adding the classes?
We tested this by adding the following code, but google page insigts doesn't recognize the images as lazy loaded:

<img class="frosh-proc lazyautosizes lazyloaded" src="https://www.kleinmetall.de/bundles/sysgthemekm/award-logos/logo_km_50jahre…" width="80px">

is not compatible with shopware version 6.5.3.2

PHP Version

8.2.3

Shopware Version

6.5.3.2

Actual behaviour

Expected behaviour

Please check the compatibility with shopware version 6.5.3.2

Steps to Reproduce?

I probably can't switch to version 6.5.3.2 in the Shopware account because this extension is not compatible.

bin/build-storefront.sh results in an error

PHP Version

8.1

Shopware Version

6.4.20.0

Actual behaviour

When I run bin/build-storefront.sh I get the following error:

● Shopware 6 Storefront █████████████████████████ building (10%) 0/2 modules 2 active
 babel-loader › ../../../../../../custom/plugins/FroshLazySizes/src/Resources/app/storefront/src/main.js

node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/home/ploi/www.domain.com/vendor/shopware/storefront/Resources/app/storefront/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/ploi/www.domain.com/vendor/shopware/storefront/Resources/app/storefront/node_modules/webpack/lib/NormalModule.js:412:16)
    at /home/ploi/www.domain.com/vendor/shopware/storefront/Resources/app/storefront/node_modules/webpack/lib/NormalModule.js:444:10
    at /home/ploi/www.domain.com/vendor/shopware/storefront/Resources/app/storefront/node_modules/webpack/lib/NormalModule.js:320:13
    at /home/ploi/www.domain.com/vendor/shopware/storefront/Resources/app/storefront/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/ploi/www.domain.com/vendor/shopware/storefront/Resources/app/storefront/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/home/ploi/www.domain.com/vendor/shopware/storefront/Resources/app/storefront/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /home/ploi/www.domain.com/vendor/shopware/storefront/Resources/app/storefront/node_modules/babel-loader/lib/index.js:55:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.14.0

Expected behaviour

No error.

Steps to Reproduce?

Run bin/build-storefront.sh with the extension FroshLazySizes installed.

LazySizes und LazyLoading

Please describe the feature you would like to see implemented.

Hey Frosh Team,

i am curious, if there is a blocking reason for the extension LazySizes und LazyLoading not being compatible to 6.4.20.2 as is already compatible to 6.5

Thanks a lot and best regards
Daniel

Images "above the fold" on category pages are lazy loaded

PHP Version

No response

Shopware Version

No response

Plugin Version

No response

Actual behaviour

Images "above the fold" on category pages are lazy loaded.

Expected behaviour

Images "above the fold" should not be lazy loaded, because it increases the page load time and Lighthouse complains.

My suggestion if there is no easy solution:

• Do not lazy load the first 4 images if the window is so small that 1 product is shown per row.
• Do not lazy load the first 4 images if the window is so small that 2 products are shown per row.
• Do not lazy load the first 6 images if the window is so small that 3 products are shown per row.
• Do not lazy load the first 8 images if the window is so small that 4 products are shown per row.

If that is still too complicated:
Do not lazy load the first 4 images.

Steps to Reproduce?

Load and inspect a category page.

Bilder werden nach Update nicht mehr angezeigt

PHP Version

8.2

Shopware Version

6.4.20.0

Actual behaviour

Nach dem Update auf v1.0.1 werden keine Bilder mehr in der Storefront angezeigt.
Bei Deaktivierung des Plugins werden wieder alle Bilder angezeigt.
Cache löschen bringt nichts, Plugin komplett neu installieren auch nicht.
Bei manuellem Hochladen der Version 1.0 werden wieder Bilder angezeigt

Expected behaviour

Bilder sollten auch nach Plugin Update in der Storefront angezeigt werden

Steps to Reproduce?

Update des Plugins auf v1.1

Not compatible with 6.6.0.0-rc4 bin/build-storefront.js ?

PHP Version

8.2

Shopware Version

6.6.0.0-rc4

Plugin Version

2.0.5

Actual behaviour

bin/build-storefront.js gives some errors while running:

  ERROR in ../../../../../../store.shopware.com/froshlazysizes/src/Resources/app/storefront/src/main.js 1:0-19
  Module not found: Error: Can't resolve 'lazysizes' in '/var/www/html/vendor/store.shopware.com/froshlazysizes/src/Resources/app/storefront/src'

  ERROR in ../../../../../../store.shopware.com/froshlazysizes/src/Resources/app/storefront/src/main.js 2:0-60
  Module not found: Error: Can't resolve 'lazysizes/plugins/native-loading/ls.native-loading' in '/var/www/html/vendor/store.shopware.com/froshlazysizes/src/Resources/app/storefront/src'

  ERROR in ../../../../../../store.shopware.com/froshlazysizes/src/Resources/app/storefront/src/main.js 3:0-52
  Module not found: Error: Can't resolve 'lazysizes/plugins/attrchange/ls.attrchange' in '/var/www/html/vendor/store.shopware.com/froshlazysizes/src/Resources/app/storefront/src'

  ERROR in ../../../../../../store.shopware.com/froshlazysizes/src/Resources/app/storefront/src/main.js 4:0-52
  Module not found: Error: Can't resolve 'lazysizes/plugins/parent-fit/ls.parent-fit' in '/var/www/html/vendor/store.shopware.com/froshlazysizes/src/Resources/app/storefront/src'

  ERROR in ../../../../../../store.shopware.com/froshlazysizes/src/Resources/app/storefront/src/main.js 5:0-52
  Module not found: Error: Can't resolve 'lazysizes/plugins/object-fit/ls.object-fit' in '/var/www/html/vendor/store.shopware.com/froshlazysizes/src/Resources/app/storefront/src'

  frosh-lazy-sizes (webpack 5.89.0) compiled with 5 errors in 814 ms

Is it not yet compatible with Webpack5?

Expected behaviour

Build the storefront js correctly.

Steps to Reproduce?

Run bin/build-storefront.sh

Image scale issue on browser zoom levels (sometimes)

PHP Version

8.2.15

Shopware Version

6.5.8.9

Plugin Version

2.2.0

Actual behaviour

If the browser zoom level is below 100%, e.g. 80%, images might be smaller than expected after page load.

Discoveries

• Changing zoom level can fix or break the image display.
• Opening or selecting the image via Browser console can reset/ fix the image display.
• Loading the page at 100% zoom and then zooming e.g. to 80%, does not break the image; however starting in < 100% and changing the zoom, does.
• The issue does not always appear, e.g. if being too fast with zoom or viewport scale changes.
• A smaller image instead the suited one seems to be chosen.

Expected behaviour

The image size suited for the viewport and given CSS styles/ attributes is chosen.

In the given demo case (see image attached), the image should fill the box according to its proportions.

Steps to Reproduce?

Steps

1. Install and activate plugin
2. Set up a product with images, to be displayed in the gallery
3. Zoom out in browser (e.g. to 80%)
4. Navigate to the product detail page
5. Load/ Reload page until issue appears

• Try with and without open console (disabled cache)

Image snippet

cms-element-image-gallery:

<img src="..." data-src="..." data-srcset="... 301w, ... 300w, ... 200w" data-sizes="auto"
    data-aspectratio="0.368" data-parent-fit="contain"
    class="frosh-proc img-fluid gallery-slider-image magnifier-image js-magnifier-image lazyautosizes lazyloaded"
    alt="" title="" data-full-image="..." data-object-fit="contain" itemprop="image" content="..." fetchpriority="high"
    style="aspect-ratio: 0.368 / 1; cursor: default;" sizes="158px" srcset="... 301w, ... 300w, ... 200w">

Specs

• Theme
  • Shopware Default
• Plugins
  • FroshLazySizes
  • Others used are non-interfering (backend)
• Browsers
  • Reproducible: Google Chrome 124.0, Firefox 126.0
  • Not reproducible: Safari 17.4
• System
  • MacOS 14.14

---

version 2.0.2 on Webkit not working

PHP Version

8.2

Shopware Version

6.5.6.0

Actual behaviour

On Webkit (Safari/iOS) version 2.0.2 doesn't display images (blanks).
Maybe related to Use object-fit given into thumbnail utility

Expected behaviour

show all images

Steps to Reproduce?

Use any webkit based browser

Images contained in tooltip not being loading when using plugin

PHP Version

8.1.2

Shopware Version

6.4.20.2

Plugin Version

1.1.2

Actual behaviour

When on the product listing, if the listing detail contains a tooltip that also contains a image example below

Tooltip Element

Current Display

Dynamic Tooltip with no image

Expected behaviour

Screenshot of the expect tooltip content on hover

Dynamic tooltip - Populated with image

Steps to Reproduce?

To reproduce you will need to install the Energy Saving Ordinance (EnEV) plugin from the Shopware store and assign the product a energy rating and energy label media (there tooltip image)

remove usage of plugin object-fit

Please describe the feature you would like to see implemented.

it is just a polyfill for old browsers

Support Shopware 6.5

Please describe the feature you would like to see implemented.

JS needs to be recompiled on this version

Remove lazy loading for the start image and the small preview images on product detail pages

PHP Version

No response

Shopware Version

No response

Plugin Version

No response

Actual behaviour

Images "above the fold" are lazy loaded.

Expected behaviour

Images "above the fold" should not be lazy loaded, because it increases the page load time and Lighthouse complains.

It would be great to remove lazy loading for the start image and the small preview images on product detail pages.

Steps to Reproduce?

Load and inspect a product detail page.

Image file names containing spaces will lead to srcset errors

PHP Version

No response

Shopware Version

6.4.18

Actual behaviour

frosh_encode_url does not properly encode spaces in thumbnail file names.

Output of a file like 'my image.jpg' will lead to:
data-srcset="{..}/media/{..}/my%20image.jpg {maxwidth}w, {..}/thumbnail/{..}/my image.jpg 1920w"

When lazy loading javascript replaces srcset this will lead to the warning: "Failed parsing 'srcset' attribute value since it has an unknown descriptor."

Expected behaviour

Output of a file like 'my image.jpg' will lead to:
data-srcset="../my%20image.jpg {maxwidth}w, ../my%20image.jpg 1920w"

Steps to Reproduce?

Upload images with spaces.
Suggestion: why not use sw_encode_url filter instead?
This was my quick solution in thumbnail.html.twig - replace frosh_encode_url with sw_encode_url.

Investigation result, error reason:

• As thumbnails do not have a /media/ path part in this case (instead /thumbnail/) the frosh_encode_url function returns the plain url.

Images in product categories are not shown correctly

PHP Version

8.1

Shopware Version

6.4.18.0

Actual behaviour

Images in product categories are not shown correctly. Instead of the src of the img being an URL it is a string like this "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", causing the image not to be rendered.

Example:

html <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://ourcdn/media/d1/99/8d/1664181798/wabenplatten-beelite-kohlschein-oberflaechen-kantenansicht.jpg?width=3000" data-srcset="https://ourcdn/media/d1/99/8d/1664181798/wabenplatten-beelite-kohlschein-oberflaechen-kantenansicht.jpg?width=3000 1201w, https://ourcdn/media/d1/99/8d/1664181798/wabenplatten-beelite-kohlschein-oberflaechen-kantenansicht.jpg?width=1200 1200w, https://ourcdn/media/d1/99/8d/1664181798/wabenplatten-beelite-kohlschein-oberflaechen-kantenansicht.jpg?width=1100 1100w, https://ourcdn/media/d1/99/8d/1664181798/wabenplatten-beelite-kohlschein-oberflaechen-kantenansicht.jpg?width=1000 1000w, https://ourcdn/media/d1/99/8d/1664181798/wabenplatten-beelite-kohlschein-oberflaechen-kantenansicht.jpg?width=900 900w, https://ourcdn/media/d1/99/8d/1664181798/wabenplatten-beelite-kohlschein-oberflaechen-kantenansicht.jpg?width=800 800w, https://ourcdn/media/d1/99/8d/1664181798/wabenplatten-beelite-kohlschein-oberflaechen-kantenansicht.jpg?width=700 700w, https://ourcdn/media/d1/99/8d/1664181798/wabenplatten-beelite-kohlschein-oberflaechen-kantenansicht.jpg?width=600 600w, https://ourcdn/media/d1/99/8d/1664181798/wabenplatten-beelite-kohlschein-oberflaechen-kantenansicht.jpg?width=500 500w, https://ourcdn/media/d1/99/8d/1664181798/wabenplatten-beelite-kohlschein-oberflaechen-kantenansicht.jpg?width=400 400w, https://ourcdn/media/d1/99/8d/1664181798/wabenplatten-beelite-kohlschein-oberflaechen-kantenansicht.jpg?width=300 300w" data-sizes="auto" data-aspectratio="1200/1200" data-parent-fit="contain" class="frosh-proc lazyload product-image is-standard" alt="BEElite print Wabenplatten weiß / braun" title="BEElite print Wabenplatten weiß / braun" style="aspect-ratio:1200/1200;">

Expected behaviour

The image should be displayed.

Steps to Reproduce?

This happens to all images on product category pages. We are using this plugin in combination with BunnyCdn Media Storage Plugin v2 and ThumbnailProcessor incl. Webp-Support.

In Version 1.0.2 no images displayed

PHP Version

8.1

Shopware Version

6.5.2.1

Actual behaviour

If i deactivate the plugin the images are displayed again. Caches and Storages are all cleared.

Expected behaviour

Images are visible

Steps to Reproduce?

PHP 8.1
Shopware 6.5.2.1
Install the Plugin an run " bin/console media:generate-thumbnails"

In the html source code:
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://...

1 x 1 px gif

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

composer

composer.json

github-actions

.github/workflows/pack-plugin.yml

npm

src/Resources/app/storefront/package.json

• lazysizes ^5.3.2

---

• Check this box to trigger a request for Renovate to run again on this repository

FroshLazySizes is incompatible with Spno6NewsletterBusiness Plugin

Please describe the feature you would like to see implemented.

Hey, ich bin der Entwickler des Newsletter Plugins aus Shopware 6. Wir haben ein Support Ticket erhalten von einem Kunden der sowohl unser Plugin als auch euer Plugin verwendet. Dabei ist aufgefallen, dass die Bilder im Newsletter nicht mehr laden aufgrund der lazy Funktion. Gibt es eine Möglichkeit das Plugin wahlweise zu deaktivieren? Sei es durch parameter oder sonstiges.

Beste Grüße
Jan Dommasch

Hey, I'm the developer of the newsletter plugin for Shopware 6. We received a support ticket from a customer who uses both our plugin and your plugin. It was noticed that the images in the newsletter no longer load due to the lazy function. Is there a way to optionally deactivate the plugin? Be it through parameters or something else.

Best regards
Jan Dommasch