Images contained in tooltip not being loading when using plugin

mwhhorton1987 commented 3 weeks ago

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)

tinect commented 3 weeks ago

Hi @mwhhorton1987

I don't have the capacity to check support for any external plugin, especially if it is a paid one.

You are welcome to create a PR solving this issue or contact the plugin manufacturer.

brandonmillar commented 1 week ago

Hi @tinect + @mwhhorton1987

I have spent some time investigating this. It appears the cause of the issue is in the below block. The "src" attribute is being set to the base64 string when tooltips are used, rather than the media URL, in src/Resources/views/storefront/utilities/thumbnail-lazysize.html.twig:

... 
{% block thumbnail_utility_img %}
        {% if src is not defined %}
            {% set src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
        {% endif %}
....

Making a change to cater for this, such as the below resolves the tooltip issue we are seeing. However, my concern is, I am unsure if the base64 image fallback is to cater for specific scenarios, or if it is a generic fallback to ensure there is content in the src? Would the below amendment be a suitable fix?

...
    {% block thumbnail_utility_img %}
        {% if src is not defined %}
            {% if media is definied and media.url is defined %}
                {% set src = media.url|frosh_encode_url %}
            {% else %}
                {% set src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
            {% endif %}
        {% endif %}
...

Following the above change on our staging environment, the tooltips are loading correctly and images are being lazy loaded.

If you agree with the change I will raise a pull request shortly.

Thankyou

tinect commented 1 week ago

This would kill the function of FroshLazySizes. What I mean: Uninstalling FroshLazySizes has the same effect on performance and disadvantages - while it will always and everywhere load the full-sized image.

You might want to use this function dedicated for the element the used plugins output:

https://github.com/FriendsOfShopware/FroshLazySizes?tab=readme-ov-file#selectively-deactivate-plugins-lazysizes-and-lazyloading-function

Contact the manufacturer or decorate its template setting the mentioned variable.

FriendsOfShopware / FroshLazySizes