Migrating from D7 to D8, can someone explain how to theme a custom field in a content type?

Say I start with the "Basic page" content type and I add an image field, however I don't want this image to appear in the body of the text, I want it to span the entire page.

In Drupal 7 I would have gone into /sites/all/themes/mytheme/templates/page.tpl.php and added the following:

<?php if(isset($node->field_image_undernav) && count($node->field_image_undernav) > 0):?> 
    <?php $imagePath = file_create_url($node->field_image_undernav['und'][0]['uri']); ?>
    <img class="img-responsive" id="img-top" src="<?php print $imagePath;?>"/>
<?php endif; ?>

How do I do this in Drupal 8? I'm guessing it's something like /themes/mytheme/page.html.twig and adding:

{# Top Image #}
    {% if page.machine_name_of_field %}
       {% block machine_name_of_field %}
         {{ page.machine_name_of_field }}
    {% endblock %}
{% endif %}

This changes where I can render the image in the template, but includes unwanted fields (like title) and some DIV wrappers. I just want to locate the image URL.

If I do

{{ dump(page.machine_machine_name_of_field) }}

I get NULL. If I dump(page), I see the URL but concatenated as part of a string in ["#markup"]. Any way to extract just the image URL from this field so I can place it exactly where and how I want?

The official D8 theming documentation doesn't seem to have this info, and unofficial guides like John Hannah's is helpful but seems to stop after basic setup.

Any guidance on this specific issue or documentation to learn more is much appreciated.

  • Seems you're asking the very same thing as drupal.stackexchange.com/questions/190350/…, which was posted just a short while ago?
    – Berdir
    Feb 14, 2016 at 20:31
  • Similar goals but I did a dump node as well, it doesn't have the values I want: 'object(Drupal\node\Entity\Node)#331 (24) { ["in_preview"]=> NULL ["values":protected]=> array(20) { ["vid"]=> array(1) { ["x-default"]=> string(1) "2" } ["langcode"]=> array(1) { ["x-default"]=> string(2) "en" } ["revision_timestamp"]=> array(1) { ["x-default"]=> string(10) "1454210500" } ["revision_uid"]=> array(1) { ["x-default"]=> string(1) "1" } ["revision_log"]=> array(1) { ["x-default"]=> NULL } ["nid"]=> array(1) { ["x-default"]=> string(1) "2" } ["type"]=> array(1) { ["x-default"]=> string(4) ...' Feb 15, 2016 at 2:02
  • Yes it does. Just do what the other answer suggested. Don't use dump() with entities, it doesn't work for complex structures. If anything, then use dump(node.toArray()). See also wizzlern.nl/drupal/drupal-8-entity-cheat-sheet
    – Berdir
    Feb 15, 2016 at 16:36

1 Answer 1


Berdir set me in the right direction with this question but the actual specifics of what I needed are buried in the replies to this question on rendering images from a node:

in /themes/mytheme/page.html.twig add

{{ file_url(node.machine_name_of_field.entity.uri.value) }}

That renders just the image URL so I can place the image anywhere.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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