Return to previous page

Products catalog thumbnail distortion - by Hunchback

This topic has 26 replies, 3 voices, and was last updated 10 years, 7 months ago ago by Eva Kemp

Hunchback

Participant

July 24, 2014 at 14:01

Hello,

We are experiencing some thumbnail size inconsistency on our site. Some thumbnails are much larger than the rest, making product listings look weird. You can check http://dobiart.fr/nouveautes/ for example.

Is there anything we can do to solve this?

#10655 Copied

25 Answers

Eva Kemp

Participant

July 24, 2014 at 14:10

Hello,

Please try to change the height of images in Theme Options > Products Page Layout > Product Images Height.

Regards,
Eva Kemp.

#10658 Copied

Hunchback

Participant

July 24, 2014 at 14:13

It’s currently set to 700, what should we change it to?

Also, should we enable “image cropping” ?

#10659 Copied
Eva Kemp

Participant

July 24, 2014 at 14:36
Try to set another value 300 or 400 or 500 and enable “image cropping”. If it doesn’t help use this code in custom.css file:

img.hide-image { height: 300px; }

How to create custom.css you can watch at this link: http://www.youtube.com/watch?v=Qok2zRedRMY&list=PLMqMSqDgPNmD4uhGI1IBhr1iaEy81TMff&feature=share&index=1

Regards,
Eva Kemp.
#10661 Copied
Hunchback

Participant

July 24, 2014 at 14:53

Are the settings in Theme Options related to the settings of Woocommerce settings? Should they be set to the same values?

#10663 Copied

Eva Kemp

Participant

July 24, 2014 at 14:55

You can changes the values in Woocommerce settings as well.
Also you need regenerate thumbnails after the changes. You can use this plugin: https://wordpress.org/plugins/regenerate-thumbnails/

Regards,
Eva Kemp.

#10664 Copied

Hunchback

Participant

July 24, 2014 at 14:57

Thanks, that’s exactly what i am doing atm – regenerating the thumbnails. 🙂

I’ll report back once it’s done.

#10665 Copied

Eva Kemp

Participant

July 24, 2014 at 15:19

You’re welcome.
Ok. Looking forward to your reply.

Regards,
Eva Kemp.

#10667 Copied

Hunchback

Participant

July 24, 2014 at 16:24

This doesn’t seem to work. It’s most notable with the Tampon Altered Type Alphabet – Stampendous product on the page i first linked.

Please note, this page is not a shop page per-se, it’s a page generated with the [recent_products per_page="60" columns="4" orderby="date" order="desc"] shortcode

#10670 Copied
Eva Kemp

Participant

July 24, 2014 at 16:58
In this case please use this code in custom.css file:

img.hide-image { height: 300px; }

How to create custom.css you can watch at this link: http://www.youtube.com/watch?v=Qok2zRedRMY&list=PLMqMSqDgPNmD4uhGI1IBhr1iaEy81TMff&feature=share&index=1

Regards,
Eva Kemp.
#10674 Copied
Hunchback

Participant

July 25, 2014 at 12:18

Thanks a lot, that seems to have fixed the problem!

On a side note, could you give me the code for modifying the main-nav submenu (dropdowns) background colour? By watching the tutorial video i got inspired to modify a bit the default look of our site… 🙂

#10739 Copied
Eva Kemp

Participant

July 25, 2014 at 12:22
Hello,

You can change background color in custom.css file using this code:

.main-nav .menu > li .nav-sublist-dropdown .container > ul > li a { background-color: blue; }

Just change the color value to yours.

Regards,
Eva Kemp.
#10740 Copied
Hunchback

Participant

July 25, 2014 at 12:27

Thanks a lot for the help with the thumbnails and the remaining info!
I really like your support team, you guys/girls are very fast and precise with your answers, good job!

#10741 Copied

Hunchback

Participant

July 25, 2014 at 12:33

Sorry to bother again, just something i was playing with but can’t figure it out… I tried to make the dropdown menus transparent with the code:

.main-nav .menu > li .nav-sublist-dropdown .container > ul > li a {
opacity: 0.6;
background-color: #F5EBEB;

}

but it won’t work. What am i doing wrong? I see that the “floating menu” (not sure how it’s called, the one that appears when you scroll down) is transparent, so i thought i could make the main menu’s dropdowns transparent too…
Oh and, could you tell me the code for the floating menu backgroudd too please?

#10742 Copied
Jack Richardson

Support staff

July 25, 2014 at 12:45
Hello,

Please try to add the following code into the custom.css:

.main-nav .menu > li .nav-sublist-dropdown { background-color: rgba(245, 235, 235, 0.6) !important; }

Regards,
Jack Richardson
#10743 Copied
Jack Richardson

Support staff

July 25, 2014 at 12:47

Also could you please explain what do you mean: “code for the floating menu backgroudd”?

Regards,
Jack Richardson

#10744 Copied

Eva Kemp

Participant

July 25, 2014 at 13:16

Hello,

Do you mean fixed header background color? If so here is the code for its background:
.fixed-header { background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.95); }

Regards,
Eva Kemp.

#10746 Copied

Hunchback

Participant

July 25, 2014 at 13:18

I was talking about that header/menu that only appears when the page is scrolled lower and we can’t see the main nav

#10747 Copied

Hunchback

Participant

July 25, 2014 at 13:28

Thanks a lot, all this worked fine. Great 😀

#10748 Copied

Eva Kemp

Participant

July 25, 2014 at 13:33

You’re welcome.

Regards,
Eva Kemp.

#10749 Copied

Hunchback

Participant

July 26, 2014 at 07:43

Hello,

sorry to dig this up – after closer inspection to the image distortion fix we’ve applied, we now have all of the images in our catalogs of the same size, but some are looking quite distorted, i suppose it’s a height-width ratio problem. Could it be because we’ve only set the max height value in the fix?

#10830 Copied

Eva Kemp

Participant

July 26, 2014 at 09:52

Hello,

Please provide us with the link where the issue persists and wp-admin panel credentials in Private Content.

Regards,
Eva Kemp.

#10842 Copied

Hunchback

Participant

July 26, 2014 at 10:00

http://dobiart.fr/categorie-produit/tamponsencres/encres/ page 2 and 3, for example

Please, contact administrator
for this information.

#10843 Copied
Eva Kemp

Participant

July 26, 2014 at 10:29
I’ve added this code into custom.css as well:

.products-grid .product .product-name { height: 80px; }

Please check your page now.

Regards,
Eva Kemp.
#10846 Copied
Hunchback

Participant

July 26, 2014 at 14:43

Hey, thanks a lot for the fix, it looks much better now! 🙂

#10856 Copied

Eva Kemp

Participant

July 26, 2014 at 16:59

You’re welcome.

Have a nice day!

Regards,
Eva Kemp.

#10861 Copied
Tagged: persuasive, product catalog, seo friendly, thumbnail distortion, woocommerce, wordpress themes
Viewing 26 results - 1 through 26 (of 26 total)