Site Wide Default Image Processing > More than image quality? Crop?

Support
1

Greetings

New to Grav, and am trying to learn by setting up a blog for my parents.

I just know they’re going to be dropping in massive high res photos in without processing, and there is 0% chance I can teach them the media actions.

To stop massive files being served, I want to be able to set site wide rule to say crop to width of say 1000px.

Is this possible?

A bit like quality in config system.yaml's images > default_image_quailty, but for ratio-respecting width cropping.

Thank you for any help in advance!

2

Hello,

I don’t know about that, but you could define the resize and the quality in your twig file.
Let’s say each post has it’s own set of pictures.

You could write write your twig file to render a list of resized picture that would open a bigger one on click.

Or do you need them to put the photo wherever they want in the posts ?

1 Like
3

Thank you, @AmauryH, but yes, I need a solution that applies anywhere in the post/page.

My parents are 73 and 75 years old, and are non-technical. They will want to drop images into their posts, and because of their cameras etc the images they take are large ~8MB+.

They will not cope with Markdown image actions, and I cannot rely on them to do any processing of the images before uploading.

So I would like to keep it stupidly simple (KISS) for them.

I would like a default settling - like the config quality setting - which sets a maximum image width size when drag & dropping it from their admin.

It is not perfect (an automatic srcset solution would be best), but at least this will stop their pages being a massive - ~40MB+ assuming they do their usual 5 or so images per “dairy” post.

4

THE SOLUTION

TL,DR: To add default/automatic image processing

Edit:-----------user/config/media.yaml

At top on:------types.defaults.image.filters.default

Add item:------ [{youFilter}, {yourValue1}, {yourValue2}]

My example:

types:
  defaults:
    type: file
    thumb: media/thumb.png
    mime: application/octet-stream
    image: 
      filters:
        default:
          - [resize, 1000]  <-- *this is what I added to set widths*
          - enableProgressive <--*this was already there*

Note: I changed structure to my liking.

Before the relevant part looked like this:

types:
  defaults:
    type: file
    thumb: media/thumb.png
    mime: application/octet-stream
    image: 'filters: { default: [enableProgressive] }'

So you could do:

types:
  defaults:
    type: file
    thumb: media/thumb.png
    mime: application/octet-stream
    image: 'filters: { default: [*yourFilterHere*], [enableProgressive] }'
4 Likes