Issue with certain aspect ratios

  • Resolved TheHungryGeek

    (@thehungrygeek)


    8 years, 6 months ago

    Hi Stefan,

    I have an issue with certain images from a previous theme using the portrait aspect ratio (usually most of my photos are landscape dimensions).

    Here is the debug:

    <!--
### RWP Debug ###
Attachment ID: 549
Image sizes: thumbnail, medium, medium_large, large, tc-grid-full, tc-grid, tc-thumb, slider-full, slider, fpc-size, full
Image width: 1536
Image height: 2048
Image sizes found: thumbnail, medium, medium_large, large, tc-grid-full, tc-grid, tc-thumb, slider-full, slider, fpc-size, full
Images found:
- thumbnail: https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited-216x160.jpg,
- medium: https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited-225x300.jpg,
- medium_large: https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited-768x1024.jpg,
- large: https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited-768x1024.jpg,
- tc-grid-full: https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited-1170x350.jpg,
- tc-grid: https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited-570x350.jpg,
- tc-thumb: https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited-270x250.jpg,
- slider-full: https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited-1536x500.jpg,
- slider: https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited-1170x500.jpg,
- fpc-size: https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited-270x250.jpg,
- full: https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited.jpg
Largest size that should be used: https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited-768x1024.jpg
Media queries:
- Use medium when min-width: 216px,
- Use tc-grid when min-width: 225px
-->
<img srcset="https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited-216x160.jpg 216w, https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited-225x300.jpg 225w, https://**removed**.com/wp-content/uploads/2015/12/CIMG4008edited-570x350.jpg 570w" sizes="(min-width: 225px) 570px, (min-width: 216px) 225px, 216px" class="wp-image-549 " rel="tc-fancybox-group450" alt="australia dairy company scramble egg toast - **removed** hk day 3" width="649" height="865">

    Any ideas for a fix?

    https://www.ads-software.com/plugins/responsify-wp/

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author stefanledin

    (@stefanledin)

    Hi HungryGeek!

    I added your image sizes in the following way:

    add_image_size( 'tc-grid-full', 1170, 350, false );
add_image_size( 'tc-grid', 570, 350, false );
add_image_size( 'tc-thumb', 270, 250, false );
add_image_size( 'slider-full', 1536, 500, false );
add_image_size( 'slider', 1170, 500, false );
add_image_size( 'fpc-size', 270, 250, false );

    I set Thumbnail to 216×160, Medium to 225×300 and Large to 768×1024.

    This is the output:

    <!--
