Landscape vs sqaure vs portait of photos

[smokinjo]

Our website:

www.mosaikart.ca

It is on a LInux server (ubuntu 20.04) using PHP 7.4 and zen cart 1.57c.

We are having issues with our images.

We are going to be selling greeting cards. Posters will come later.

When we enter the images:
1 - on the all products page - all images show up in portrait format (even the landscape formatted one)
2 - on the product pages, all images are square (all our images are mainly portrait, but there is one landscape)
3 - in the lightview display, the images show up in their proper format(landscape or portrait)

How can we get zen cart to display in the natural format of the image? We are stumped.

Thanks

Joseph

[smokinjo]

I am following up to this question to see if there might be any one who can explain the issues we are facing, and maybe have a possible solution.

Thanks for any help.

Joseph

[dbltoe]

It's always a problem when mixing images with different widths and heights. Zen Cart is happier with all of them the same size, same width, or same height.

The stylesheet of your particular theme has hard-coded image height and width to make matters more difficult.

I would suggest making lines 33 and 43 of stylesheet.css change to block the call. I.e. line 33-37

.centerBoxContentsNew.centeredContent.back img{
     height:200px;
     width:150px;
}

to

.centerBoxContentsNew.centeredContent.back img{
      /* height:200px; */
      /* width:150px */
     max-height:165px;
     width:auto;
}

Then, do the same for lines 43-46

.centerBoxContentsFeatured.centeredContent.back img{
     height:200px;
     width:150px;
}

to

.centerBoxContentsFeatured.centeredContent.back img{
      /* height:200px; */
      /* width:150px */
     max-height:165px;
     width:auto;
}

Thoughts:

1. Leaving them separate will allow you to control them separately later if needed.
2. I used the height of your landscape image as the mx-height in order to make the "blocks" even across the page.
3. Yes, there are several ways to do this but, this was quick and least intrusive.
4. You might want to add this before eacn change line (32 for the first) so that you can find it later, if needed.

   /*  Image height and width changed by smokinjo */

[dbltoe]

Correction!!!! missed the square image on the page

[dbltoe]

Crazy the way they did one thing for product images and something totally different for New and Featured. They used height:auto in the products BUT, the width:150px; in both has to "stay" in order for the square images to work.

Because of that....

You will need to create includes/templates/theme847/css/stylesheet_zcustom.css and add to it

.centerBoxContentsFeatured.centeredContent.back img{
    height:auto;
    max-width:200px;
}


.centerBoxContentsNew.centeredContent.back img{
    height:auto;
    max-width:200px;
}

Hopefully that's got everthing in line and sized correctly.

Ask me how much I hate store-boughts.

[smokinjo]

Thanks for the fixes. I will try them out and let you know how this weeks. Thanks again!!

[smokinjo]

Thanks for your help.

My website guy said that he implemented the above changes. But, the issue still remains.

Please look at this link:

https://mosaikart.ca/index.php?main_...&fltartistname[]=Myrtelle%20Chery

If you look at the card "I Love You".

It is a landscape style image. But, it is still distorted.

Might you have some ideas on what is going wrong? Maybe even how to fix it?

Thanks

Joseph

[dbltoe]

Of course, they didn't. The code before was for new and featured products - not ALL products. Each listing is diffferent.

I'm surprised your "website guy" could not see that.

Simply change the height to auto on line 640 of your stylesheet.css.

Oh, and however much "Coffee" you provide your "website guy", I would suggest providing the same to the dev team.