A Layout for Images
A number of readers asked if I could explain how I arranged the images for the JPIX carnival.
Step one: Gather the images
When there was an image that I wanted to use for JPIX (many of the posts, even if submitted, had multiple photos), I right-clicked on the image and saved it to my hard drive. I tried to name the jpg (the common file format for a photo) by both something in the photo and something in blog’s name.
For example, I named the photo at right lastrose_id.jpg, with the lastrose part being a reminder that post was named “Last Rose” and the id part as a reminder that it is Ilana-Davita’s photo.
After saving a bunch of photos in this way to my hard drive, I had quite a collection, but in some cases I still had to hunt when I got up to the part where I linked the photo online, because some blogs had lots and lots of photos in one post. So in those cases one also might want a reminder of the placement of the photo in the post (middle, 6th, or bottom might be examples to add to the name of the file).
Step Two: Sizing Those Images
So how big to make each of those images? At first I thought to make each one 150px high. After uploading about twenty at 150px high (this was a mistake, I should have just done three and tested those), I decided I preferred 115px high. You will see on the carnival that most are this height (to see the height of a photo, right-click and select Properties), but some were other heights.
In order to resize a photo, you open a photo editing software package and change the height size to 115px. The software should proportionally scale down the width for you.
Step Three, easy: Arranging the Photos
First, I’m going to tell you an easy way. Just upload each photo to your post, line up three on a line, and link each photo to the original post. It might look nice to put a space between each photo. I often do this in code by typing: Here’s an example:
Step Three, complicated: Arranging the Photos with Blog Links
Since I wanted the blog to have the blog links directly under each photo, I used table tags. I will discuss table tags in another post, next week.
Ilana-Davita says
Thanks for this extremely useful post. Especially as I was a bit bold and accepted to do JPIX in February.
Can I do step 2 with iZoom?
leoraw says
I don't know anything about iZoom, but I'm sure you can, as this is an available feature in all photo editing software that I have seen. It is basically scaling your image down by setting the height you like and letting the software scale down the width proportionally.
Glad you are doing JPIX in February! I'll be happy to help you out in the background (meaning, email me questions if needed).
Paz says
Thanks for the tutorial.
Paz
Baila says
You are my computer goddess.
Shavua Tov.
Baila says
Oh, and I will never sign up for JPix. :)
leoraw says
Paz, hope you found something useful here.
Baila, just keep taking great photos and submitting them to JPIX. We all have our specialties.
Ilana-Davita says
leora, thanks for the offer. I'm almost sure that, at one point, I'll need your help.
ck says
Uh... maybe I'm dense, but doesn't WordPress now automate all of this? You can have WP resize your images into thumbnails and even create a gallery for you. Am I missing something here?
leoraw says
ck, I've tried the WP image gallery, but one can't edit it. It puts in extra clicks that I don't like. The way I did JPIX is not "the way" but one way. There's a third-party tool that works with Flickr that I've seen a lot of photo bloggers use that creates beautiful collages. That's another one to try. For another post.
ck says
That's fair Leora. But, you can set up wordpress to at least create thumbnails for you in whatever size you wish. That ought to save some labor, no?
leoraw says
Yes, but I never upload images at full size anyway. I'm always scaling them down to the largest size I use. If you always upload large images, especially for a page with 50 images, your page will take a while to load.
Also, the thumbnail method does not necessarily give you the size you want. I did use the thumbnail method for some of the pics on JPIX(because I originally uploaded 20 at 150px), and they came out to 112px, instead of 115px. Subtle difference, but not exactly my first choice.
ck says
I hate to be a nudnik but... you upload the large images only to allow WP to resize them. WP (the latest versions) actually generates a smaller thumbnail. You can delete the original larger image afterwards. The point is that this is a great alternative for those without Photoshop - not that there's anything at all wrong with any of your advice!
leoraw says
Thanks ck, I didn't know you could delete the original after WP resizes it. Though I would probably forget. I don't find using Photoshop to be much of a time sink. The time sink was the next step, doing the whole thing in tables. I didn't post about that yet, and I'm not terribly motivated, because I don't think anyone will really use that method, anyway.
frumhouse says
Thanks for this tutorial!
Please leave a comment! I love to hear from you.