WordPress.org

Ready to get started?Download WordPress

Forums

Add photo before Title? (7 posts)

  1. EllisJordanBojar
    Member
    Posted 7 years ago #

    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!

  2. David Yeiser
    Member
    Posted 7 years ago #

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

    WordPress How-to: Custom Fields

  3. marktastic
    Member
    Posted 7 years ago #

    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.

  4. UnSeCuReD
    Member
    Posted 7 years ago #

    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.

  5. marktastic
    Member
    Posted 7 years ago #

    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.

  6. lebonchat
    Member
    Posted 6 years ago #

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

  7. lebonchat
    Member
    Posted 6 years ago #

    bump

Topic Closed

This topic has been closed to new replies.

About this Topic