Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 2 – Part 7 – Understanding Images in WP eStore

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

So we’ve created categorized products in the Genesis theme and while we’re here reviewing display options for WP eStore, I want to show you one other type. That is display product 13. Let’s put in style 13 here and hit Update. Notice how the image has been distorted?

WP eStore Image Display Formats

That brings me to this conversation about understanding images in WP eStore because WP eStore displays images in 4 different formats.

It displays a thumbnail image as a square, that’s the first format. The second format is the thumbnail as a rectangle and in this case, the rectangle is in a 4×3 format, so 200 pixels by 150 pixels or 600×400, it’s in that 4×3 format. Then these two display styles really have multiple images.

Styles with Multiple Images

It has this tiny display style which is always square and this one’s small and this one’s even smaller but it’s not so much the size as it is the configuration. You’ve got this tiny display style and even though you’ve got a big rectangular image, the little thumbnail is still square.

Then you have the lightbox view and the lightbox view is this view. This is essentially the full size view of the image regardless of what its size and configuration are, this is its full sized view and those are the four formats of images that WP eStore displays.

Category Images

Now unfortunately, for category images, its thumbnails are only square. Let’s come back over and look at our products for a moment and look at the category plugin. If you had a rectangular shaped image, currently the way the things are set up, it would not display properly here for this because this will only display square images. It doesn’t have any other mechanism of display besides that whereas if you go to the products, the product can in fact, display either rectangular or square.

WP eStore Images Settings

The trick here is that since the image that I put in place is square, the default method of displaying this is to simply reshape the image. Now, WP eStore has a fix for this and that fix is in the Settings. Let’s come over to Settings. WP eStore has two different settings that affect images.

Enable Lightbox Effect

The first one is Enable Lightbox Effect on Image. So if you click on this button, what happens is that when you click on the thumbnail image, it pops up in a lightbox view. That’s what this is here, when you click on that it pops up in the larger view, in a lightbox view.

We just set it up so that when you click on the image it actually takes you to the product page but you could have it so that this opens up in lightbox and this is how you get to the product. If there’s some reason why a nice big view of the image is important to you then that might be an appropriate way to do it. Anyway, that’s the first setting, Enable Lightbox Effect.

Enable Smart Thumbnail Option

The second setting is Enable Smart Thumbnail Option. Now, what happens with the smart thumbnail is that rather than just sort of stretching the image to fit into the space, it will crop the image. So if we have this selected and we hit Update Options then we come back over and refresh this, what’s happened is our image has been cropped off at top and bottom so that it’s not distorted. A little bit of the bottom is missing, a little bit of the top is missing but the image fits in the format.

If we take this back to say style 3 for just a moment and hit update, style 3 is looking for a square image. So the image is not being cropped, it’s just being squeezed down to fit. Now, I believe your best bet is to make all of your images the same size.

Making Your Images the Same Size

Obviously it’s not absolutely necessary but if you don’t make them all the same size and all the same orientation, you’re going to end up with cropping that you can’t control. If that doesn’t matter to you, no problem. But if it does matter to you, then you want to make sure that the images that you use are appropriate for the format that you’re displaying your product in.

So if you are going to use this style of display, you probably ought to have your product images be in this format so that the thumbnails don’t crop out part of the product image. If you’ve got a square product image but a 4×3 thumbnail image display it’s either going to be squished out of shape or it’s going to be cropped. Probably neither of those are acceptable which means that if you’re using this style of display, then what you want to do is make sure that you use that format of image, okay?

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one