Center product and product name ion landing page

  • Posts: 106
  • Thank you received: 0
2 years 11 months ago #331395

-- HikaShop version -- : 4.4.1
-- Joomla version -- : 3.9.25
-- PHP version -- : 7.3
-- Error-message(debug-mod must be tuned on) -- : None

I've been struggling to center the product name under the product images on our landing page. Under Product Options, Text centered setting is set to Yes. Doesn't appear to be an issue on the Category pages.

Any thoughts on how to resolve this?

Attachments:

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

  • Posts: 81378
  • Thank you received: 13037
  • MODERATOR
2 years 11 months ago #331400

Hi,

I don't see the issue on your link:
i.imgur.com/Lmed6n4.png
I've tried with Chrome, FireFox and Edge on my windows computer.
Do you still have the problem on your end ?
If so, which browser are you using ?

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

  • Posts: 106
  • Thank you received: 0
2 years 11 months ago #331426

I was able to fix most of the problem in CSS however I still see a little offset with the photos (see attached). It's so slight I won't worry about it but would like your insight on how to fix it so I can prevent it in the future.

Thanks!

Attachments:

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

  • Posts: 81378
  • Thank you received: 13037
  • MODERATOR
2 years 11 months ago #331427

Hi,

If you look at the size of the different HTML elements, you can see this:
i.imgur.com/VogD23l.png
The width of each product box is 158.5 px due to the constraints on the listing of the products: number of columns, margins, left sidebar, etc.
However, you've configured the thumbnails to have a width of 165 px which is greater that the width of the box.
So your thumbnail goes outside of the div of the product box while the product name is centered on that div.

Solutions are numerous here:
- reduce the number of columns
- change your template to allocate less width to the sidebar and more to the central area
- reduce the margins
- reduce the thumbnails size
- a combination of some of these

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

  • Posts: 106
  • Thank you received: 0
2 years 11 months ago #331571

That makes sense and fixed the issue. I didn't think of the template size/width constraint. Is there an option to automatically scale a product or category image to fit the template constraints?

Thanks again!

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

  • Posts: 81378
  • Thank you received: 13037
  • MODERATOR
2 years 11 months ago #331577

Hi,

Well, you could add a CSS command to change the width to 100% on the thumbnails.
However, the goal of generating thumbnails is so that your website can provide the image with the exact size so that the download time of the thumbnail for the display of the page as well as the quality of the thumbnail are optimized. The CSS command will only help if it's a "tight fit". But in that case, it might be worth considering optimizing the template or other elements so that there is enough space in the first place. Also, letting the browser adapt the width of the thumbnails dynamically can also cause resizing artefact on the thumbnails, especially if the browser has to upscale the size, so it's not a perfect solution.

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

  • Posts: 106
  • Thank you received: 0
2 years 11 months ago #331600

Do you have any documentation on how Hikashop handles the uploading of images and generating thumbnails? In some other systems I work with I can configure the size of the various thumbnails.

Thanks!

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

  • Posts: 81378
  • Thank you received: 13037
  • MODERATOR
2 years 11 months ago #331601

Hi,

In HikaShop too.
In the HikaShop configuration, under the "Main" tab, you have an "Images" section with several settings for the size of the thumbnails.
Then, in each menu item and HikaShop content module configured to display a listing of products, you'll see an option to override these settings and have a specific size of thumbnails.
Then, HikaShop generates dynamically the thumbnails if needed based on these settings and store them in the images/com_hikashop/upload/thumbnails/ sub folders. And if you delete that folder, HikaShop will automatically recreate the thumbnails little by little as they are needed for the different pages of the website.

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

  • Posts: 106
  • Thank you received: 0
2 years 10 months ago #332250

thank you!

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

Time to create page: 0.071 seconds
Powered by Kunena Forum