Theming custom fields

Question

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.

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.