How to change default white background of resized images to other color?

1

Hi!

The docs says that there’s is possible to change the default white background of auto generated resized images (JPG) to other color as an option. But there’s no info how to do that. So I have a code like this:

<img alt="{{ zdj.alt|raw }}" title="{{ zdj.alt|raw }}" 
            src="{{ page.find('/images').media[zdj.foto].resize(720).quality(73).url }}"  
            srcset="
            {{ page.find('/images').media[zdj.foto].resize(360).quality(75).url }} 360w,
            {{ page.find('/images').media[zdj.foto].resize(720).quality(73).url }} 720w,
            {{ page.find('/images').media[zdj.foto].resize(960).quality(72).url }} 960w
            " loading="lazy" width="{{ page.find('/images').media[zdj.foto].width }}" height="{{ page.find('/images').media[zdj.foto].height }}">

My images have to be resized based on the width, but I have plenty of images in portrait orientation that have too little width to match the requirements, so that I get white background on both sides. That’s how it looks like.

miniaturki
miniaturki1680×843 117 KB

I’d like to change the background added to images to darker. How can I do that as there’s no background() method? It would be even better if I could change that globally for the whole site.

Is it possible? Thanx in advance!

2

When the width of your portrait images is less than the width of the HTML columns they are placed in then the white you see is not part of the image. Instead it is the background color of it’s container div or table cell. I guess.

3

Nope. It IS the image. And I accept it works that way. I only can’t accept the default white color that is used to add the remaining pixels that are required to match the min width requirement. I want that white color to be changed e.g. to black, and it’s a server side issue. There’s info in the docs that it is possible with resize(), but it doesn’t say how to do it. I’m not a programmer, I’m rather old style webmaster, so I don’t know how to do it.
There’s object-fit applied to all images in the grid to avoid problems with different height. I have most of the images in good enough width resolution, but some are too old and there are no raw files.

4

It seems we’re in the same boat as I’m not a developer too. That being said I’ve learned ways to learn about Grav’s internal workings.

When I’m working with Grav I open the Grav root folder in Visual Studio Code (VSC). Using the Search option in the most left pane of VSC in this case I searched for “background”. VSC lists all ‘hits’ in all files in the file tree of the folder including all of Grav core code.
You can filter by file type like ‘*.php’ or ‘*.js’ and include or exclude subfolders.

That search didn’t seem to get me anywhere so I searched for “resize” in PHP files only. After examing the code of some of the suggested files the results in the file ImageMediaTrait.php caught my attention. In that file there is a list of (possibly?) supported image actions:

/** @var array */
public static $magic_actions = [
    'resize', 'forceResize', 'cropResize', 'crop', 'zoomCrop',
    'negate', 'brightness', 'contrast', 'grayscale', 'emboss',
    'smooth', 'sharp', 'edge', 'colorize', 'sepia', 'enableProgressive',
    'rotate', 'flip', 'fixOrientation', 'gaussianBlur', 'format', 'create', 'fill', 'merge'
];

There is no “background” action or anything similar in that list except maybe “fill”.

A quick test with:

![Sample Image](IMG_2015-04-25.jpg?resize=600,200&fill=0xff0000)

made me smile however just for a short moment. It appears only the left “blank” part of the image gets coloured red but the right part remains white. Duh.
This must be a bug.

1 Like
5

Thank you! I had to use a workaround by changing resize() to forceResize() but it’s still looks better than before as images are scaled down so still look sharp.
You saved me a lot of time anyway, because I realized the way I wanted it to work is pointless. I made it finally to work with fill(‘0xff0000’). [apostrophes are required in this case], but I also got only the proper fill on the left side, with the right side still white.

Thank you again for your assistance!

6

@bleutzinn,

I’ve just read the docs on Resize:

Resizing does exactly what you would expect it to do. resize lets you create a new image based on the width and the height . The aspect ratio is maintained and the new image will contain blank areas in the color of the optional background color provided as a hex value , e.g. 0xffffff . The background parameter is optional, and if not provided will default to transparent if the image is a PNG, or white if it is a JPEG.

I then added the following snippets to page Typography of a fresh Grav installation. Note the use of the optional background parameter:

![My Image](image.jpg?resize=300,100,0xFF0000)
![My Image](image.jpg?resize=100,300,0x0000FF)

The results are as follows:
Untitled

NB, you’ve searched in the wrong place. All image manipulation is done by Gregwar, which library is located in /vendor

2 Likes
7

@anon76427325 Grav and you never stop to amaze me.

This is good news specially for the OP @blazejs

I’ll make a PR for the documentation about the use of the (unnamed) background parameter when resizing images.

A big thank you!

2 Likes