Skip to main content

Media Upload in CMS Configuration

Twig​

To your twig file, add:

<sw-media-field 
:label="ADD SNIPPET" 
:mediaId="slide.imageid" 
@media-id-change="onMediaSelected(index, $event)">
</sw-media-field>

Index JS​

Add method:

onMediaSelected(index, targetId) {
    this."your variable"[<your key>].imageid = targetId;
    this."your variable"[<your key>].imagepreviewid = targetId;
}

And to your Data, add:

imageid: null

Storefront twig file​

Add:

{% set mediaCollection = searchMedia([yourvariable.imageid], context.context) %}
{% set image = mediaCollection.get(yourvariable.imageid) %}

And, for example:

<div class="test" style="background-image: url('{{ image.url }}')"></div>

You can dump the image variable to get all IDs, URLs, widths and heights from your image.