[RFC] Allow Quality and Crop Direction to be configurable

[cdowdy]

Thumbnail quality is currently a "global" value. Whatever is set in config.yml is the thumb quality for every thumb generated by bolt. In many instances this is less than ideal when small thumbnails could be created with a lesser quality.

The crop direction is always 0. You cannot crop in different directions - say from the left or right. There is code for a Point (https://github.com/bolt/bolt-thumbs/blob/master/src/Creator.php#L127-L187) but you can't set any points as an end user.

A Possible addition to thumbs would be to pass in an array with the parameters you want to over ride.

<img src="{{ record.image|thumbnail(100, 100, "c", { crop: [ x-direction, y-direction ],  quality: 60, } ) }} >  

the issue with a crop direction is determining the "focus" or where you want to crop from and getting those dimensions. The "editor" won't necessarily know how to do this but a designer might and a developer could figure out

Examples:
Responsive Images using srcset and lazy-loading the default image src. A low quality placeholder could be generated instead of a "full quality" (80) image. Here is a js library and examples showing a low quality placeholder and lazyload https://github.com/aFarkas/lazysizes#lqipblurry-image-placeholderblur-up-image-technique

<img class="lazyload"  
  sizes="100vw"  
  srcset="thumb-1.jpg 1x, thumb-2.jpg 2x, thumb-3.jpg 3x"  
  src="low-quality-thumb.jpg"  >  <!-- thumb is quality less than 80 --> 

Or using Client Hints and serving a low quality image Example Here using service worker

Art Directed Images (picture element)

<picture>
  <source media="(min-width: 50em)"
    srcset="regular-full-width-thumbnail.jpg">
  <source srcset="small-image-cropped.jpg">
  <img src="medium-sized-thumbnail.jpg" alt="">
</picture>  

Having either of these will go a long way to fully supporting these HTML5 standards. Particularly the picture element since you have to use a bunch of your own custom code currently to use the picture element with bolt thumbs or completely replace bolt's thumbnail package

[bobdenotter]

Hey @cdowdy,

Look at what's happening in #29 and https://github.com/bolt/bolt/pull/5768

Adding a quality per size would surely help with this, already. :-)

What i'd really like eventually is this: https://github.com/jwagner/smartcrop.js/

[cdowdy]

@bobdenotter huh I was so in my own head and writing this RFC I missed the other issue and pull haha. Thanks for the heads up!

[CarsonF]

What do you guys think about Imagine library? Last time I checked it looked like it wouldn't work with our filesystem abstraction, but looking again, it looks fine. This would give a lot more flexibility at a PHP level and could open up to Imagick / Gmagick extensions, not just GD. This still would need a twig / yaml interface for Bolt usage, but at least we would have less code to maintain.

[cdowdy]

@carsonF I'm all for in. In fact I was going to use liip imagine in all my bolt projects because it allows offloading to a CDN (s3 etc), no ddos/server crash from 1000's of files being allowed to be created threat since hmacs are used for URLs

I brought up liip imagine once before since it has all the flysytem, yaml, twig and cache resolvers that work with symfony. It requires on install the framework bundle which if installed into a symfony project you could skip that since liip imagine uses it for http-foundation and I think security (csrf) but that was shot down because of the framework bundle include. I also brought up using the PHP leagues glide library but that uses query strings so that was a no go.

[CarsonF]

no ddos/server crash from 1000's of files being allowed to be created threat since hmacs are used for URLs

Can you link me to that?

offloading to a CDN (s3 etc)

I'm working on this right now for GMO. Want to get this as easy as possible for others to implement. May write a guide once I get the kinks hammered out.

I brought up liip imagine once before since it has all the flysytem, yaml, twig and cache resolvers that work with symfony.

I looked at the bundle too. I think it just did a little more than we were comfortable with. Not to mention the framework bundle part.

I'm open for a rewrite at this point. Alot of this just seems like integration into bolt core, which makes me wonder if it really should be a separate library or not.

[cdowdy]

@carsonF link for liip imagine signer?

If so here it is https://github.com/liip/LiipImagineBundle/blob/1.0/Imagine/Cache/Signer.php

[CarsonF]

Something like that could probably be implemented here too.

[cdowdy]

Gonna close this. I created an extension using Glide (it uses the intervention image library) that signs URLs to prevent server floods etc, variable quality per image, crop direction and focal points, image filters, watermarks, image corrections, can use imagemagick and probably eventually if I get time use S3 and other cdns to offload/store ones images