How to Insert Photos for Your Featured Articles

December 1st, 2007 • Related • Filed Under

If you look on the home page of this site, you’ll notice that most of the Featured Articles display a photo next to the post excerpt. If you’d like to add photos to your own featured articles in the same manner, it’s pretty simple to do it.

Step 1 – Select a Photo and Cut it to the Proper Size

Your feature article photos can be almost any width you like really. However, the featured article box is only 650px wide, so you may want to limit your photos to less than half that width to allow room for the post excerpt.

The photo’s height, however, needs to be more specific. Ideally, your photo’s height should be exactly 220px. If it does happen to be taller or shorter, I added a style element to the photo that will automatically convert the height to 220px. If that happens, however, it may negatively impact the photo’s quality, so try to make it exactly 220px high.

Step 2 – Upload Your Photo

You can either upload your photo via FTP or via the standard Wordpress image upload function on the Write Post page; just below your Publish button. Once your photo is uploaded, you’ll need the file path for the photo’s location.

For example, if you upload your photo to a subdirectory (of your Wordpress site) named “images” … the file path would be something like: http://www.mysite.com/images/filename.jpg.

If you upload your photo via the Write Post image uploader, the file path will be something like: http://www.mysite.com/wp-content/uploads/2007/12/filename.jpg. To get the actual file path, just go ahead and send the image to your post editor. When you do that, Wordpress will produce an image tag that looks something like this: <img src='http://mysite.com/wp-content/uploads/2007/11/filename.jpg' alt='feature1.gif' />

In this case, the only part of that tag you need is: http://mysite.com/wp-content/uploads/2007/11/filename.jpg

Once you have the image path, just be sure to delete the image tag from your post editor box.

Step 3 – Create a Custom Field for Your Photo

If you scroll to the bottom of your Write Post page, you’ll see an area near the bottom called “Custom Fields.” (You may have to click on the white + sign to the far right to expand the custom fields area).

In the field marked “Key,” you’ll need to enter: home_feature_photo. In the field marked “Value,” you’ll need to enter the file path for your image. Then just click the “Add Custom Field” button. Finally, continue with your post, and when you’re ready, click the Publish button.

Your image will appear in 2 places. First, it will appear in the Featured Articles box (for that article) on your home page. And it will also appear on the single post page for that article; aligned to the right of the content. See this post for an example.

If you choose not to enter a photo for one or more of your featured articles, the theme will function properly without it.

Popularity: 16% [?]

There Are 23 Responses So Far. »

  1. Comment by Scott Noon on 24 December 2007:

    Is there a way to add a feature-like photo to the About page?

  2. Comment by Sean Hill on 1 February 2008:

    I’ve managed to get the feature photos in the glider, however I would like to know if its possible for the feature photo to not show in the actual post. (Similar to post thumnails)

    Hope this makes sense!

  3. Comment by Sean Hill on 1 February 2008:

    Not to worry, by removing

    ID, home_feature_photo)) { ?><a href=”" rel=”bookmark” title=”Permanent Link to “><img src=”ID, home_feature_photo, true); ?>” class=”feature-photo” alt=”feature photo” />

    from the single.php file seems to have done the trick!

  4. Comment by Mark @ TheLocoMono on 4 February 2008:

    I made mine 220px high but it still came out distorted a little bit.

    Does this have to be in GIF or JPEG to meet your specs?

    Is it 220px height as well as 220px wide cuz the one I used was 160px wide X 220px high?

  5. Comment by Michael Pollock on 4 February 2008:

    >>>>> I’ve managed to get the feature photos in the glider, however I would like to know if its possible for the feature photo to not show in the actual post. (Similar to post thumnails)

    Sure. Follow these steps:

    1. On your WP control panel, click Presentation, then Theme Editor.
    2. On the right side of the page, click on the link that says: Single Post
    3. Scroll down and find this block of code, and delete it:
    <?php if (get_post_meta($post->ID, home_feature_photo)) { ?><a href="<?php the_permalink() ? rel="nofollow">" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, home_feature_photo, true); ?>" class="feature-photo" alt="feature photo" /></a><?php } ?>

    4. Update File.

  6. Comment by nick on 7 March 2008:

    Hey guys.. and gals..

    Is there a way to take out the “Featured” of the top sections where the categories are listed horizontally?

    Thanks in advance,
    Nick

  7. Comment by RS on 13 March 2008:

    I dont seem to have the field to choose featured pictures. Is is because I used homepage alternative 3 instead of the first one?

  8. Comment by Michael Pollock on 13 March 2008:

    >>>>> Is there a way to take out the “Featured” of the top sections where the categories are listed horizontally?

    Yes, Nick. That can be done.

    1. Open your Header template, scroll to the bottom and find this block of code:

    <div id="nav" class="clearfix">
  <ul class="clearfix">
    <?php wp_list_categories('hierarchical=1&title_li='); ?>
  </ul>
</div>

    Change it to this:

    <div id="nav" class="clearfix">
  <ul class="clearfix">
    <?php wp_list_categories('exclude=X&hierarchical=1&title_li='); ?>
  </ul>
</div>

    X = the Category ID of your Featured category.

    Then Update file.

    To find the category ID …

    There was a time when the category IDs were listed right next to the category. For some reason the WP development team changed that. So now, here’s how to find the category ID.

    In your WP control panel, click Manage >> Categories.

    Place your cursor over the category link and look in the bottom left corner of your browser. you should see a link appear in the browser status bar (If you don’t use the status bar, just click on the category, and the link will appear in the browser Address bar at the top).

    it will look like this:
    http://mysite.com/wp-admin/categories.php?action=edit&cat_ID=22

    The ID in the above example is 22.

  9. Comment by Nick on 20 March 2008:

    Thanks Mike.. works great!

  10. Comment by Alex on 31 March 2008:

    Hi Michael, I am having trouble with the feature box. The text in the feature box isn’t being cut properly on some of the features and is forcing the author, date and continued link off the bottom.

    Thanks

  11. Comment by Brian on 17 April 2008:

    How can I remove the FEATURED articles section from my right columns – I’ve taken out of the top bar, but not the right section. Have a look at http://www.GOontheROAD.com to see what I’m talking about.

    Also is there a picture gallery that works with this THEME??? We were using LIGHTBOX and very happy with it then switched to this theme and LOOKING for a picture gallery that works here.

    Thanks,

    Brian @ GO on the ROAD ~)

  12. Comment by Greener Pastures on 19 April 2008:

    Hi,

    Is there a way to get the feature photo to show for the about page like it does for the featured posts?

    Thanks,
    Lisa

  13. Comment by Michael Pollock on 21 April 2008:

    >>>>> Is there a way to get the feature photo to show for the about page like it does for the featured posts?

    Hi Lisa:

    Try this:

    1. Open your Feature Articles template and find this block of code:

    <div class="section" id="about">
        <div class="feature-entry">
                <h2>About this Site</h2>
