Adding an Image ABOVE the Post Title

Tugbucket. Thank you. That’s a very beautiful way of solving this problem!

Hi, this is very helpful, but I would additionally like to preserve the LINK attached to the first image, which in my case is for every post, is linked to the full size version of that image. Any suggestion on how to do this? Thanks!

Hey
regarding

tugbucket’s great idea,

Instead of using absolute positioning and relative etc
you can just use

.post h3 {
	margin-top:300px;
}

.post img.your-class {
	margin-top:-400px;
				}

(its all in the “-” margin.
(number’s depend on image size)

Steph,

Looking at teh “default” theme’s “single.php” you will find this in the loop:

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

In my example you would change that to:

<div id="post-<?php the_ID(); ?>" class="post <?php the_category(); ?>">

Now if for example your post was in the category “Lions”, the rendered out put of that line would resemble:

<div id="post-389" class="post Lions">

So now you can target just the header images in the category “Lions” like so:

.post {
overflow:visible;
position:relative;
}
.Lions h2 {
font-size:1.5em;
margin:0;
padding:250px 0 0;
}
.Lions img.header {
border:1px solid #FFEFB4;
left:0;
padding:2px;
position:absolute;
top:0;
}

Likewise if you had several categories you wanted to do this for, you could chain the CSS like:

.post {
overflow:visible;
position:relative;
}
.Lions h2, .Tigers h2, .Bears h2 {
font-size:1.5em;
margin:0;
padding:250px 0 0;
}
.Lions img.header, .Tigers img.header, .Bears img.header {
border:1px solid #FFEFB4;
left:0;
padding:2px;
position:absolute;
top:0;
}

Things to remember:

CSS is case sensitive, so “Lions” is not the same as “lions”. So if the category name is capitalized when outputted by the PHP, then it needs to be capitalized in the CSS as well.

This CSS only targets the image with a class of “header”. So, you must remember to give the appropriate image that class.

This approach is only needed if you want to use this method on posts specific to a category. If you want to do this for all posts, you could just use:

.post {
overflow:visible;
position:relative;
}
.post h2 {
font-size:1.5em;
margin:0;
padding:250px 0 0;
}
.post img.header {
border:1px solid #FFEFB4;
left:0;
padding:2px;
position:absolute;
top:0;
}

No extra PHP involved as WP adds the class “post” by default.

Steph,
That’s a more detailed description of your needs. Let’s try this.

Using the default theme, in the single PHP you have for the loop (I removed some unneeded code):

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
		<div class="entry">
			<?php the_content(); ?>
		</div>
    </div>
<?php endwhile; else: ?>
<?php endif; ?>

So what we can do is this:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div id="post-<?php the_ID(); ?>" class="post" style="background: url(<?php bloginfo('template_url'); ?>/headers/<?php the_category(); ?>.jpg) top left no-repeat;">
		<h2><?php the_title(); ?></h2>
		<div class="entry">
			<?php the_content(); ?>
		</div>
    </div>
<?php endwhile; else: ?>
<?php endif; ?>

Notice the path is looking for a folder named “headers”. This doesn’t exist by default so you will to create this folder.

So when rendered, assuming a sample category of “Cats” it should look something like:

<div id="post-267" class="post" style="background: url(http://www.yourSite.com/wp-content/themes/yourTheme/headers/cats.jpg) top left no-repeat;">

So you just need to make a header image (or banner if you prefer that term) for each category (make sure they are all the same format ie. jpg, gif, etc) and upload them to the “headers” folder.

We will assume all these headers are the same height.

So in your CSS you can now just put:

.post {
	padding-top: 200px; /* <- just a random height for now */
}

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: http://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.

Hey everyone,
I have to dig this topic out again…
I am currently looking for a way to insert images before the post headline (ho ho, sounds familiar!)

I tried to figure out the techniques explained above (I don’t know too much about php) and as far as I understood, there are mainly two ways:

1) CSS: The image (+ captions) float on top, the post header is pushed down south via “margin:…”

Drawback: The image always has to be of the same height in order to avoid ugly overlay effects or unwanted spacing.

2) PHP: The Posts first image is “cut out” and placed above the headline, one can even control the behaviour for each post via a custom field.

Drawback: What is placed is only the image, the captions, links and the like are lost with this method.

Thank you!
Felix
Is there a way to (optionally) place the first image above the headline, preserving its link, caption and class that works for different image heights? Or any great misunderstanding from my side?

Thank you!

Felix