Uniform Size for Thumbnails
-
@tdchuh- raincoaster is right. The majority of those photos were cropped and resized before uploading to the maximum width for my theme (Journalist 1.3), which is 720 pixels wide. The Attachment page displays an intermediate size image (resized by WP to your theme’s max width) and clicking again on the image will display the full size photo. But since image quality is important to me, I usually resize before uploading to that maximum width. (You can see an example of what I’m talking about here.) Panos has a list of the maximum width for each theme here http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/
You also have the option in the Gallery settings to link to the image file itself rather than an Attachment page. In terms of site navigation, it’s a pain.
Regardless if you choose the Attachment page or Image File to link to, tsp said pretty much the same thing, “Really what you want to do is to size images before you upload them so that they are all either the same width or height (depending on which is most important to you).” Once you do that, the resulting thumbnails will be uniform. (And having to crop to a specific size will also help create the focal point of your photo.)
-
OK — I get it now (thanks for being so patient with me, all of you!). I think this will work, especially since I now where to set the codes once I make all the pre-post images as uniform as possible — Thanks again!!
-
Per your advice, I am using Photoshop Elements to resize my images before uploading to my WP blog (http://agatedesignjewelry.com). In PSE, I resized one of my “Necklace” page images to approx. 8″x4″ (438 ppi), which is the max width for the WP Contempt theme.
However, as you can see while the widthis correct, the vertical is too “shallow” and there’s too much random white space between the images reading vertically. Is this a PSE issue, or is there something I can do to fix in in WP? My ultimate objective is to get 8 thumbnail images (4 + 4) in two columns on the Necklace, Bracelet and Rings pages.
Thank you!
-
1. The size of the images you upload has nothing to do with the gallery thumbnails and their arrangement (as long as the images are all larger than the thumbnail size).
2. There’s no “random white space” in your Necklace gallery: you’ve got a grid of 2 images per row with their tops aligned.
3. Could we start over please? Since the images have varying width to height ratios, what is your definition of thumbnails “uniform in size”?
-
Thanks for your reply — I think I partially addressed the problem by adjusting the max height and width of the thumbnails in settings>media (this adjustment made all the tops of the images aligned). I guess I would just like to know how to make ALL the heights and widths of all the thumbnails in the gallery the same. Is there some way to set a standard width to height ratio for all my gallery images? Hope this makes sense.
Thanks!
-
I’m afraid it doesn’t! Thumbnails are just downsized versions of the originals: if you’ve got an image in a, say, 2/3 width to height ratio, and another image in a 2/4 ratio, the thumbnails will also be 2/3 and 2/4 no matter what you’ve set in Settings>Media. The width and/or height numbers you set there are not a ratio: they say “confine thumbnails to that width and/or height”. Uniform thumbnails requires uniform originals. Failing that, you could try uniform thumbnail width only, as tsp suggested (you’ll achieve that by setting a height number so high that it will have no effect, say 800). You can also play with the order of the images, to minimize the white spaces between them.
You can also arrange them with no vertical white spaces at all (i.e. no horizontal alignment), but that means an altogether different approach. (We’ll get to that if you don’t manage to have a satisfactory result via the gallery feature.)
-
I’m sorry to be so dense. Here’s the part I don’t get: You say in the latest post that “Uniform thumbnails require uniform originals.” But in the preceding post you say “the sizes of the images you upload has nothing to do with the gallery thumbnails.” I think that’s where I’m confused.
So the question is, when I size my originals (before uploading), should they all be the same SIZE in terms of inches (width x height), or do they just have to have the same RATIO (width x height) regardless of the inches. For example, if I have one original that’s 4 x 8, and another one that’s 8 x16, will the size of the thumbnails be the same on the gallery page? Or do the originals both have to be 4 x 8 when they’re uploaded to yield the same size of thumbnail?
Hope that clarifies my question a bit. Thanks!
-
Same ratio.
To put it otherwise, a gallery works best with images that are all the same shape.
-
tdchuh,
All images with the same size will have the same ratio; not all images with the same ratio will have the same size.
To help you more understanding, in web terms you don’t use inch units, you use pixels.
See the following scenario:
Let’s say that the default size of a thumbnail is 100px width maximum, and 50px height maximum, and you have 2 images, both 400 pixels width and 300 pixels height, when you upload them, both thumbnails will have the same size as well… they will look uniform, because they will be resized to fit the thumbnail size… their ratio is kept.
Same thing, if you had an image 800px width and 600 height, it’s ratio will also be kept when the thumbnail is created… because even though the image is larger in it’s dimensions, its ratio is the same as that of a 400×300 image. So the three thumbnails will look uniform.
If you had a 600 x 800 image, then its height may be uniform (the same as the other thumbnails) but not in its width.
Hope my $.02 worth didn’t confuse you even more.
-
OK — Let me see if I can illustrate my issue (I do all this in Visual mode):
1. Go to the “Necklaces” page on my site
2. Go to Edit Page
3. Click Edit Gallery icon
4. Click Media Library
5. Click Show for each of the images 1,3 and 4 – in each you see the exact dimensions of the thumbnails displayed (175×90, 175×126, 175×118)
6. So, I seem to be able to get the 175 width uniform, but I don’t know how to get the heights to be uniform.Does that make sense?
Thanks!
-
Well, the height is not consistent because the “originals” don’t have the same height either. For instance, the first 3 photos have these dimensions:
Carnelian and Amethyst == 650×482
Sterling Silver Peony == 650×643
Bubble Pendant == 650×554Like I explained in my post above, if ALL your original images have the same width and height, then the thumbnails will be uniform.
In other words, if ALL your photos had the same dimensions: 650 x 554 then the thumbnails would be uniform… but right now, like the first three photos, even though all they have the same widht, they have different heights, hence… the thumbnails are not uniform: they have the same width (175px) but different heights (90, 126, 118).
Does that make sense?
-
OK — This makes sense now — So ALL the originals DO have to the be same width and height in terms of pixels in order for the thumbnails to be uniform.
Can you tell me how to get to the place on my WordPress dashboard or media library where you see the full (vs. Thumbnail) dimensions (e.g., 650 x 554, 650 x 643, etc.)?
Thanks!
-
just click on your thumbnails (I think I had to click twice because the first click took me to the necklace single page, then clicked on the image again to get to the picture itself) and the full image size will come up. If you’re using Firefox, the image dimensions will be shown in your title bar.
-
Great – Thanks! Now I just have to figure out how to get Photoshop Elements to cooperate. Right now, if you specify one dimension (e.g., 650 width), it will automatically assign the height to preserve the original dimensions. I can’t figure out how to override that yet. I know you only provide support for WP, but do you happen to know?
Thanks again!
-
Oh — I just figured it out — When cropping in Photoshop Elements, you go to image>resize>image size and you de-select the “Constrain Proportions” box — then you have free reign to set your own height and width —
Thanks again for your help!!
-
“So ALL the originals DO have to the be same width and height in terms of pixels in order for the thumbnails to be uniform”.
No! They have to have the same width and height ratio. Devblog was trying to show you the same thing I was: you cannot have uniform thumbnails with non-uniform originals. If you had three square originals, one 300×300, one 500×500, and one 1200×1200, you would get three 175×175 thumbnails. But if you have those three squares plus an oblong, you cannot possibly make the oblong “uniform” in both width and height with the squares.
-
I’m not familiar with Photoshop Elements, but if it’s similar to Photoshop, then what I would recommend you is to create an empty canvas (let’s call it container), make it, let’s say, 650×550, then open your images in Elements without closing the container; drag the images to the container.
I’m assuming your original images will be bigger than the container, resize them so that they fit the container trying not to leave white spaces around them. Save them for web… all your images should have the same dimension now.
HTH
-
Oh — I just figured it out — When cropping in Photoshop Elements, you go to image>resize>image size and you de-select the “Constrain Proportions” box — then you have free reign to set your own height and width —
Be careful, otherwise your images will be distorted…. I believe you haven’t read my suggestion above… so I’d recommend you to give it a try.
-
Panos,
I think the word ratio may confuse tdchuh.
I don’t know how to put it in simpler words, but for simplicity’s sake, l would say it would be better if all his/her images had the same “width” and “height” (hence, the same ratio). So if all images are 650×550 then, the thumbnails will have the same dimensions (i.e. 175×90). Thus, getting the results tdchuh wants.
-
Devblog, you’re right — the ratio thing did have me confused, so I think your explanations and suggestions are very clear for my purposes now — I also will try your Photoshop suggestion – I think it will yield better results than what I was suggesting with respect to not constraining proportions.
Again, thanks to all of you for your help, and sorry this took so long to resolve! I really appreciate all the time that all of you put into this topic!
- The topic ‘Uniform Size for Thumbnails’ is closed to new replies.
WordPress.com Forums 