Use url of media field in view twig

Question

I need to output the url for field_slide_media in views-view-unformatted--carousel.html.twig.

I can output the entity ID using:

{{ view.field.field_slide_media.value(view.result[i]) }}

I would like to use it in

<img src="url of field_slide_media">

I can also output the whole image, but I need to be able to add an img class to it in the twig, so it's too much being output. I need the uri not the whole output.

{{ view.style_plugin.getField(loop.index0, 'field_slide_media') }}

gives me:

<img src="/sites/default/files/styles/carousel_large_image/public/2020-07/Mal%20Event%20Instagram%20Grid%202%20V2.png?itok=ZHLLokti" alt="art" typeof="foaf:Image" >

Answer 1

If you are configuring the view with the fields. You can try setting the formatter of the image to 'URL to image' and then create the HTML yourself like

<img src="{{ view.field.field_slide_media }}" />

Or you can try file_url

Answer 2

It seems that the easiest way to generate a url is to use View Modes.

I created a new Media view mode.

Then go to Media types > Image > Manage display and scroll to the very bottom and click on Custom display settings. Check the box next to the new media image to add it to display. then select the new media type to customise it. Under Format use the dropdown to select URL to image. There is a settings cog on the right of this dropdown. I had already created an image style for this type of image so selected that from the list to use it.

Go to the Content type > Image field > Display and select the correct image style from the dropdown in the cog setting on the right-hand-side of the screen.

To use the image in the twig I got the url by inserting:

 {% set uri = view.style_plugin.getField(loop.index0, 'field_slide_media') %}
 <img class="img-bg" src="{{ uri }}">

Just a little sidenote, you won't see the image if you have twig debug on.