How do i retrieve the media url in the storefront of my shopware theme?

Question

I created a shopware theme with custom block and element in the admin panel, this element has both text and image, I am able to retrieve the configurations in the storefront, however, the image is returned as a mediaID ,how do i get the actual url of the image?

This is my element template.

`{% block element_rs_category_tile %}

{% if num == 1 %}

    {% set element = element_1 %}

{% endif %}

{% if num == 2 %}

    {% set element = element_2 %}

{% endif %}

{% if num == 3 %}

    {% set element = element_3 %}

{% endif %}

{% if num == 3 %}

    {% set element = element_3 %}

{% endif %}

{% set mediaId = element.config.media.value  %}
{% set criteria = {
    'ids': [ mediaId ]
} %}

{% set url = services.repository.search('media', criteria).first %}


{# Get the media URL using the media ID #}


{{dump(url)}}

{% block cms_element_rs_category_tile_content %}
    <div class="cms_element_rs_category_tile_image_container">
        <img
            class="cms_element_rs_category_tile_image"
            src="{{ element.config.media.value }}"
            style="{{ element.config.styles.value }}"
            alt="rs-category-tile"
        >
    </div>
    <div class="cms_element_rs_category_tile_title">{{ element.config.title.value }}</div>
    <div class="cms_element_rs_category_tile_description"> {{element.config.description.value}}
    </div>
    <div class="cms_element_rs_category_tile_button">
        <a  
           class="cms_element_rs_category_tile_button_link" 
           href="{{element.config.categoryUrl.value }}">Detail</a>
    </div>
   
{% endblock %}


</div>

{% endblock %} `

I tried writing a script

Answer 1

A dataresolver is required to retreive the URL

//<pluginroot>/src/DataResolver/BannerImageCmsElementResolver.php
<?php declare(strict_types=1);

namespace ExampleTheme\DataResolver;

use Shopware\Core\Content\Cms\Aggregate\CmsSlot\CmsSlotEntity;
use Shopware\Core\Content\Cms\DataResolver\Element\AbstractCmsElementResolver;
use Shopware\Core\Content\Cms\DataResolver\Element\ElementDataCollection;
use Shopware\Core\Content\Cms\DataResolver\ResolverContext\ResolverContext;
use Shopware\Core\Content\Cms\DataResolver\CriteriaCollection;
use Shopware\Core\Framework\DataAbstractionLayer\Search\Criteria;
use Shopware\Core\Content\Cms\SalesChannel\Struct\ImageStruct;
use Shopware\Core\Content\Media\MediaDefinition;
use Shopware\Core\Content\Media\MediaEntity;

class BannerImageCmsElementResolver extends AbstractCmsElementResolver
{
    public function getType(): string
    {
        return 'banner-image';
    }

    public function collect(CmsSlotEntity $slot, ResolverContext $resolverContext): ?CriteriaCollection
    {
        $config = $slot->getFieldConfig();
        $myCustomMedia = $config->get('media');

        if (!$myCustomMedia) {
            return null;
        }

        $mediaId = $myCustomMedia->getValue();

        $criteria = new Criteria([$mediaId]);

        $criteriaCollection = new CriteriaCollection();
        $criteriaCollection->add('media_' . $slot->getUniqueIdentifier(), MediaDefinition::class, $criteria);

        return $criteriaCollection;
    }

    public function enrich(CmsSlotEntity $slot, ResolverContext $resolverContext, ElementDataCollection $result): void
    {
        
        $config = $slot->getFieldConfig();
        $image = new ImageStruct();
        $slot->setData($image);

        $mediaConfig = $config->get('media');

        if ($mediaConfig && $mediaConfig->isStatic() && $mediaConfig->getValue()) {
            $image->setMediaId($mediaConfig->getStringValue());
            $searchResult = $result->get('media_' . $slot->getUniqueIdentifier());

            if (!$searchResult) {
                return;
            }

            $media = $searchResult->get($mediaConfig->getStringValue());

            if (!$media) {
                return;
            }
            $image->setMedia($media);
        }
    }
}