### RWP Debug ###
Attachment ID: 13
Image sizes: thumbnail, medium, medium_large, large, tc-grid-full, tc-grid, tc-thumb, slider-full, slider, fpc-size, full
Image width: 1920
Image height: 1080
Image sizes found: thumbnail, medium, medium_large, large, tc-grid-full, tc-grid, tc-thumb, slider-full, slider, fpc-size, full
Images found:
- thumbnail: https://rwp.dev/wp-content/uploads/2016/05/559859-216x160.jpg,
- medium: https://rwp.dev/wp-content/uploads/2016/05/559859-225x127.jpg,
- medium_large: https://rwp.dev/wp-content/uploads/2016/05/559859-728x410.jpg,
- large: https://rwp.dev/wp-content/uploads/2016/05/559859-768x432.jpg,
- tc-grid-full: https://rwp.dev/wp-content/uploads/2016/05/559859-622x350.jpg,
- tc-grid: https://rwp.dev/wp-content/uploads/2016/05/559859-570x321.jpg,
- tc-thumb: https://rwp.dev/wp-content/uploads/2016/05/559859-270x152.jpg,
- slider-full: https://rwp.dev/wp-content/uploads/2016/05/559859-889x500.jpg,
- slider: https://rwp.dev/wp-content/uploads/2016/05/559859-889x500.jpg,
- fpc-size: https://rwp.dev/wp-content/uploads/2016/05/559859-270x152.jpg,
- full: https://rwp.dev/wp-content/uploads/2016/05/559859.jpg
Largest size that should be used: https://rwp.dev/wp-content/uploads/2016/05/559859.jpg
Media queries:
- Use medium when min-width: 216px,
- Use fpc-size when min-width: 225px,
- Use tc-thumb when min-width: 270px,
- Use tc-grid when min-width: 270px,
- Use tc-grid-full when min-width: 570px,
- Use medium_large when min-width: 622px,
- Use large when min-width: 728px,
- Use slider when min-width: 768px,
- Use slider-full when min-width: 889px,
- Use full when min-width: 889px
-->
<img srcset="https://rwp.dev/wp-content/uploads/2016/05/559859-216x160.jpg 216w, https://rwp.dev/wp-content/uploads/2016/05/559859-225x127.jpg 225w, https://rwp.dev/wp-content/uploads/2016/05/559859-270x152.jpg 270w, https://rwp.dev/wp-content/uploads/2016/05/559859-270x152.jpg 270w, https://rwp.dev/wp-content/uploads/2016/05/559859-570x321.jpg 570w, https://rwp.dev/wp-content/uploads/2016/05/559859-622x350.jpg 622w, https://rwp.dev/wp-content/uploads/2016/05/559859-728x410.jpg 728w, https://rwp.dev/wp-content/uploads/2016/05/559859-768x432.jpg 768w, https://rwp.dev/wp-content/uploads/2016/05/559859-889x500.jpg 889w, https://rwp.dev/wp-content/uploads/2016/05/559859-889x500.jpg 889w, https://rwp.dev/wp-content/uploads/2016/05/559859.jpg 1920w" sizes="(min-width: 889px) 1920px, (min-width: 889px) 889px, (min-width: 768px) 889px, (min-width: 728px) 768px, (min-width: 622px) 728px, (min-width: 570px) 622px, (min-width: 270px) 570px, (min-width: 270px) 270px, (min-width: 225px) 270px, (min-width: 216px) 225px, 216px" class="alignnone size-full wp-image-13" alt="559859">

    It looks fine to me?

    Thread Starter TheHungryGeek

    (@thehungrygeek)

    These are my image sizes:

    thumbnail - 216x160
medium - 300x300
large - 1024x1024
tc-grid-full - 1170x350
tc-grid - 570x350
tc-thumb - 270x250
slider-full - 9999x500
slider - 1170x500
fpc-size - 270x250

    Interestingly the plugin detects the medium-large and large sizes as the same image.

    Try testing it out on an image with these exact dimensions:

    Image width: 1536
Image height: 2048

    Because when the width and height is flipped, it works perfectly fine.

    As for RWP settings, I have set only the following image sizes to be used:

    thumbnail - 216x160
medium - 300x300
large - 1024x1024
tc-grid - 570x350
slider-full - 9999x500
slider - 1170x500
full

    Basically I excluded medium_large (my theme does not support that size afaik), tc-grid-full, tc-thumb and fpc-size.

    This bug affects every image with 1536×2048, but works fine for all the images at 2048×1536.

    Plugin Author stefanledin

    (@stefanledin)

    Okey, now we have the exact same settings. This is my output:

    <!--
