By cheesetriple

2016-01-22 16:03:53 8 Comments

I have a custom block containing a text field and an image field. I would like to render the block so that the image's URL can be defined as a data attribute of the block's wrapper div so that it can be used by a javascript function to create a parallax background effect behind the text field.

If I make a template file block.parallax.html.twig, I am able to render the image HTML.

{{ content.field_parallax_image.0 }}

However If I try to get the actual image URL, nothing is returned

{{ content.field_parallax_image.0['#url'] }}

If I dump the #item keys

{{ dump(content.field_parallax_image.0['#item']|keys) }}

I am able to get target_id, alt, title, width and height values, but I can't find the URL defined anywhere.

I have also tried to see if I could find anything useful in the block preprocess function but the field_parallax_image #url field in the variables is also empty

function mytheme_preprocess_block(&$variables) {
    if( isset($variables['content']['body']['#bundle']) && $variables['content']['body']['#bundle'] == 'parallax'){
        $variables['img_url'] = $variables['elements']['content']['field_parallax_image'][0]['#url'];

Is there a way I can get this URL?


@4k4 2016-01-22 16:17:47

#url at this stage is not processed yet. This happens later in the image templates.

To get the url in the block template you can access the uri field in the image file entity instead:

{{ file_url(content.field_parallax_image.0['#item'].entity.uri.value) }}

BTW you didn't find this property in the dump output, because it is a computed value to make it easier to handle entity references.

@cheesetriple 2016-01-22 16:22:36

This just outputs the root URL of the site, I think this is to do with file_url(). If I try just {{ content.field_parallax_image.0.entity.uri.value }}, nothing is output.

@4k4 2016-01-22 16:26:23

I missed the ['#item'], I edit the answer

@Marshall Morrise 2019-03-07 22:28:55

Thanks, 4K4! This rescued me after a long, fruitless session of trial-and-error. Question is, in what documentation does one look to figure out this kind of thing?

Related Questions

Sponsored Content

1 Answered Questions

Prepend custom block body text

  • 2018-08-16 21:33:18
  • Kris Spencer
  • 355 View
  • 0 Score
  • 1 Answer
  • Tags:   8

1 Answered Questions

[SOLVED] How to get a taxonomy custom image field URL value

  • 2019-11-10 09:12:04
  • DrWebber
  • 115 View
  • 1 Score
  • 1 Answer
  • Tags:   8 taxonomy-terms

1 Answered Questions

[SOLVED] Render image field with custom image style in custom block template

  • 2019-06-26 13:55:37
  • Sarah C
  • 273 View
  • 0 Score
  • 1 Answer
  • Tags:   8 theming blocks

1 Answered Questions

[SOLVED] Programmatically update alt tag on image field

  • 2019-01-08 21:53:13
  • user1359
  • 1862 View
  • 2 Score
  • 1 Answer
  • Tags:   8 media

1 Answered Questions

[SOLVED] Render image or entity in a custom block!

2 Answered Questions

[SOLVED] How to print a CCK image field alt text in a node template?

1 Answered Questions

[SOLVED] Twig/variable support in Custom block HTML

2 Answered Questions

1 Answered Questions

[SOLVED] Basic Page - Associated Image Field

2 Answered Questions

[SOLVED] Leveraging field_get_items variable in a custom field template

  • 2013-06-25 15:11:47
  • Danny Englander
  • 1826 View
  • 1 Score
  • 2 Answer
  • Tags:   7 entities theming

Sponsored Content