I have two content types, the first is Homepage and the second is SLider. The Slider content type has multiple fields like title, ink, and image. In the homepage content type, I have an entity reference field referring to the slider content type with multiple selections. I've created a template in my custom theme as node--home-page.html and want to get the sliders fields values, All is okay with me except the image. I cannot get the image URL. My code:-

{% for slide in node.field_hoeme_slideshows %}
        {{ kint(slide.entity.field_home_slide_cta.uri) }} {# This is working #}
        {{ kint(slide.entity.title.value) }} {# This is working #}
        {{ kint(slide.entity.field_home_slide_snippet.value) }} {# This is working #}
        {{ kint(slide.entity.field_home_slide_image) }} {# ****** This is not working *****#}
{% endfor %}
  • Do you really need the raw url value? {{ slide.entity.field_home_slide_image }} should print the entire <img> tag, including responsive styles, if configured. – Hudri Oct 11 '17 at 12:57
  • Thanks, but I tried it and got this error Exception: Object of type Drupal\file\Plugin\Field\FieldType\FileFieldItemList cannot be printed. in Drupal\Core\Template\TwigExtension->escapeFilter() (line 465 of core\lib\Drupal\Core\Template\TwigExtension.php). – Mohamed Osama Gbril Oct 11 '17 at 16:38

As an alternative configuration using Field Collections. Instead of using two content types and a field reference...

{% for item in content.field_slide %}
<a href="{{ item.getFieldCollectionItem().field_link.0.url }}">
    <figure class="my-class {% if loop.first %}{{ 'first-class' }}{% endif %}  {% if loop.last %}{{ 'last-class' }}{% endif %}">

        <div class="my-image-wrapper">

            <img src="{{ file_url(item.getFieldCollectionItem().field_slide_image.0.entity.uri.0.value) }}" alt="{{ item.getFieldCollectionItem().field_slide_image.0.alt }}" title="{{ item.getFieldCollectionItem().field_slide_image.0.title }}" />


        <h2>{{ item.getFieldCollectionItem().field_h2.0.value }}</h2>
        <figcaption>{{ item.getFieldCollectionItem().field_p.0.value }}</figcaption>

{% endfor %}

This is off the top of my head so double check the code.

Then you just create a field collection field on the home page content type called slide. Go to field collections, select "slide" and add the fields: link, slide_image, h2, and p.

  • Field Collection module not stable for Drupal 8. So I'm asking if it's working good with you and What about Paragraph module – Mohamed Osama Gbril Oct 12 '17 at 4:45
{{ file_url(content.field_image['#items'].entity.uri.value }}

{{ file_url(content.field_image['#items'].entity.uri.value | image_style('1440px')) }}

Im not sure of your current setup.... but you might need to try something like "item in node.field_home_slideshows['#items']"

(note: you spelled home, hoeme)

inside do...


This is twig valid:

{% for item in content.field_image['#items'] %}
 {{ file_url(item.entity.uri.value }},
{% endfor %}
  • To add the image_style filter you will need to install the module "twig tweak".... and ensure that you select the same image style in the display settings of the field on the content type – Preston Oct 11 '17 at 20:59
  • Sorry, I am printing out "content.field...." but it may be "slide.field...", or other, depending on where you are accessing your field. Using {{ dump(_context | keys) }} will show you everything available in your current template – Preston Oct 11 '17 at 21:04
  • If you're going to down vote please tell us why. As far as I know looks like he needs an image URL. What you need to do is {{ dump() }} and search for the appropriate fields uri key. Then you convert that uri key value to a usable URL using file_url() – Preston Oct 11 '17 at 21:36

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