Automatic image resize in blog post

Hi, noob here.

I installed Grav and so far I'm successfully pushing through. I'm doing my best searching through the internet in finding answers to my problems but there was no luck with my current (and biggest) problem.

Images that I insert into blog posts don't resize automatically at all. The website I'm making will be run by an older lady so any type of manually entering codes is not welcome. It would be perfect if she could just upload an image, press that plus icon to insert the image into the post and that's done.

There's a plugin called Automatic Resize that should be doing just that, but sadly the plugin itself is not working and it's breaking the site. Is there possibly an option to change the function of the + sign in the media section so it adds the image into the post but also adds a code that makes it automatically resize if it's bigger than x or is there some other way?

Thank you.

There is the possibility to set the file name you use in the label called "blog Item", plus its width and height in px (see screenshot)

Of course, It is not like an automatic resizing, but it works pretty well in terms of displaying proper images 😉
Hope this helps!

@ratm, I have no experience with it, but isn't section Pagemedia in the settings of Admin supposed to do that?

See Admin / Plugins / Admin / Extras / Page Media Image Resizer:

The following settings apply to images uploaded through the page media. Resize Width / Height will automatically resize down and proportionally an image if exceeds the limits set in the inputs. Resolution min and max values define the size ranges for uploaded images. Set the fields to 0 to prevent any manipulation.

pagemedia:
  resize_width: 0
  resize_height: 0
  res_min_width: 0
  res_min_height: 0
  res_max_width: 0
  res_max_height: 0
  resize_quality: 0.8

Thank you guys for the suggestions. @maria, I don't have the options that you have in your screenshot. Maybe because of the theme I'm using (Editorial)?

@pamtbaau, I did not know that, thank you, but it's also not an appropriate solution because that resizes the image in a fixed way and it would be the same size on all screens, big monitors and small phones.

I actually found a temporary solution and that's by putting ?width=100% in image code, right after the extension. That way the image automatically resizes depending on the screen, even when resizing the browser window. I was hoping I could put that into css (although don't know where exactly) but then I have a problem of having all the images resized to 100%, even the tiny logo images. So I guess I'd need some code that would say, if image bigger than xx width, put width to 100%. However, I am not that advanced to do that. I was thinking of teaching this person to just add the width code in big images. shrug

Hi @ratm.

Hello.
I'm working on a new version of the Editorial theme, including the option to set the width and height of the featured image on each page (just like the Future2021 theme), which might be what you're looking for.

Meanwhile, you can use this code in your template:

1. In the blueprints/default.yaml file (below header.featured_image, with the same indentation):

   YAMLCopy

   header.image_width:
    type: number
    style: vertical
    Label: Width
    size: small
    default: 1000
   header.image_height:
    type: number
    style: vertical
    label: Height
    size: small
    default: 300
   

2. In template files (*.html.twig) containing {{ image.cropZoom(1000,300).loading('lazy').html(title,title,'')|raw }} in the code, add the following:

{% set img_width = header_var('image_width')|default(1000) %}
{% set img_height = header_var('image_height')|default(300) %}

{# Change this code where it appears #}
{{ image.cropZoom(img_width, img_height).loading('lazy').html(title, title)|raw }}

This is only applicable to the featured image of each page. The width will always be set to 100% (due to the css styles), but with cropZoom the image will be the size indicated in each case (1000x300, by default).

To make the featured image not 100% wide, just make a few changes to the main.css file:

.image.main img {
     width: 100%;
}

changing '100%' to 'auto', so that it adjusts to the cropZoom parameters.

I hope that with these small modifications you can achieve what you are looking for.

Some examples screenshots:

@ratm This setting is not related to the theme you use. To see it you must assign your post to "blog item" in "Advanced" tab (see screenshot)

As you can see, if you scroll the options beside the down arrow, you assign a post to the option "blog Item" or a list of all your post to "blog list"
Once you've done that, you will see the "Blog item" tab with all the settings for width and height of the image

I feel honored to be talking to the author of Editorial theme. :) I will definitely use your guide for featured images because I'm interested in having bigger featured images -- however my problem are images that I insert into the body of a blog post not fitting properly.

Default image upload example.

Basically, I'm looking for a way to automatically scale images that I insert into a blog post that are too big to fit the screen without having to manually insert code into each image so they look like this:

No scrollbars, image is fitting the screen perfectly. Basically the same way featured images work, just for images within the blog post itself.

Thanks a lot so far, I really appreciate it.

Thank you! This will work fine I think. Making it automatic would be a blessing though, but just automatically putting the class after the extension wouldn't be the solution because it would fit every single image, even the ones not needing the fit (a small image for example). Once uploaded, the image should be in its original size and it should start resizing only when it's bigger than the window. I suppose that's what responsive images are for. Sorry, I'm just thinking out loud. I'll keep playing around, thank you for the tips and thank you for the theme itself, I love it!