Setting image quality per page?

[phil_s]

Hi folks,

I have a responsive portfolio page with lots of image variations (srcset).

Some of the resized images would benefit from less compression (depends on the project though), the rest would be fine with the compression level defined in the template.

Is there a smart way to override the image quality set in a template? Maybe even a way to make it user selectable?

I suppose this could work with repeater fields? Can't wrap my head arround this!

Cheers!

Phil

[LostKobrakai]

To make things work by template or user-selection is something you'd need to implement on your own, but you can set the options per resize call.

$options = array(
  'quality' => 90,
  'upscaling' => false,
  'cropping' => 'southeast'
);
$img = $image->size($x, $y, $options); 

Works with width() / height() as well.

[phil_s]

@LostKobrakai thanks, this is actually what I am doing in the template right now

$options_medimg = array(
	'quality' => 60,
	'upscaling' => false
);
$options_smallimg = array(
	'quality' => 48,
	'upscaling' => false
); 

and then for the srcset: 

...
<img srcset='
{$image->width(1860, $options_largeimg)->url} 1440w,
{$image->width(1600, $options_largeimg)->url} 1280w,
{$image->width(800, $options_medimg)->url} 640w,
{$image->width(480, $options_medimg)->url}  320w'
sizes='(min-width: 1280px) 90vw, 100vw' 
src='{$image->width(320, $options_smallimg)->url}' 
alt='{$image->description}' />
...

Come to think of it, I suppose a simple text field where users enter an "override" quality could work. I would have to add a function to get rid of the previously generated assets for that gallery, but that should be rather easy..

Thanks for helping me think ,)

I'll see that I post code in here once I solve this.

cheers

Phil

[horst]

You also may setup a more comfortable own template only for the options, using a slider for quality, select or radio or asm for sharpening, etc.

And then embedd this template via a pagetable, limited to only one item, into your gallery template. (and reuse it on other templates too.)

This way you give your user a comfortable UI and also minimize wrong values, typos, etc.

For example, you can setup a slider for medium quality with a range only from 50-70, a slider for high quality with a range from 60 - 90, etc.

----

checking if you need drop / recreate variations can be done by hooking into after page save: check if it is a page with your gallery template, check if the field with options has changed, if true, A) removeVariations() of the images field, or B) recreate specified images by onetime passing an additional option "forceNew" => true to the API call.