Add photo before Title?

  • I’m interested in building a photoblog template where a picture can appear before the title of a blog entry.

    I understand that involves adding a new post tag to the loop, and I assume it requires a new database field as well, but how exactly that’s accomplished isn’t made clear from what I understand in the codex.

    Could anyone either give an overview of how I’d go about putting this into practice, or point me to the section of documentation that might provide an answer?

    Thanks in advance!

Viewing 6 replies - 1 through 6 (of 6 total)

  • You could use custom fields, this post explains that well:

    WordPress How-to: Custom Fields

    I posted this in another topic, but I’d thought I post it here too. Took me a short while to come up with but maybe it’ll help you.

    To get an image above the title using custom fields and no plugins do the following:

    1- Make a post in wordpress

    2- Under custom fields create a key titled “img_post_header” or something similar

    3- For the value, insert the location of the image

    4- If you want more image atributes (such as alt text), make more keys and remember what they are called

    5- Save/publish that stuff

    6- Open /wp-content/themes/[themename]/index.php, after the <div class=”post”> but before the <h2> title (should be around line 9), add this line:
    <img src=”<?php echo get_post_meta($post->ID, ‘img_post_header’, true);?>” width=”600″ height=”200″ />

    Of course edit width and height to your specifications.

    7- For a custom alt attribute, edit the line to add something like this (assuming img_post_header_alt is the key you used in #4):
    alt=”<?php echo get_post_meta($post->ID, ‘img_post_header_alt’, true);?>”

    If say you wanted to make the post title the alt text do this:
    alt=”<?php the_title(); ?>” inside the img tag

    You should be all good after this.

    Thanks for help but what if post have no pictures? Then wee see error that image not found. How we can avoid that?

    Some kind of check if post have/not have images.

    Good question. I think the most obvious answer is to write an IF statement to check if the img_post_header key exists, and if so then print out the img tag.

    I’m to lazy/tired to write out any code atm, but if you need it just reply.

    Hello,

    I’m struggling to get this to work…Can someone help explain further?

    I’m not sure if I’m putting in the wrong image location, ie. do I need to use https:// for the location after the custom tag

    or if I need to change something on my style.css where the postmetadeta section says clear: left

    AND/OR if I need to alter my singlepost.php in addition to the index.php with the new code listed in step six…

    6- Open /wp-content/themes/[themename]/index.php, after the <div class=”post”> but before the <h2> title (should be around line 9), add this line:
    <img src=”<?php echo get_post_meta($post->ID, ‘img_post_header’, true);?>” width=”600″ height=”200″ />

    Can someone maybe walk me through this a little more? All help is truly appreciated!!!

    Thank you,

    Kat

    bump

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Add photo before Title?’ is closed to new replies.