I have a <div> containing a node (a Basic Page), which has a title, body and a header image. I do not want to display the header image inside that div, so I removed it from the block layout. I would like the header image to be in the html before the <div>, that is, outside of the div into which the given content type is outputted.

Can I somehow programmatically instruct my theme to display the header image of my Basic Page? Or is there a better way how to do it?

Example: I need to change this:

<div>
<img src="headerimage.jpg">
<h1>Title</h1>
<p>body</b>
</div>

to this:

<img src="headerimage.jpg">
<div>
<h1>Title</h1>
<p>body</b>
</div>

I have a <div> containing a node (a Basic Page), which has a title, body and a header image. I do not want to display the header image inside that div, so I removed it from the block layout. I would like the header image to be in the html before the <div>, that is, outside of the div into which the given content type is outputted (so I cannot solve this via block layout, since the image field is to be outputted outside of the content block).

Can I somehow programmatically instruct my theme to display the header image of my Basic Page? Or is there a better way how to do it?

Example: I need to change this:

<div>
<img src="headerimage.jpg">
<h1>Title</h1>
<p>body</b>
</div>

to this:

<img src="headerimage.jpg">
<div>
<h1>Title</h1>
<p>body</b>
</div>