How do you add an image to the WordPress image.php main page - aka the loop? Its actually very simple. You have two choices available to you — when you write a page or post add an entry in the custom fields and then call that in your code. Or add the image to the media library and then call it via programming.

I will take some time to go over both options and their pros and cons.

Custom Fields are the most flexible - they let you specify as many images as you need, including post image, post thumbnail and an image for carousel or featured post sections of your blog or website. And every CMS content management system type site running WordPress wants flexibility.

The downside? You have to specify all these files each time you make a new page or post. And you have to watch the various image sizes used in the themes. If you decide to change the size of the images in the theme CSS you have have a stretched or shrunk image and not the look you hoped for.  This can be an issue tomorrow if you decide to change themes and you have invested a lot of time and effort in a set of sizes for images.

Highest flexibility is a Plus and Highest potential difficulty in the future is a con as is most effort to publish a post or page

Now we can use the included media gallery in WordPress to upload an image and attached it to a post or page. It just shows up where we want it and we can use the built in UI to configure its appearance and word wrap effects. How to we get this image out of the post and include your sites front page? Easy - we call it with some simple code.

Part II will give you all of the code in easy to use format for you to drag and drop where you want it. In part III we will talk about using CSS to customize images in WordPress for thumbnails, categories, posts, tags, archieves and the loop.

Ease of publishing and flexibility to adept to your design today and tomorrow is a plus for this option. The limit is the effect on your images. You will need to pick an aspect ratio and stick with it. That means if your posts headline image is going to be 600×300 then as we scale down we find that we have 300×150 images on the front page and image thumbnails that scale down to 150×75 - they all carry the same aspect ratio. If you want your image thumbnails to be 150×150, then your initial images will have to be 600×600. Or do they? In Part IV we will cover some advanced CSS options to let your site crop and trim the pictures on the fly. This has the downside of adding to the processing time on each and every post.

Oh well lets add that to the list of benefits - a size that calls a single file that is already formatted loads faster then a site that calls an image and the server has to process it. If the clients browser does the resizing, it is no difference in server times, but can be a minimal difference on the client side. We are no longer in the days of dial up where we are concerned with getting every bit of space in a file. If that were the case we would want to pregenerate our 75×75 thumbnails in advance.

How to I scale down a rectange to a square image? With php and css of course, but thats in Part IV

Why is this Part I? Because I am busy, tired, and swampped with work. And because I was evaluating a few themes last night and was frustrated by the theme designers who juist outright failed to use one style or another and stick with it.