Force Aspect Ratio

[eballeste]

Is your feature request related to a problem? Please describe. I was playing around with responsive-pics and noticed that for certain sizes, if the original image is smaller, it will load the original image instead (as noted in the docs).

Describe the solution you'd like I would love to see an option where aspect ratios are respected. So, if flagged, the library will create the largest possible crop that respects the aspect ratio given and load that instead of the original image where it might break a front-end layout that needs the images to follow a certain aspect ratio.

Awesome library and awesome site by the way, thanks ✌️.

[Twansparant]

Hi thanks for using our library! Which version are you currently using? Because I thought this commit had already fulfilled your request? I will have a look when I find some time!

[eballeste]

I installed 0.7.2 yesterday. Maybe I'm doing something wrong?

use ResponsivePics as Pics;

...
$profile->pic = Pics::get( $profile_pic, 'xs: 330 264|c, md: 470 376|c, lg: 610 488|c, xl: 840 672|c', true, true);
...

where I get the correct aspect ratios for mobile but not for the larger breakpoints.

[eballeste]

I tried to test it out using version 1.0.0-beta but now the theme is broken because it's trying to install the library as a wordpress plugin. theme/lib/wp-content/plugins vs theme/lib/vendor in 0.7.2. That kinda sucks.

[Twansparant]

I tried to test it out using version 1.0.0-beta but now the theme is broken because it's trying to install the library as a plugin.

Correct, I need to update the docs when I version 1 is out of beta, because we turned it into a plugin. If you use bedrock, move your composer require to the site’s composer.json and you’re good to go! I would recommend adding it as a muplugin.

[eballeste]

Blegh. Part of my attraction to this library was that it was not a plugin. I'm not using bedrock, I have a /lib folder in my theme directory where I keep all of the composer installed packages. (I am working on a single site/theme that is part of a wordpress multisite install and I don't want to touch anything related to multisite plugins nor having to network activate it in order for the library to work.

I tried following these instructions for trying to override the composer/installers path:

"extra": {
    "installer-paths": {
      "vendor/responsive-pics": ["booreiland/responsive-pics"]
    }
  }

But regardless, composer is not loading/finding the ResponsivePics class.

[Twansparant]

Blegh. Part of my attraction to this library was that it was not a plugin.

I understand, I felt the same but the only way to run the image resizing tasks as a background process (so the server won’t time out) on the server is by using the WP cron or a real cron job and then you basically have to turn it into a plugin.

I am working on a single site/theme that is part of a wordpress multisite install and I don't want to touch anything related to multisite plugins nor having to network activate it in order for the library to work.

MU plugins are not multisite plugins, all my builds are single sites. MU plugin stands for must use plugins. So you don’t have to manually activate them in the admin.

[eballeste]

thanks for the clarification on why it needs to be a plugin.

[eballeste]

I was looking through the code and figured out that the aspect ratio will be enforced only when you specify a factor value instead of an explicit height.

Instead of

$profile->pic = Pics::get( $profile_pic, 'xs: 330 264|c, md: 470 376|c, lg: 610 488|c, xl: 840 672|c', true, true);

I did:

$profile->pic = Pics::get( $profile_pic, 'xs:330/0.8|c, md:470/0.8|c, lg:610/0.8|c, xl:840/0.8|c', true, true);

This worked for some but not all images, where i noticed that sometimes the new cropped height is taller than the available height from the original image. #4 makes adjustments if this happens to enforce the right aspect ratio.