Jump to content

Setting image quality per page?


phil_s
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...