search

junaidbhura / auto-cloudinary

Super simple Cloudinary auto-upload implementation for WordPress.
https://wordpress.org/plugins/auto-cloudinary/
MIT License
40 stars 9 forks source link

Images for PNG are rendered differently than JPG #9

Closed austriker27 closed 5 years ago

austriker27 commented 5 years ago

Hi there,

Love the plugin and the simplicity of it. I'm using woocommerce and noticed a bug, perhaps its on cloudinary's side and not this plugin. So I've noticed my product feature images that are PNG display differently than JPGs.

See attached screenshot

screen shot 2018-10-07 at 9 31 30 pm

Woocommerce version: 3.4.5 Plugin version: Version 1.0.3

junaidbhura commented 5 years ago

Hey @austriker27 I'm glad you find the plugin useful!

Could you please share some examples, so we can get to the bottom of it?

junaidbhura commented 5 years ago

@austriker27 Hmm. Can you share maybe a page URL, or the actual IMG SRC attributes here?

austriker27 commented 5 years ago

I can try and share IMG SRC attributes. I disabled the plugin because it makes the site images looks so different so its not live on a URL right now.

the JPG html: 

<img width="300" height="300" src="https://res.cloudinary.com/rainier-watch/w_300,h_300,c_fill/auto-mapping-folder/2018/08/mockup-e8c2f8c3.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" srcset="https://res.cloudinary.com/rainier-watch/w_600,h_418,c_fill/auto-mapping-folder/2018/08/mockup-e8c2f8c3.jpg 600w, https://res.cloudinary.com/rainier-watch/w_300,h_300,c_fill/auto-mapping-folder/2018/08/mockup-e8c2f8c3.jpg 300w, https://res.cloudinary.com/rainier-watch/w_100,h_100,c_fill/auto-mapping-folder/2018/08/mockup-e8c2f8c3.jpg 100w, https://res.cloudinary.com/rainier-watch/w_50,h_50,c_fill/auto-mapping-folder/2018/08/mockup-e8c2f8c3.jpg 50w" sizes="(max-width: 300px) 100vw, 300px">

png html: 

<img width="300" height="300" src="https://res.cloudinary.com/rainier-watch/w_300,h_300,c_fill/auto-mapping-folder/2018/10/mockup-56affac5.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" srcset="https://res.cloudinary.com/rainier-watch/w_1000,c_fill/auto-mapping-folder/2018/10/mockup-56affac5.png 1000w, https://res.cloudinary.com/rainier-watch/w_744,h_418,c_fill/auto-mapping-folder/2018/10/mockup-56affac5.png 744w, https://res.cloudinary.com/rainier-watch/w_300,h_300,c_fill/auto-mapping-folder/2018/10/mockup-56affac5.png 300w, https://res.cloudinary.com/rainier-watch/w_600,h_600,c_fill/auto-mapping-folder/2018/10/mockup-56affac5.png 600w, https://res.cloudinary.com/rainier-watch/w_100,h_100,c_fill/auto-mapping-folder/2018/10/mockup-56affac5.png 100w, https://res.cloudinary.com/rainier-watch/w_50,h_50,c_fill/auto-mapping-folder/2018/10/mockup-56affac5.png 50w" sizes="(max-width: 300px) 100vw, 300px">
junaidbhura commented 5 years ago

Thanks, no worries.

Both seem to be cropped exactly the same way to me.

https://res.cloudinary.com/rainier-watch/w_300,h_300,c_fill/auto-mapping-folder/2018/08/mockup-e8c2f8c3.jpg https://res.cloudinary.com/rainier-watch/w_300,h_300,c_fill/auto-mapping-folder/2018/10/mockup-56affac5.png

In the screenshot you'd added, the images don't appear to be the same height. I can't tell what's going on? Could you please elaborate?

austriker27 commented 5 years ago

Both images are the same size, Id agree. But whenever I use the cloudinary plugin it does something so the jpg images render shorter in height. I havent touched any of the cloundinary settings - could it be something there?

The url Im referring to is here - however note I turned off the plugin so this is how the images should look.

junaidbhura commented 5 years ago

Hmm, you turn off the Jetpack image resizing when this plugin is on, right?

junaidbhura commented 5 years ago

I think I figured out your problem, there's an image size problem:

https://res.cloudinary.com/rainier-watch/w_600,h_418,c_fill/auto-mapping-folder/2018/08/mockup-e8c2f8c3.jpg

You probably need to use a filter:

add_filter( 'cloudinary_default_soft_crop', function() {
    return 'fit';
} );
austriker27 commented 5 years ago

EDIT: okay, thanks, ill check it out!

EDIT2 : @junaidbhura that goes in my functions.php folder? When I try to add that, it crashes the admin portal site

junaidbhura commented 5 years ago

@austriker27 Yup, that can go in your functions.php file. Adding that filter shouldn't really crash it. Are you sure you are adding it right?

Btw, a future version of this plugin will have this option in the plugin's settings, so you don't have to do it via code.

junaidbhura commented 5 years ago

@austriker27 Ah I see, I missed a quote symbol. I've updated the code - you can try that now ☝

austriker27 commented 5 years ago

@junaidbhura awesome, that works now! That will be awesome when its added to the plugin!