WordPress Magazine Themes » custom-fields http://www.wp-magazine.com Premium WordPress Magazine Themes from Solostream Thu, 01 Jul 2010 15:14:34 +0000 en hourly 1 http://wordpress.org/?v=3.0 How to Insert Post Thumbnails for Your Posts http://www.wp-magazine.com/2007/12/how-to-insert-post-thumbnails-for-your-posts/ http://www.wp-magazine.com/2007/12/how-to-insert-post-thumbnails-for-your-posts/#comments Sat, 01 Dec 2007 19:57:57 +0000 admin http://www.wp-magazine.com/2007/12/how-to-insert-post-thumbnails-for-your-posts/ def-thumbIf you look on the home page, archive pages and search results page of this site, you’ll notice that all the posts have a thumbnail image next to the post excerpt. By default, the theme will display the photo you see to the right as the post thumbnail. If you’d like to use a different default post thumbnail, just choose a photo in .gif format, cut it to 100px by 100px, name it def-thumb.gif and upload it to the theme’s images folder.

If you’d like to add your own post thumbnails for any or all of your posts, which I recommend, the process is quite simple.

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

Ideally, the post thumbnail image should be 100px by 100px. If it is a different size, I added a style element to the photo that will automatically convert it to 100×100. If that happens, however, it may negatively impact the image’s quality, so your should try to make your post thumbnails exactly 100px by 100px .

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 Thumbnail Image

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: post_thumbnail. 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.

As I said above, your thumbnail image will appear on each page that the post appears, except the single post page.

]]> http://www.wp-magazine.com/2007/12/how-to-insert-post-thumbnails-for-your-posts/feed/ 46