So I have created a new template paragraph--header-image.html.twig

The source looks like this:

<div class="header-image" data-image="{{ content.field_image_file|striptags }}">
    
</div>

Of course this doesn't work since content->field_image_file is an array.

btw: I'm using the Image URL formatter. So the output is an URL.

But how can I get the output without the div's? I also tried {{ content.field_image_file|without|striptags }} and {{ content.field_image_file|raw|striptags }}, without success. It seems like rendering is the last thing that happens, after all the filters have been applied.

Comments

SoBiT created an issue. See original summary.

jeroen.b’s picture

jeroen.b commented

What happens when you use content.field_image_file[0]?
Anyway, the best way to do this is using a preprocess hook to add it as a separate variable that is then exposed in twig.

hongpong’s picture

hongpong commented

More info about finding these variables, how to prep them with preprocess, and how to work with multiple paragraphs on the same pageload that both have image fields would be very helpful. (like how can i theme these image field URLs in a layout, with 2+ paragraphs?)

evanmwillhite’s picture

evanmwillhite commented

Just using the regular image formatter, this worked for me to get the image url: file_url(content.FIELDNAME.0['#item'].entity.uri.value)

aadil.addweb’s picture

aadil.addweb commented

You can also use below code for getting image url:

{{ file_url(paragraph.FIELDNAME.entity.fileuri) }}

brahmjeet789’s picture

brahmjeet789 commented

@SoBiT you can use following code in
{{ content.field_image_file[0]['#uri'].value )}}

nimab’s picture

nimab commented

file_url(content.field_image.0['#item'].entity.uri.value) worked for me with regular image format

berdir’s picture

berdir
Primary language German
Location Switzerland
commented
Status: Active » Fixed

The correct answer is #5 inside a paragraph template, going through content is much more complicated.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

inman’s picture

inman commented

Display url image in content(product).TWIG from paragraph:

1. Install Twig Tweak.
2. Read Cheat sheet(File URL Filter) in Twig Tweak.
You can install Twig Field Value too.

{% set my_image = product.FIELD_IN_PRODUCT['0']['#paragraph'].FIELD_IN_PARAGRAPH | file_url %}

or
{{ product.FIELD_IN_PRODUCT['0']['#paragraph'].FIELD_IN_PARAGRAPH | file_url }}

Paragraph display - FORMAT: thumbnail