How to get image with image style path to a twig template

Question

I had created a field called tv_adbackground on the settings filed to be a ble to uplaod a background image.

The upload works great!

How to get the path of the file or the image style medium or thumbinal in to a twig template like this?

...
 <div id="advertisement"> <!-- background-image uploaded on theme settings page should be used here ->


 <div id=advertisement-dimmer>

 <h3 class="adheading">{{ tv_adheading }}</h3>

<div id="admessage">{{ tv_admessage }}

<div class="btn-group adbuttons" role="group" aria-label="Basic    
example">
<button type="button" class="btn btn-primary btn-lg"><a 
style="color:#fff;" href="/signup">Register</a>   
</button>
<button type="button" class="btn btn-default btn-lg"><a 
href="/user/login">Login</a></button>
</div>
</div>

I would use css to retrive thte image path but with css i dont get teh variable to get the file path.

I am new to drupal 8 so it would be great if there will be anyone to help

Answer 1

It can be done with the help of two additional modules.

• Twig Field Value - to get the path to the image and
• Twig Tweak - to get the image style version of an image.

Then in your Twig template you would use something like this to get the image style path:

{{ content.field_image.entity.uri.value | image_style('medium') }}

where field_image is the name of the image field.

If you use something like the Media module then your images come from a referenced entity. In that case you could use

{{ file_url(content.field_referenced_entity | field_target_entity.field_image.entity.uri.value | image_style('medium')) }}

and field_referenced_entity would be the media/entity reference field and field_image the name of the image field on the referenced entity. Notice that in the second case the whole path is wrapped in file_url().

Answer 2

As per @Clive on this post.

use Drupal\image\Entity\ImageStyle;

$path = 'public://images/image.jpg';
$url = ImageStyle::load('style_name')->buildUrl($path);

This is the equivalent of image_style_url('style', uri) in Drupal 7.

Answer 3

To get the image with custom style in node.html.twig -

<img src="{{ node.IMAGE_FIELD.entity.uri.value | image_style('IMAGE_STYLE_NAME') }}">