kriskoster

Hmm. I think this is possibly easiest done by using custom fields to add extra metadata to a post or page because then we can reference the meta code again and again whenever we like.

Before I start, I am no coding expert – I only just started to learn php. I needed a solution for this too. Because by chance I am using a theme that already uses custom fields to reference images and videos, I thought why not implement this ‘image before my headline’ problem with this feature too?

Perhaps someone brighter than me at php would beautify this code a little better for others, but it worked brilliant for me.

Apologies for ‘dummifying’ it for simplicity… But because I’m new to WordPress, I’m often goggle-eyed at other folk’s instructions!

1a. From the wordpress dashboard, select ‘Pages’
1b. Either edit an existing page, or add a new one.

2a. Then, in the ‘Custom Fields’ section you need to ‘Add New Custom Field’ (Click highlighted text ‘Add New’)
2b. In the ‘Name’ field, put something like: imgaboveheadline
2c. In the ‘Value’ field, place the location of your sized image, for example: https://www.mydomain.com/images/myimage.jpg
2d. Click on Add Custom Field button.
-Don’t forget to upload your image to that location!

Now, everytime you want to add an image to the top of a post or page above the headline, all you need to do is select that custom field with the image location as above.
However, this first time we need to set this reference up in the code as follows:

3. Under ‘Appearances’ on the dashboard, we now select ‘Editor’

4. I went to the Page Template, ‘page.php’ as I needed this to affect my pages only, but the same applies to posts.
5. Near the top of this template I wrote the following code:

<?php $imgaboveheadline = get_post_meta($post->ID, 'imgaboveheadline', $single = true); ?>

6. Then further down where the div id=”container” just before the post-title, I added the following:

<?php
        if($imgaboveheadline !== '') { ?>
	  <img src="<?php echo $imgaboveheadline; ?>" style="margin: 0px 0px 20px 0px; border: none;" height="195" width="590" alt="Top Image" />
			<?php } else { echo ''; } ?>

Basically, it’s checking to see if you have put a value in for imgaboveheadline in the custom fields for that page/post. If you have, it places the image from VALUE there with a little space underneath before your headline title. If you didn’t use the custom field, it reproduces nothing.

Works on Firefox and Explorer 8. Not checked it anywhere else, but I see no reason why it wouldn’t work.

You can see the result of this code where I implemented it here :
Webpage example of above code implemented.