### RWP Debug ###
Attachment ID: 16
Image sizes: thumbnail, medium, medium_large, large, tc-grid-full, tc-grid, tc-thumb, slider-full, slider, fpc-size, full
Image width: 1536
Image height: 2048
Image sizes found: thumbnail, medium, large, tc-grid-full, tc-grid, tc-thumb, slider-full, slider, fpc-size, full
Images found:
- thumbnail: https://rwp.dev/wp-content/uploads/2016/05/test-216x160.jpg,
- medium: https://rwp.dev/wp-content/uploads/2016/05/test-225x300.jpg,
- large: https://rwp.dev/wp-content/uploads/2016/05/test-768x1024.jpg,
- tc-grid-full: https://rwp.dev/wp-content/uploads/2016/05/test-263x350.jpg,
- tc-grid: https://rwp.dev/wp-content/uploads/2016/05/test-263x350.jpg,
- tc-thumb: https://rwp.dev/wp-content/uploads/2016/05/test-188x250.jpg,
- slider-full: https://rwp.dev/wp-content/uploads/2016/05/test-375x500.jpg,
- slider: https://rwp.dev/wp-content/uploads/2016/05/test-375x500.jpg,
- fpc-size: https://rwp.dev/wp-content/uploads/2016/05/test-188x250.jpg,
- full: https://rwp.dev/wp-content/uploads/2016/05/test.jpg
Largest size that should be used: https://rwp.dev/wp-content/uploads/2016/05/test.jpg
Media queries:
- Use medium when min-width: 216px,
- Use tc-grid when min-width: 225px,
- Use slider-full when min-width: 263px,
- Use slider when min-width: 375px,
- Use large when min-width: 375px,
- Use full when min-width: 768px
-->
<img srcset="https://rwp.dev/wp-content/uploads/2016/05/test-216x160.jpg 216w, https://rwp.dev/wp-content/uploads/2016/05/test-225x300.jpg 225w, https://rwp.dev/wp-content/uploads/2016/05/test-263x350.jpg 263w, https://rwp.dev/wp-content/uploads/2016/05/test-375x500.jpg 375w, https://rwp.dev/wp-content/uploads/2016/05/test-375x500.jpg 375w, https://rwp.dev/wp-content/uploads/2016/05/test-768x1024.jpg 768w, https://rwp.dev/wp-content/uploads/2016/05/test.jpg 1536w" sizes="(min-width: 768px) 1536px, (min-width: 375px) 768px, (min-width: 375px) 375px, (min-width: 263px) 375px, (min-width: 225px) 263px, (min-width: 216px) 225px, 216px" class="alignnone size-full wp-image-16" alt="test">

    Still looks fine?

    Thread Starter TheHungryGeek

    (@thehungrygeek)

    Hmm, the dimensions of your image sizes don’t match up with mine, e.g. you have 188×250, I have 270×250 for tc-thumb. Could this be a theme issue? The smaller images (i.e. images for the theme) for mine are obviously cropped in some manner automatically.

    Do you have any idea what could be causing this? I’ve had to disable your plugin for ‘Content’ temporarily for now. Sigh wish I had more time to troubleshoot this.

    Plugin Author stefanledin

    (@stefanledin)

    It could very well be something with the theme. Which one are you using? Any difference if you switch to Twentysixteen or any of those?
    I’m using a very minimal starter theme that’s only looping out posts with plain HTML.

    Thread Starter TheHungryGeek

    (@thehungrygeek)

    I’m not inclined to switch themes to troubleshoot here – last time I switched themes it broke stuff when I switched back and I wasted 4hrs of work lol.

    I’m currently using Customizr-pro, but I would think that the free Customizr would be near identical for our purposes.

    https://www.ads-software.com/themes/customizr/

    Plugin Author stefanledin

    (@stefanledin)

    Haha, sounds like fun! ??

    Okey, I’ve done the following now:

    1. Installed latest WP.
    2. Installed RWP and the Customizr theme
    3. Changed the thumbnail size to 216×160. All the others seemed to match yours? (Here’s a screenshot)
    4. Created a new, empty page and uploaded an image which is 1536x2048px.
    5. In the RWP settings, I selected thumbnail, medium, large, tc-grid, slider-full, slider and full.

    Here’s a screenshot of the page. (The whole image is blue).

    Debug:

    <!--
