Post Photo ABOVE Title in Blog – HOW?

Anybody???

I’m not sure you can do that without customizing WordPress, because the picture is part of the post. I’m guessing that you’d have to add another field for the picture, and then include the new field in your theme.

I found a way. Take a look at https://www.clipspringer.com

I use a code in my post title. For example the following:

<img src='https://www.clipspringer.com/images/printer2.jpg' width=530 border=0><br />Samsung Monochrome Laser Printer

Give it a try.

While Clipper’s idea will work, it can also lead to problems with your archives and search listings (in that the code will show up there and you’ll get the images on those pages whether you want them or not.)

You could always use Custom Fields to add the image, and then in your index.php file call the custom field, then the title, then the content.

Here’s an example:

1. Go to Write > Post > Custom Fields and type image into the Key field and in the Value field enter the URL to your image.
2. Add the following code to your index.php file (you’ll obviously need to customize some pieces to fit your theme):

<img src="<?php $key="image"; echo get_post_meta($post->ID, $key, true); ?>" />
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>

Another idea, if you don’t want to mess around with Custom Fields and all of your images are going to be the same height, would be to use CSS.

If the image is the first thing you place in the content of your post, give it a CSS class. So if your HTML was basically:

<h2>Post Title</h2>
<img class="imagemover" src="/myimage.jpg" />
<p>Here is the content of your post.</p>

You could have CSS that did something like:

h2 {padding-top:200px;}
.imagemover {margin-top:-250px;}

The padding-top on the h2 basically adds a large white space above your title, and the .imagemover class forces the images to move up the page. Adjust values as needed.

Clicknathan has this down! I’m gong to use some of these suggestions as well. Thanks so much.

Glad I could help, clipper!

clicknathan, now it seems I have broken images before my posts when I don’t use the “image” placeholder, so I think I need to add a condition before the code above. Any idea how to do that?

Thanks!

Clipper were U able to figure that problem out?

Here is a solution…

It’s not exactly a “Best Practice” solution but it gets the job done in 2 simple steps!

*********** Part 1 ******************

First start your loop:

`<?php $my_query = new WP_Query(‘showposts=1’);
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>`

Then call the excerpt wich you previously copied your photo into (in Edit Post>Advanced Options>Excerpt ) with the img tag (<img class=”” title=”” src=”https://www.yoursite.com/wp-content/uploads/2008/10/picture_name.jpg&#8221; alt=”” />):

“>
<?php the_excerpt_rss(); ?>

Then insert a div class and call it what ever you want (I called mine PhotoHack):

<div class=”photohack”>

Call your title:

<h1>” rel=”bookmark”>
<?php the_title(); ?>
</h1>

Now call your content:

<?php the_content(); ?>

Close your div class:

</div>

And close your loop:

<!–
<?php trackback_rdf(); ?>
–>
<?php endwhile;?>

*********** Part 2 ******************

Add your div class to your style sheet (CSS) with the following info:

.photohack img {
display: none;
}

Save and your done.

RECAP
Your loop should look like this:

<?php $my_query = new WP_Query(‘showposts=5’);
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>

“>
<?php the_excerpt_rss(); ?>

<div class=”photohack”>
<h1>” rel=”bookmark”>
<?php the_title(); ?>
</h1>

<?php the_content(); ?>
</div>
<!–
<?php trackback_rdf(); ?>
–>
<?php endwhile;?>

And your css like this:

.photohack img {
display: none;
}

I was! Thanks very much! You can see it at https://www.clipspringer.com