<?php $my_query = new WP_Query('pagename=about'); while ($my_query->have_posts()) : $my_query->the_post(); ?>
                <?php the_excerpt(); ?>
                <div><a class="more-link" href="<?php the_permalink() ? rel="nofollow">" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Read More</a></div>
                <div style="clear:both;"></div>
<?php endwhile; ?>
        </div>
</div>

    2. Change it to this:

    <div class="section" id="about">
<?php $my_query = new WP_Query('pagename=about'); while ($my_query->have_posts()) : $my_query->the_post(); ?>
<?php if (get_post_meta($post->ID, home_feature_photo)) { ?>
        <a href="<?php the_permalink() ? rel="nofollow">" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, home_feature_photo, true); ?>" class="feature-photo" alt="feature photo" /></a>
<?php } ?>
        <div class="feature-entry">
                <h2>About this Site</h2>
                <?php the_excerpt(); ?>
                <div><a class="more-link" href="<?php the_permalink() ? rel="nofollow">" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Read More</a></div>
                <div style="clear:both;"></div>
        </div>
<?php endwhile; ?>
</div>

  14. Comment by Brooks on 23 April 2008:

    Great tutorial. Thanks.

  15. Comment by Mark on 4 June 2008:

    You mention this in the install introduction but I can’t seem to find the actual instructions. Is there a way to increase the number of feature articles from 5 to say a greater number? (is there a maximum?).

    Thanks much!

  16. Comment by Michael Pollock on 4 June 2008:

    >>>>> You mention this in the install introduction but I can’t seem to find the actual instructions. Is there a way to increase the number of feature articles from 5 to say a greater number? (is there a maximum?).

    Hi Mark:

    To increase the number of Feature Articles, open your template named “Feature Articles on Home Page,” and find this block of code:

    <?php $count = 1 ?>
<?php $my_query = new WP_Query('category_name=featured&showposts=5'); while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate[$post->ID] = $post->ID; ?>

    Then simply change the “showposts=5″ part of it. There is no maximum really, but if you have too many the numbers along the bottom will spill over to another line, and I would not suggest that.

    Michael

  17. Comment by Brandon Roark on 26 September 2008:

    I can’t for the life of me get my photos to appear in the glider. I have resized them to the recommended size and did the custom feature that you suggested…but still no image??

    I know this is most likely a vary basic fix, but alas im at a loss.

    please help

  18. Comment by SaijoGeorge on 2 October 2008:

    Is it possible for the “About this Site” in the featured article section to have an Image like the ones for Featured Posts ?

  19. Comment by SaijoGeorge on 2 October 2008:

    got it : http://www.wp-magazine.com/2007/12/how-to-insert-photos-for-your-featured-articles/#comment-1501

  20. Comment by Alistair Barnett on 11 October 2008:

    Hi everyone,

    If you are looking for support, please visit our forum at http://www.solostream.com/forum/ for immediate answers to your support questions. Otherwise, there will be a delay in answering your support-related comment if left here.

    If this doesn’t apply to you, feel free to comment!

    Alistair

  21. Comment by deborah bonello on 23 October 2008:

    Hey there. Re this:

    Comment by Michael Pollock on 4 June 2008:

    >>>>> You mention this in the install introduction but I can’t seem to find the actual instructions. Is there a way to increase the number of feature articles from 5 to say a greater number? (is there a maximum?).

    Hi Mark:

    To increase the number of Feature Articles, open your template named “Feature Articles on Home Page,” and find this block of code:

    have_posts()) : $my_query->the_post(); $do_not_duplicate[$post->ID] = $post->ID; ?>

    Then simply change the “showposts=5″ part of it. There is no maximum really, but if you have too many the numbers along the bottom will spill over to another line, and I would not suggest that.

    Michael

    …I’ve done all of thoes things, but I can still only see 5 featured posts on my header………..where am I going wrong?

  22. Comment by Alex on 11 November 2008:

    Sorry not quite sure how I missed this post on how to have a photo on the about us page.

  23. Comment by alex on 13 November 2008:

    Hi Michael i’ve realised after amending the code on the “Feature Articles template” so that an image is displayed on the homepage when the glider is on “about this site”. That the actual about us page is no longer showing the footer, it is however visible in the code.

    Also what would i need to change on the “single page” template page to call this image in the same as on post pages?

    Thanks in advance

Post a Response

Please do not post a comment for support here. We provide all support through our forum at www.solostream.com/forum. This is the best and fastest way for you to get the answers to your questions. Plus signup is free.