resizing thumbnails carousel

  • Posts: 167
  • Thank you received: 4
  • Hikashop Business
3 months 1 week ago #308490

-- HikaShop version -- : 3.5.1
-- Joomla version -- : 3.9.5
-- PHP version -- : 7.1.24

Hi.

I've a problem adjusting the height of the thumbnails in the carousel module. It;s quite confusing, I'll try to explain.

In the carousel 4 products are shown in a horizontal row.
In the Hikashop configuration the thumbnails are set to 120px width and 120px height.
Force image size is off.

The fact is that most images aren't square, the proportion width-height varies.

In the website all 4 thumbs in the row have the same width 120px, but the height varies.
For instance: thumb X has width 120px and height 144px.
And thumb Y has width 120px and height 115px
Apparently the setting of the width overrides the height setting.

I prefer to limit the height variety of the thumbs.
So using CSS I set the max-height to 115px.
The result is that thumb X indeed has height 115px.
But the width of the thumb hasnot changed, still it's 120px. So the thumb is distorted.

However: when changing the width via CSS the height is adjusted in the correct proportional way.
When the width is maximized to 115px thumb X has width 115px and height 137px. Proportion is unchanged.

Is there a way to get the same behaviour when maximizing the height?
Maximizing the height to 115px should result in a proportional change of the width to 97px.

I hope this is possible.
Thanks,
Udo

Last edit: 3 months 1 week ago by Udo. Reason: Correcting typing error

Please Log in or Create an account to join the conversation.

  • Posts: 67190
  • Thank you received: 9961
  • MODERATOR
3 months 1 week ago #308491

Hi,

I'm not following everything you wrote.
However, If you just set the height to 115px and leave the width empty in your module, then all the images of the module will have a height of 115px and the width will vary in order to keep the ratio of the image.

Please Log in or Create an account to join the conversation.

  • Posts: 167
  • Thank you received: 4
  • Hikashop Business
3 months 1 week ago #308587

Hi Nicolas,
Thanks for the reply.
I''ve done as you suggested but the result is not good.
The problem seems to be that the first image in the row is decisive for the size of all thumbnails in the carousel.
When the first image changes, than the size of all thumbs change.

To illustrate I've attached 2 pictures of the carousel. On both pictures you see 4 products.
The difference between pictures A an B is that the first two products change position.
As you can see the impact of this change is big.
In the carousel module height is set to 115px, width is empty (like you suggested)


In picture A all thumbs are loaded in map upload/thumbnails/114x82
The bracelet thumb has size 114x81 (scaled to 115x82)
The golden healer thumb has size 78x82


In picture B all thumbs are loaded in map upload/thumbnails/115x119
The bracelet thumb has size 114x82 (scaled to 165x119)
The golden healer thumb has size 114x119

The width in the name of the thumbnail map seems to override the height set in the module.

I hope this explanation is clearer than in the former post.

Regards,
Udo

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 2254
  • Thank you received: 297
  • MODERATOR
3 months 1 week ago #308691

Hello,

Can you provide more elements to better understand the context as :
- Your carousel configuration page screenshot
- Front end url to see results and process some tests by ourselves.

Can you try to switch for a default template like Protostar to see if that solve your issue or improve the result.
Awaiting news from you.

Regards

Last edit: 3 months 1 week ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 167
  • Thank you received: 4
  • Hikashop Business
3 months 1 week ago #308723

Hi,

I've attached a screenshot of the carousel configuration.

Switching to the Protostar template makes no difference at all.

URL of page containing the carousel module(named Onze nieuwste producten) : Webshop Semoea

Notice that the situation is somewhat different from the screenshots I did send before. That's because new products have been published.

Important: I've applied an extra CSS line to restrict the height of the thumbnails (max-width:115px, max-height:115px)
That's done to prevent an undesirable display.
Have a look at the webpage while this extra CSS line is switched off (see attached file).
See what happens to the product Afrikaanse jade armband (second slide). That's much to high because the ratio is very different from the first thumb of the module. Alas the extra CSS rule causes a distorted width-height ratio.

Hope you can find a solution.

By the way: I'm subscribed to this topic but for some reason I don't receive an email when a new reply is published.

Regards,
Udo

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 2254
  • Thank you received: 297
  • MODERATOR
3 months 6 days ago #308746

Hello,

I think I get the root issue, see my screenshot :



It seems that you have a plugin jchoptimize that add some extra Css, here "width:100%;"
So, to solve this 2 solutions :
- You can remove this code from the plugin css
Or
- Like on my screenshot, instead of :
max-width: 115px;
max-height: 115px;

You use :
width: auto;

Hope this will fit your needs.
Regards

Last edit: 3 months 6 days ago by Philip.
The following user(s) said Thank You: Udo

Please Log in or Create an account to join the conversation.

  • Posts: 167
  • Thank you received: 4
  • Hikashop Business
3 months 6 days ago #308778

Hi,

Thanks a lot for finding the root issue.

However the plugin JCH Optimize is just combining CSS files into one. It doesnot add extra CSS.
In fact the relevant code is part of the Hikashop file media/com_hikashop/css/owl.carousel.min.css

I've added the line

.owl-carousel .owl-item img {width:auto}
to my template CSS and that overrides this Hikashop CSS.
And I deleted my extra CSS line containing max-width:115px and max-height: 115px
Now the main problem is solved, hurray.

Another problem was the variable size of the carousel thumbs. This size depended on the width-height ratio of the first image (as shown in the pictures in my second post). That ratio determines which map upload/thumbnails/xxx is used. And all thumbs in the carousel use that same map.

I now discovered that this was caused by setting the height in the carousel module.
When the width and height fields in the carousel module are left empty this doesnot happen.
Then always map uploads/thumbnails/120x120 is used. These are the thumbnail dimensions set in the main configuration.

I'm very glad the carousel is now working fine.
Thanks for your help.

Regards,
Udo

The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

Time to create page: 0.079 seconds
Powered by Kunena Forum