Flickr Gallery stack from Rapid Ideas thumbnails question

Classic Stacks
1

Hi again. Thanks for the input on my question about the Ultimate Gallery stack.

I’ve downloaded and played around with the Rapid Ideas Flickr Gallery stack and have a couple of questions for you all.

First is there a way for the thumbnails to be centered in the browser? Depending on the width of the browser window when the thumbnails shift to the next row they are left justified and I’d prefer them to be centered. Not a huge deal but it bothers me.

Second when the thumbnails are generated from landscape photos the thumbs are square but start on the left side of the photo so don’t come out looking centered. This doesn’t happen on photos taken in portrait orientation. So I’m wondering if there is a way to have the thumbnails generated from the center of the photo? A solution I’ve found is to just crop the image to a square.

Yes I’m a little OCD about these things.

Thanks again.

2

Regarding your first point about image alignment. The answer is: “maybe”.
Regarding your second point the answer is: “Doubtful as it would probably need some code changes around how the stack handles the incoming image data”.

However without a link to the live site exhibiting these behaviours it is impossible to be more specific.
Post a link to your site and we can take a look.

3

I’ve cropped all of the images I’m going to display so the second question isn’t a problem anymore, I haven’t uploaded the images but plan on doing it later today so these are currently off centered.

Here’s the test page I’m working on.
http://globes.victorygraphix.com/etched.php

Thanks.

4

I see the problem. Particularly obvious with viewports around the 680px-737px range.

To overcome the issue I was putting together a collection of media queries that would govern the left margin/padding of the thumbnail gallery but they were becoming numerous and unwieldy.

Then I noticed that the offsetting is actually only relative to the container, which because of the bordering you have applied ( 2px solid white) makes it much worse than it actually is. The gallery itself is doing what it’s supposed to, it’s just that the centering relative to the bordered container. That actually isn’t necessary. In fact I think the page looks much more appealing without the bordering.

If you remove the border from the container using the stacks hud settings then retest the gallery, I think you will see what I mean. The specific CSS to remove the bordering I mean is this:

#stacks_in_11792_page29 {
    border: none !important;
}

With that border gone, I think it looks fine at each viewport. Try it and see…