### RWP Debug ###
Attachment ID: 6
Image sizes: thumbnail, medium, medium_large, large, tc-grid-full, tc-grid, tc-thumb, slider-full, slider, full
Image width: 1536
Image height: 2048
Image sizes found: thumbnail, medium, large, tc-grid-full, tc-grid, tc-thumb, slider-full, slider, full
Images found:
- thumbnail: https://test.wp/wp-content/uploads/2016/05/test-216x160.jpg,
- medium: https://test.wp/wp-content/uploads/2016/05/test-225x300.jpg,
- large: https://test.wp/wp-content/uploads/2016/05/test-768x1024.jpg,
- tc-grid-full: https://test.wp/wp-content/uploads/2016/05/test-1170x350.jpg,
- tc-grid: https://test.wp/wp-content/uploads/2016/05/test-570x350.jpg,
- tc-thumb: https://test.wp/wp-content/uploads/2016/05/test-270x250.jpg,
- slider-full: https://test.wp/wp-content/uploads/2016/05/test-1536x500.jpg,
- slider: https://test.wp/wp-content/uploads/2016/05/test-1170x500.jpg,
- full: https://test.wp/wp-content/uploads/2016/05/test.jpg
Largest size that should be used: https://test.wp/wp-content/uploads/2016/05/test.jpg
Media queries:
- Use medium when min-width: 216px,
- Use tc-grid when min-width: 225px,
- Use large when min-width: 570px,
- Use slider when min-width: 768px,
- Use slider-full when min-width: 1170px,
- Use full when min-width: 1536px
-->
<img srcset="https://test.wp/wp-content/uploads/2016/05/test-216x160.jpg 216w, https://test.wp/wp-content/uploads/2016/05/test-225x300.jpg 225w, https://test.wp/wp-content/uploads/2016/05/test-570x350.jpg 570w, https://test.wp/wp-content/uploads/2016/05/test-768x1024.jpg 768w, https://test.wp/wp-content/uploads/2016/05/test-1170x500.jpg 1170w, https://test.wp/wp-content/uploads/2016/05/test-1536x500.jpg 1536w, https://test.wp/wp-content/uploads/2016/05/test.jpg 1536w" sizes="(min-width: 1536px) 1536px, (min-width: 1170px) 1536px, (min-width: 768px) 1170px, (min-width: 570px) 768px, (min-width: 225px) 570px, (min-width: 216px) 225px, 216px" class="alignnone size-full wp-image-6" alt="test" width="1536" height="2048">
    Thread Starter TheHungryGeek

    (@thehungrygeek)

    Oh well looks like a plugin compatibility issue then?

    Here’s my screenshot

    Plugin Author stefanledin

    (@stefanledin)

    Oh, so the problem is that the images is croped? That was the default setting for all image sizes, so that’s expected.

    Thread Starter TheHungryGeek

    (@thehungrygeek)

    Its supposed to be cropped at the 570x350px, which is completely fine as it is used for thumbnails.

    But the srcset is supposed to include up to the large image size, as you can see the large image is portrait size format and is not cropped.

    As you can see, the ‘Largest size that should be used’ is correct showing the large size, but the ‘media queries’ does not include it.

    Plugin Author stefanledin

    (@stefanledin)

    Okey I think I understand now. Large is excluded since it’s exactly the same as medium_large. There’s a conflict between them.

    Thread Starter TheHungryGeek

    (@thehungrygeek)

    YES! Haha. So I selected medium-large in the plugin settings and its fixed.

    Is it an issue since my theme doesn’t produce the medium-large size? I selected a non-existent image size in the RWP settings – hope that doesn’t break something else.

    Plugin Author stefanledin

    (@stefanledin)

    Great! ??
    The medium-large size was really confusing. I didn’t get where it came from?
    Anyway, since medium-large and large had the same size (and URL), RWP couldn’t see the difference between them.

    Thread Starter TheHungryGeek

    (@thehungrygeek)

    WordPress added the medium-large size a few versions ago – apparently to enhance responsiveness lol. From what I’ve seen it will only affect new installations with themes that support that image size. Not too good for food blogs like mine where we may have thousands of images.

    My media settings does not show the medium-large image size – not sure why RWP is detecting it though? I’ve never had the medium-large size activated on my site.

    Plugin Author stefanledin

    (@stefanledin)

    Oh, I didn’t knew that actually. I’m always using a basic starter theme, so I guess that explains why I’ve never seen it ??
    You could always regenerate thumbnails, or is your media library to large?

    RWP uses the get_intermediate_image_sizes() function to fetch all image sizes. If you look at the source code for the function, medium_large is included as one of the default sizes now.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Issue with certain aspect ratios’ is closed to new replies.