eStore Fancy 3 thumbnail sizes

[spbmrmusic]

Hello, I’ve spent a few days looking at options for resizing thumbnails in Fancy 3, and found quite a bit of advice. Unfortunately I’m not finding what I need. Can you help, please?

Because my products are designs, I need the lightbox element on so visitors can quickly and easily view a full-size image (width=600px) of the design. There is no real need to create a separate page for each product (which will soon number in the hundreds).

So, with the lightbox option enabled, current product display thumb options are:

1) Stretch the image to fit the box (width=[default]). This looks pretty awful, really. [http://snag.gy/snmWr.jpg]

2) Display a ‘cut-out’ section of the image by enabling the ‘smart thumbnail option’. This is not user-friendly as visitors are unlikely to click on something that could be just a line or half a face! [http://snag.gy/ea2dl.jpg]

I was looking for code to enter into the custom css box that would allow the product display to show a miniature but scaled version of the image.

Is there such a code I could use?

Thanks.

[admin]

Try inserting the following CSS via the custom CSS plugin (https://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413)

.eStore-fancy3-thumb img {

height: auto;

max-height: 125px;

}

[spbmrmusic]

Thank you!

I tried. I even cleared all caches (W3 plus browsers) and waited a day, but still no luck.

Any other ideas?

[spbmrmusic]

Aha!

That put me on the path to the code below, which works!!!

But I just couldn’t quite get the vertical alignment to work…….

[http://snag.gy/IeIqm.jpg]

.eStore-fancy3-thumb {

width:125px;

height:125px;

border:5px solid RGBa(125, 125, 125, 0.5);

}

.eStore-fancy3-thumb img {

width:100%;

height: auto;

max-height: 125px;

border:0px

}

.eStore-fancy3-thumb a img {

border: none;

[admin]

You mean you want the image height to still be 125px? Remember, you can’t fit a rectangular image inside a square space perfectly. So either pick the height or the width and then let some parts of the image be hidden (so whats in view is a square block from the image). Your users can click on the image to see the full version of the image which has all the details. It is natural for users to click on an image thumbnail to see the full picture.

[spbmrmusic]

Not quite – sorry I didn’t explain well.

Using the custom css I posted above, the image container box remains 125px x 125px, but now the full image can be seen inside it regardless of its size.

I’m afraid the visitors to my site will only click on images they want a closer look at and will just skip/ jump over images they can’t see fully at first. They have plenty of suppliers to choose from (and little time to browse for new designs) and I need to remove as many barriers as possible. At the same time, presenting images at 125 x 125 regardless of their size actually gives a false impression of the image.

Anyway, I’m happy with the results we have now.

If only I could figure out how to get the images in the middle of the box, vertically…

Thanks for all your help, support, and wonderful documentation for this plugin. I am seriously impressed!!

[Author]

Posts