Different sized product images

-- Joomla version -- : 3.3.6

Hello, I set up my Hikashop i on my website to have recommended product down the left side in a module and recently purchased on right side in a module and then the product category in the center listed. Is there away to change the size of the images for the modules and the center listed products seperatly. As it seem to be all global setting.

Thanks Karen

Hi,

Yes, it's possible e.g. with CSS targeting the image divs in combination with the specific classes of the individual modules.

To be able to give you a usable "real-world" example of code, one would need to see your site, though. So, more if you have a link, ideally with hints on what image sizes you'd like to see where.

Oh yes sorry forgot to share a link, here is a the url > www.thehappinessacademy.com/beta/workshop-events

I have basically set up the side modules but the products in the center I want the image full width but more letter box shape rather than square. Is it possible to have them automatically crop the image?

Thanks

dancingkazzaf wrote: I have basically set up the side modules but the products in the center I want the image full width but more letter box shape rather than square. Is it possible to have them automatically crop the image?

You'll need to have and upload product images that are wide enough to cover the largest "full width" (which is in the "center" = content area). Presently, that's 489px wide. In case you'd want to reduce margin around thumbnails (i.e. to make the thumbnails in the centre as wide as the text above, 520px will be safer.
Of course, you can still upload larger images, which then the popup upon click in the product page will benefit from.

But before you upload images, you need to make some general decisions, plus adjust settings in the HikaShop backend -> System -> Configuration -> Main tab -> Images.

So, first it's absolutely vital for you to read this documentation !

Then you'll need to decide:
In the HikaShop settings, you can crop images and force them to be of a certain size, but these settings will be global, indeed. That, and the fact that text is part of your images, should be reason enough for you to not use these features, but instead prepare the original images to have the desired letterbox aspect ratio. Pro: you have more control over the appearance in the various sizes. Con: it'll be letterbox everywhere, the aspect ratio will be maintained, also in the sidebars.
Eventually you should try and play around with the image settings in the backend...

Next, make sure that images in the product listing = "center" (i.e. thanks to a "Thumbnail width" of 520px?) and on the product page (leave width at 300px?) are proper. Due to the flexibility in the backend and depending on your originals and you possibly trying different ones, it might take a few uploads and trials. But usually it's worth it.

The images in the sidebars should then come out to be just less wide but of same ratio. Unless you keep control over which products are listed there (as opposed to letting the system pick "dynamically"), that's probably as good as it will get without much more coding effort.

Let's see what the result will be. As indicated in my previous post, in case it's needed, the sidebar contents can be "treated" with specifically targeted CSS.

---

EDIT: Forgot to mention that thumbnail (image) sizes can also be set individually for each product listing, both menus (content area) and modules (sidebars)!

I should maybe add that for achieving images with equal width and height in the sidebars even though the originals are "letterbox", a cropping effect can be done per CSS.
Note that if you want to do so, you want to prepare the originals that the text is centered with enough space left and right, so it won't be cut off.

More then if needed.