image scale and crop

Hi Jon, I can see the pictures have resized fine on the product detail pages, but on the main category page they have not. Very odd. Please can you send me a screenshot showing your WP Catalogue settings screen? In particular I’m interested to see what resize method is set.

Thanks,
Maeve

PS If you’re on a timeline with this then the easiest workaround for now is to pre-size the images (using an image editor like Photoshop or GIMP) to the largest size which I can see on your site is the default 500x368px.

Hi Maeve

TREMENDOUS thanks for looking into this!

Screenshot here: https://slitheringfynbos.com/wp-content/uploads/2013/10/WPC-Settings.jpg

I left the images sizes the same, but I chose “Scale to Fit”, although the behaviour is the same even with “Scale and Crop”.

Also the pictures were all sized to Gallery Image size before I uploaded them. I also thought this may help.

I wonder if my theme is the culprit (Parabola)?

Equally, if it’s an easier work around, I don’t mind linking my store menu directly to the first product and then disable “All Products”.

I am running into the same issue. My theme is a custom child theme based on the Twenty Thirteen theme from WP. The product page images are sized properly but on the category page the image looks like it has cropped it from the upper left corner of the main product image.

Would be perfect if it used the product thumbnail image on the category page.

In my settings I have the following:

Gallery Image 373×500 Scale and Crop
Thumbnail 145×200 Scale and Crop

Thanks!

@lisabeewd: It is impolite to interrupt another poster’s ongoing thread with a question of your own. It causes significant problems for the forum’s volunteers and prevents us from being able to track issues by topic. Please post your own topic.

@esmi: I apologize. I was not trying to be impolite. My experience on forums is that if you are encountering the same issue/error as the original poster then it is sometimes helpful to add your post instead of creating a new post with the SAME issue. This way I can receive the same answer you give @jonvdheyden. It seems it would save you time. However, I will go ahead and create my own thread.

@jonvdheyden
Did you upload the products/images then change the image size settings after that? I have found I can replicate the issue if I do it that way, rather than setting the image size first then uploading.

Also, just to rule out a few things it would be helpful if you could switch to the default twentytwelve theme, re-install the plugin, and then try uploading a new product with new image… let’s see if we can replicate it on your site…

Thanks

Hello everybody. Meave let me say you did a great job with this plugin!
I confirm same issue which JONvdHeyden has on the Parabola WP Theme: I get Cropped and yet not resized thumbnails on the “All Products” section but as I tried changing my website theme From Parabola to Twenty Eleven, images were displaying fine on the default WordPress theme. So I guess (if you ever feel like to solve this issue) Meave, you could begin from the Parabola theme thing…

Image of Parabola theme
Image of Twenty Twelve theme

Ok cool, thanks for confirming this @dentalstyling.

It is probably also worth reporting this to the theme developer. If it is something happening just with that theme then it is most likely something they may need to fix up in the theme rather than with the plugin.

@maeve Lander

First off all…..congrats…awesome plugin…a lifesaver!… looking forward for the pro version =) …

OK Guys…@JONvdHeyden, @lisabeewd and @dentalstyling. I was having the same problem and I came up with this solution. I hope you guys can use it on your themes. It seems browsers block some css rules automatically depending on the theme I guess.. In my case I just added this css classes on my main styles.css or if your theme have to write customs css rules… try there. These classes help me to rewrite and see the thumbs properly. Good Luck !

For the “All Products” section (to resize thumbs images properly)

#main-content-wrapper img, #sidebar img {
width: auto !important;
max-width: 100% !important;
height: auto !important;
}

For inner pages of the catalogue. (to resize thumbs images properly)

.wpc-img img {
border-radius: 0 !important;
box-shadow: none !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
}

It is official: @zeropixel you are the man of the match!!
Thanks a lot, putting both of your styles inside parabola theme custom css rule made the trick!

I guess this thread can be sealed ad “SOLVED” ??

Awesome! Nice fix @zeropixel Thanks a bunch ??

Is there any solution for this problem for those who can’t edit their template CSS?

@bbdo Why can you not edit your theme CSS? Do you mean you don’t have access? Or do you mean you don’t know how? Or do you mean you don’t want to muck up the template and do not know how to use a child theme?

Just want to check the reason so I can help you further with some instructions…

Hi Maeve I recently experienced the exact same problem with ver. 1.7.1 of the free plugin and the Twenty Fourteen template. However, I found if you put !important after the height value in the plugin css it seems to fix the issue. Can you tell me if there would be any adverse effects of doing this? I checked other pages and it seems okay.

.wpc-img img {
    border-radius: 0;
    box-shadow: none;
    height: 110% !important;
}