How to Insert Photos for Your Featured Articles
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.
Hi Doug:
It's a bit tricky, but I think this will work.
1. You probably added this to the About section on ...
Hi Michael,
how can I get the theme to use the new Identicons instead of the gravatar picture, which it currently ...
Hi Michael, Thanks for a great theme. Its fantastic and yor mods are always explained perfectly.
I've set up including adding ...
Hi Michael,
Thank you for the great instructions. They worked perfectly!
Comment by Scott Noon on 24 December 2007:
Is there a way to add a feature-like photo to the About page?
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!
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!
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?
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.
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
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?
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.
Comment by Nick on 20 March 2008:
Thanks Mike.. works great!
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
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 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 ~)
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
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="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="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="bookmark" title="Permanent Link to <?php the_title(); ?>">Read More</a></div>
<div style="clear:both;"></div>
</div>
<?php endwhile; ?>
</div>
Comment by Brooks on 23 April 2008:
Great tutorial. Thanks.
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!
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