Update Broke our Product Images

[kyzcreig]

Compare:
Old patch: https://irc.bio/test123/product/etizolam-solution/
New patch: https://irc.bio/product/etizolam-solution-4mg-x-30ml/

You see how the gallery and product images are all changed, different shape, misaligned. This happens periodically with your updates. Is there any kind of final solution we can implement? I want the product images to look like the old patch, first link. How can we make this happen?

[David Martin – Support]

Hi,

WooCommerce 3+ essentially changed the entire slider setup for our theme. We had to remove the lightbox and nav arrows for now to be compatible with Woo 3+.

Regarding the image sizing, on your staging site what are the image settings for your products? Do you have a staging login?

[kyzcreig]

Yes, the login is the same as the main site.

I presume this is an easy fix it will just take some tinkering. We really just need the main image fixed, the thumbnails aren’t a big deal. One of your reps did give us some custom CSS code so you may need to modify that.

[David Martin – Support]

Hi,

Regarding the short height image size of this product, can you rebuild the thumbnails: https://irc.bio/product/etizolam-solution-4mg-x-30ml/

You need to use this plugin to rebuild your thumbnails: https://wordpress.org/plugins/regenerate-thumbnails/

[kyzcreig]

Thumbnails regenerated. It has made no difference, even after clearing our cache plugin.

[Rui Guerreiro – SUPPORT]

This reply has been marked as private.

[kyzcreig]

I have updated and it has not made a difference. Can you attach the up to date swiftframework plugin, or tell me where I can find it.

[Rui Guerreiro – SUPPORT]

Grab this one.

http://swiftideas.d.pr/Si8jK5/3OWVW7QX

-Rui

[kyzcreig]

Miscommunication on my part. I meant that it is not checking for updates and checking for updates does not work. I have hostgator, could this be the cause? I’d like to stay up to date, how can I do that?

Anyhow, updating Swift Framework did not fix the gallery image issue. Can I get some CSS help?

[kyzcreig]

We want to get of that white rectangle at the bottom. So we need to vertically center the image inside the div and then change the background-color to rgb(249,249,251);

I’ve been tinkering with it but for the life of me I can’t get it to work with all your fancy new CSS.

[Rui Guerreiro – SUPPORT]

Yes, it can be related to hosting restrictions.

Can you explain in the image below what exactly you want to change? can you write some notes on the image. So I can check it with our head developer.

Thanks

[kyzcreig]

Yes, we need one more change. We want to vertically center the image inside the rectangle. Please see here how it is aligned to the top instead of vertical middle: http://imgur.com/a/Al2bD

[David Martin – Support]

You can test this CSS:

img.attachment-shop_single.size-shop_single.wp-post-image {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(7.5%);
}

[kyzcreig]

Didn’t do the trick, I’m afraid. I will make you a video: https://youtu.be/ddVZI1qwJ5o

The image just isn’t vertically aligning. Position CSS is a cruel mistress?

[David Martin – Support]

What is the URL login for where you are testing this?

Edit: Seen the video, will take a closer look.