Three image sizes per image / two thumbnails ?

tollady · 2007-05-04 07:05:13

Hi all,

I’m just wondering if there is a plugin available anywhere that will allow for more than just two sizes of image (main image and thumbnail) to be applied in a site ?

I’m looking for some way to associate 3 image sizes for an image I’m uploading – so I can display the main (big) image, a medium size image and a small square image.

Is this possible?

renobird · 2007-05-04 14:58:34

Tollady,

You can accomplish this with some CSS.

Say you have a div called <div class="article_image_sm"> which you use to contain a smaller version of an article image (not the thumbnail, since TXP can generate that for you already)

The image needs to be wrapped in an <a> tag like so:
<a href="someurl"><img src="articleimage_47" alt="" title="" /></a>

So you have something like:
<div class="article_image_sm">
<a href="someurl"><img src="articleimage_47" alt="" title="" /></a>
</div>

Then in your CSS file.

.article_image_sm a img{ width: 165px; height: 110px; overflow:hidden; }

You can do this as many times as needed with different sizes and different classes.
I use it to create 3 different sizes of the same image. Can take a bit longer to load pages (depending on the size of the images), but it works well.

This example was just off the top of my head, so I might have missed something.

—
Tom

squaredeye · 2007-05-06 17:04:32

There has been talk of this before. Because while Tom is correct, it doesn’t account for totally separate/different images that represent one main one. I’m sure this can be accomplished via a plugin, though I believe it would not be a small one. Perhaps some ransom for it would help?

renobird · 2007-05-06 20:55:46

ma_smith wrote:

It doesn’t account for totally separate/different images that represent one main one

Matthew,
I don’t totally follow…Can you elaborate on that senario?

—
Tom

jakob · 2007-05-06 22:47:36

It doesn’t account for totally separate/different images that represent one main one

Matthew, I don’t totally follow…Can you elaborate on that senario?

renobird, if I understand your code correctly, are you not simply making the browser resize the larger image? Sure, that works but the quality is generally poorer and doesn’t account for cases where thumbnails, or intermediate sizes, are not the same as the larger image.

What might conceivably work with CSS is the use of CSS background positioning. You could make a combined thumbnail image that contains both thumbnail and intermediate size image and then use CSS background positioning to show only the relevant portion of that image, i.e. the method commonly used for menu CSS-rollovers using the same image. It would be a bit laborious, though, to create the thumbnail with both sizes.

I’m looking for some way to associate 3 image sizes

tollady, what kind of setup are you looking to achieve? For example, if it’s a plain image gallery, something like photostack will generate a thumb and an intermediate size automatically and link to you full-size original if you want it to. You can style your photostack page to fit the rest of your site.

Another approach (may be inappropriate depending on your situation): With txp, I’ve needed a medium-sized image once before for a portfolio-type site. It served as the “cover” image for a portfolio project on a project overview page, but the project page only showed smaller thumbs linked to the main image. I uploaded it as a separate image, inserted it as the first image of several in the article image field. On the overview page I show the first image, on the project page I used the offset="1" and limit="max-no-of-thumbs" attribute of hak_article_image to begin with the 2nd image on the actual project page.

renobird · 2007-05-07 03:53:25

Jacob,

doesn’t account for cases where thumbnails, or intermediate sizes, are not the same as the larger image.

True, Although I wasn’t presenting a solution for that scenario. Tollady’s post asked for a way to display 3 sizes of an image…the original image – a medium version – and a square thumbnail.

the quality is generally poorer

Sure, you can see a difference, but the results can fall within the “tolerable” range IMO. It’s a quick and easy solution to the problem.

What might conceivably work with CSS is the use of CSS background positioning.

The background-position method works great..probably a cleaner method overall.

—
Tom

masa · 2007-05-07 10:59:33

renobird wrote:

Then in your CSS file.
.article_image_sm a img { width: 165px; height: 110px; overflow:hidden; }

But this would distort any images that don’t share the exact proportions, wouldn’t it?!
That would be very apparent with a mix of landscape- and portrait oriented images.

tollady · 2007-05-07 12:33:42

Thanks for your responses guys.

I was looking for a plugin to associate 3 sizes to an image (rather than the usual 2 – main and thumbnail) so I can display them on my site, attached to a related article.

The idea is that I have a gallery of thumbnails (the medium size pics) linking to the larger picture (the main pic size) as with any normal gallery. The third (smallest) size images show underneath the big picture to allow linking to the other pictures in the gallery without the need to go back to the thumbnail ‘menu’ page. I’d love to be able to have, say, “Image 1” in 3 sizes, for example:

Image1 – The original (big) image
Image1_th – The thumbnail
Image1_sm – The small image

It’s looking like the only way to do this is to upload 2 images, as Jakob suggests (Big image and associated thumbnail as normal and another image – the small version). It’ll work but it’s not very neat or easy to maintain. Eg:

Image1 – The original
Image1_th – The thumbnail

Image2 – The small image

The css idea is a solution, but not exactly what I was looking for.

Thanks again.

renobird · 2007-05-07 13:32:07

Masa,

Yeah, doesn’t account for the portrait vs. landscape. When I have a portrait image…I use the “override form” option to select an alternate form.

Clunky? Sure. But gets the job done for now. I’m sure there will be a TXP plug-in solution in the near future.

hakjoon · 2007-05-07 13:57:06

BTW a discussion similar to this happened over in the Improved Image Management thread. If anyone is interested.

masa · 2007-05-07 14:32:58

hakjoon wrote:

BTW a discussion similar to this happened over in the Improved Image Management thread. If anyone is interested.

Yes, I’m still waiting for Nils to return and I’m probably not alone. His image admin version was looking very promising. Hope he hasn’t expired working on his thesis ;-)

Last edited by masa (2007-05-07 14:35:18)

feragnoli · 2007-08-08 13:25:47

what about wow_gallery..? here

Textpattern CMS

Textpattern CMS support forum

#1 2007-05-04 07:05:13

Three image sizes per image / two thumbnails ?

#2 2007-05-04 14:58:34

Re: Three image sizes per image / two thumbnails ?

#3 2007-05-06 17:04:32

Re: Three image sizes per image / two thumbnails ?

#4 2007-05-06 20:55:46

Re: Three image sizes per image / two thumbnails ?

#5 2007-05-06 22:47:36

Re: Three image sizes per image / two thumbnails ?

#6 2007-05-07 03:53:25

Re: Three image sizes per image / two thumbnails ?

#7 2007-05-07 10:59:33

Re: Three image sizes per image / two thumbnails ?

#8 2007-05-07 12:33:42

Re: Three image sizes per image / two thumbnails ?

#9 2007-05-07 13:32:07

Re: Three image sizes per image / two thumbnails ?

#10 2007-05-07 13:57:06

Re: Three image sizes per image / two thumbnails ?

#11 2007-05-07 14:32:58

Re: Three image sizes per image / two thumbnails ?

#12 2007-08-08 13:25:47

Re: Three image sizes per image / two thumbnails ?

Board footer