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    
<button type="button" class="btn btn-primary btn-lg"><a 
style="color:#fff;" href="/signup">Register</a>   
<button type="button" class="btn btn-default btn-lg"><a 

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

  • in theme.theme files you have to write something like this in preprocess function $variables['logopath'] =$base_url.'/'. drupal_get_path('theme','your-theme') . '/images/image-name.svg'; , then print the variable {{ logopath }} in your theme – user52318 Apr 13 '17 at 9:15

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

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().

  • You are a saint! – Scott Sep 19 '18 at 0:27

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.


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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.