thumbnail alignment - Post ID 209806

User 506998 Photo


Registered User
164 posts

Eric Rohloff wrote:
I just checked my shop and my product images are 300px.:)

Do you mean the "shop" in your signature? I could only (quickly) find one "product" and it was 225 pixels tall.
http://progrower.coffeecup.com/shop/vie … oductid=47
This is telling me that your original imported image was 225 pix tall and the store doesn't enlarge images if they are less than 418 but will display those at their original size.
User 187934 Photo


Senior Advisor
20,181 posts

That one is 300x300.;)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 506998 Photo


Registered User
164 posts

Eric Rohloff wrote:
That one is 300x300.;)

Yes but I'm talking about the one in the image display widget you see after clicking on the initial product photo, as when you have multiple product photos. In your case, I bet your template had the initial thumbnail size set for 300, so it upscaled that image, but didn't upscale for the product "closeups". Using Firebug I can see in the code (div settings) that you have a 418 pixel high "box" for that image.
I hope I'm clear. I really think this could help a lot of folks if explained clearly in the docs.
User 187934 Photo


Senior Advisor
20,181 posts

I know I re-sized a lot of images the same as your asking about. I see I made several 300 and several 400. I remember helping a few user lose the white space around their images.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 506998 Photo


Registered User
164 posts

I'll have to stand by my findings, as they are in evidence. 418 pixels tall is the best size to use for photo imports as that is the largest size they will be displayed in the "closeup" widget. I've been looking at two things: the actual image size and the div size space allotted in code for the image. Any image larger than 418 pixels tall is scaled on the screen down to 418 tall, which is not optimal for viewing (depends on the viewers graphics hardware) and is definitely not optimal for uploading and displaying online as it creates unnecessary file sizes and page load times. And note that there is not a parameter in either Shopping Cart apps to modify the image size within the "closeup" widget.
User 187934 Photo


Senior Advisor
20,181 posts

So you referring to the colorbox popup?:) If so, those can be 521x521.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 506998 Photo


Registered User
164 posts

We are both wrong ! :lol:
I just checked on another monitor with a higher rez display. There the div allows for a 603 pix tall image. And then I simply resized my browser and lo & behold, the div shrinks accordingly. So it depends on the screen real estate allotted. I may still hold to my 418 though I want to see what size div is forced on an iPad with default browser settings. Chased my tail a bit, but I learned a few things. :cool:
User 187934 Photo


Senior Advisor
20,181 posts

So was it the colorbox you were talking about?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 506998 Photo


Registered User
164 posts

Yes. I forgot what those were called and was just calling it the "closeup". And as far as I found, there are no adjustable parameters in Designer for the colorbox... unless you know different. Shopping Cart does make a smaller copy of your image for the main thumbnail and the additional images thumbnails, but apparently keeps the original intact and displays it in the colorbox according to the viewers browser window size. All this started because I was seeing how I could replace an image in a pinch directly into the folder in the store online with ftp without opening Shopping Cart. Of course, you eventually need to do it the right way or update that same folder off line the same way. But if you are in a hurry to correct something, it is possible .....and easy.

I guess that's a standard display technique for the colorbox. I really need to play with those, though I actually prefer multiple thumbs with a display window that stays put... though I know that limits your image size. This is my system I customize for most sites I build:
http://clydesdalecarriagerides.com/ (click on the photo gallery)
But the colorbox must be ideal for the iPad and similar. I gotta get with the program. Cheers.
User 187934 Photo


Senior Advisor
20,181 posts

You can control a lot with Jquery inside your shop. I have a few examples.;) I'll have to take a look at overriding the built in version.
Edit. Here's a outside content using colorbox. I forgot about this one.:lol:
http://progrower.coffeecup.com/shop/vie … groupid=35
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.