How to get internal path of media file in Twig

Shopware 6 (English) Programming (EN)
,
1

Hello everyone,

The goal I am trying to achieve is to change the colour of SVG category media files on mouse hover.

Short introduction:
All media files loaded with {% sw_thumbnails ... %} are rendered in the twig template with an img tag. If the media file has thumbnails, then the img tag contains a srcset with all thumbnail paths.
If the media file is an SVG file, no thumbnails are present, so only a simple img tag is rendered.

As fas as I know, in order to be able to change the fill colour of an SVG on mouse hover, it is necessary that the raw data of the SVG file is present in the DOM, thus, not enclosed in an img tag.

Out of the box, Shopware already renders its default icons in the before mentioned way and uses a Twig method called source() to do so. The following code includes in the DOM the raw data of an icon given a path to the SVG file:

/src/vendor/shopware/storefront/Resources/views/storefront/utilities/icon.html.twig

        <span
            class="icon icon-{{ name }}{% for entry in styles %}{% if entry != "" %} icon-{{ entry }}{% endif %}{% endfor %}">
                {{ source('@' ~ namespace ~ '/../app/storefront/dist/assets/icon/'~ pack ~'/'~ name ~'.svg', ignore_missing = true) }}
        </span>

Now comes to the core question:
How can I get the right path to a media file? What should be the namespace and the path to the file so that the source() Twig method can find the SVG file, get the raw data and include it in the DOM?

Here an example:

{{ category.media.url }}
{# Output: 'media/05/59/4f/1625499059/kategorie_Apple-Mac.svg' #}

What I already tried:

{% set path = '@Storefront/media/05/59/4f/1625499059/kategorie_Apple-Mac.svg' %}
{% set path = '@Storefront/public/media/05/59/4f/1625499059/kategorie_Apple-Mac.svg' %}
{% set path = '@default/media/05/59/4f/1625499059/kategorie_Apple-Mac.svg' %}
{% set path = 'media/05/59/4f/1625499059/kategorie_Apple-Mac.svg' %}
{% set path = 'public/media/05/59/4f/1625499059/kategorie_Apple-Mac.svg' %}
{{ source(path) }}

And many other options I tried without obtaining success.

The Twig error is always the same:

# Template "/media/5d/51/e6/1625498977/kategorie_Aktion.svg" is not defined.

I would really appreciate any helpful tip that could guide me in the right direction.

Best regards.

3 „Gefällt mir“
2

Hello Arbinath, I have the same problem - did you find any solution for your problem?

2 „Gefällt mir“
3

I have the same problem and no solution yet.

As long as the last path-part before the filename is a timestamp now,
(and this was not the same in SW5) the image paths change, even if you only want to replace an image in the media-manager.

This way the „replace“-Feature does not work anymore.
Could somebody handle this as a bug please.