Two images of one product

Hi @kirjozzz you can do it this way;
Customizing ? Product Archives ? Cards Options ? Image Hover Effect ? Swap Images

Then paste this CSS to;
Customizing ? Additional CSS

.products[data-hover=”swap”] .ct-image-container .ct-swap { opacity: 1; width: 49%; left: 51%; }
.products .ct-image-container img { width: 49%; }

Note: All of your products need a featured image and a first gallery image, otherwise it will look awkward.

Hello. Thank you for your help. I have done what you said unfortunately I’m not getting images side by side. Please see my website.

Hi @kirjozzz

Just purge cache after you paste the CSS, it’ll work.

<!– Page generated by LiteSpeed Cache 3.6.4 on 2021-05-23 12:08:41 –>

I’ve purged cache. Sorry, what I’ve meant is that the second image is not showing up on the right side. I’ve also had to change the image ratio to 1:1 (this is how they will be in the future) and now images are not square. Do you know how ca I fix this?

@kirjozzz

Please try to write the quotation marks manually when you paste this part;

.products[data-hover=”swap”] .ct-image-container .ct-swap { opacity: 1; width: 49%; left: 51%; }
.products .ct-image-container img { width: 49%; }

Please try to write the quotation marks manually when you paste this part;

.products[data-hover=”swap”] .ct-image-container .ct-swap { opacity: 1; width: 49%; left: 51%; }
.products .ct-image-container img { width: 49%; }

That’s great! Manually writing quotation marks has helped. I have now a second photo next to the first. How do I now make photos square, because now they are vertical. Also, how do I do the same for a product page?

I’ve managed to make images square, but now the spacing between images and title is very big. How do I bring it back to normal?

Hi @kirjozzz

Could you please send us a screenshot showing the spacing issue between the title and images? I’ve taken a look and it doesn’t seem to be big.

Thanks

Please see this link: https://ibb.co/qrdFQ5v

Hi @kirjozzz

Please change [class*=’ct-image-container’] [class*=’ct-ratio’] padding-bottom to 360px and tell me if it works.

Thanks

• This reply was modified 3 years, 10 months ago by strelok1911.

Sorry, I’m a beginner in this. How do I do that?

@kirjozzz

Please try to delete your height:49% additon from custom CSS and just select 2/1 ratio from;

Customizing ? Product Archives ? Cards Options ? Image ? Ratio 2/1

View post on imgur.com

Thank you. That has fixed that, but now photos are zoomed. please see this screenshot:

https://ibb.co/0rLH84d

Any ideas on how can I fix this?

Hi @kirjozzz

First, you need to remove

.products .ct-image-container img { width: 49%; }

from Additional CSS.

Secondly, there’s a problem just with the first image it seems, as after the removal of the attribute, the other images display just fine.

https://ibb.co/GFPzBXQ

Thanks