Adding an Image ABOVE the Post Title

I do this on my site tugbucket. I have a defined height for my post images so it works for me:

.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;
}

i make sure the .post is positioned relative. i then pad the H2 250px on the top. then absolutely position the image with a class “header” to top: 0px; Since all my header images ion my posts are 240px tall this works for me.

if you wanted to do this category specific you could make your post div look like:

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

then:

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

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

Another way:

Use catch_that_image(). Add the code to your functions.php.

Then in index.php and single.php, replace:

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<div class="entry">
	<?php the_content(); ?>
</div>

with:

<?php
$topimg = catch_that_image(); // Find first image of Post
if($topimg) echo('<img src="'.$topimg.'">');
?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php
$content = get_the_content('Read more');
$content = preg_replace('/<img[^>]+./','', $content, 1); // Remove first image of Post
$content = apply_filters('the_content', $content);
echo $content;
?>

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!

This is a follow with the code I used to achieve the link. It’s not the most elegant solution (because it resizes the wordpress “full size” image for output on the page rather than using the “meduim” or “large” wordpress version) – but works, I’m sharing in case anyone else is looking for this solution.

For the code to display the image in the post I’m using this:

*Note that I’m also using Lightbox for the link to the large image, which requires you have Lightbox or a plugin that uses it installed, but you could modify the code to open the image in a new window or something like that.

<?php
$topimg = catch_that_image(); // Find first image of Post
if($topimg) echo('<a href="'.$topimg.'" rel="lightbox"><img src="'.$topimg.'" class="alignright" height="325" width="250"></a>');
?>

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)

Hey! Sorry to get to this party so late. ??

I have a few question for tugbucket’s method.

The first question concerns this code:

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

What should actually go in place of “cant_rember_what_it_says?” Additionally, where does that code get placed? Singlepost.php?

Also, in the code:

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

What should replace the .YOUR_CATEGORY and also where is the images called from?

Thanks!

Steph.

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.

Thanks for replying to an old thread! ??

Here’s what I’m after. I’m trying to put a distinct image for each post in a category above the post title.

Say I have 10 posts in one category and each one needs the same image above their titles.

Then I have another 10 posts in another category and they, too, need a distinct image dedicated to that category above each post title.

Many different categories – each with its own distinct image that appears above the title of every post assigned to that category.

I don’t need a distinct ‘header,’ but more like a distinct banner image above each post relevant to the post’s category.

In your reply, I just don’t see where the image is being called from. Where do I insert the URL of where each image is?

Thanks.

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(https://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 */
}

Hey – I see how this works but my single.php file appears to be radically different. Not knowing PHP very well, I just can’t make it work. I’ve e-mailed you a reply. Thanks.

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.

kriskoster,

actually that seems like a great way to go about it. I haven’t done much if anything with custom fields though. Just checking if the field exists is an improvement.

in her case she knew that there would be an image so we went with something like:

<div class="clearfix" id="post-main-<?php the_ID(); ?>" style="background: url(<?php bloginfo('template_url'); ?>/headers/<?php $category = get_the_category(); $fullcat = $category[0]->cat_name; $fullcat = str_replace(" ", "_", $fullcat); $fullcat = strtolower($fullcat); echo $fullcat; ?>.jpg) top left no-repeat; padding-top: 90px;">

So she could have say 10 categories. Each would have their own header image. If you have a category named eg: “Cats and Dogs” WP would return just that. SO we replaced the spaces with underscores and lower cased the name so it would then print out “cats_and_dogs” and the image for said category would be “cats_and_dogs.jpg”.

More than one way to skin a cat ??

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