Image processor options - create square images

It would be useful if an additional option were added to the Resize Image action step - to create square images, with the option of selecting a background colour. As far as I can see, there isn’t such an option.

(I though the Tiled Image might do this, but it just chopped the image in half - I’m not sure what it’s used for.)

What about using crop with same height/width?


Yeah I think setting same width/height will do what you need?

Thanks - that was a clever idea. I hadn’t thought of that. As the images might be landscape or portrait, I had to determine that and use a condition with two resize methods, but that worked fine.

The only problem is that the background colour is black - ie the extra area created by making the rectangular image square. I had a look at the code, and I think it should be transparent which would be good. I tried saving it as a .png file but that didn’t help. I tried started with .png file and that didn’t help either.

I would have thought the crop feature needs an option to choose the background colour, unless I’ve overlooked something.

We do also use some conditions to determine the best option to crop portrait/landscape images. Just to avoid bad cropping of high resolution images.

Have you had the issue of the background colour? I tried editing processor.php as below, but obviously incorrectly. Unfortunately square images with black as a background colour won’t be useable.

// imagefill($image, 0, 0, $this->transparent());
$white = imagecolorallocate($image, 255, 255, 255);
imagefill($image, 0, 0, $white);

What exactly are trying to do? If the image is square, why/where do you need a background?

The image starts off rectangular. If it’s first resized - eg down to 600x400px - it will end up at 600x600px when it’s ‘cropped’ to make it square. The extra area created by this operation is black. Most often, I would want it to be white or transparent, but it would be good to be able to choose.

Why do you cut-off content?

What we do is checking what is smaller height or width. Then we use the smaller value for crop, so we never have empty content on square images.

Then some of the content would be lost. Using the higher value means no content is lost - but there will be extra space which needs filling.

Here’s an example. On the left is the original image. What I am trying to achieve is the next image. Using Wappler to make the image square, I get the third image - with the black background. As far as I can see, there is no way to control this colour.

Ah, I see :slight_smile:

Is there any additional reason why the image must be square? Can’t you just center the image on the page and set the background there?

There are quite a few cases I’ve come across where having square images helps get a better layout result. A results page including thumbnail images is an example.

Eg in the example below, images like the top one were originally cropped to the content area and therefore appeared huge - proportionally much large than the relatively square image below (filling the available width). Now, both images are square (with white space added) so look as they should. In this case (a few years ago - before Wappler) I explained to the owner of the site how to make square images - before uploading them. I was wondering if I could build this into the upload process, using Wappler. I almost can…

Not sure if it helps, but you could try the imagealphablending function to see if it fixes the transparency.

$image = imagecreatetruecolor($width, $height);
imagealphablending($image, true);
imagefill($image, 0, 0, $this->transparent());

Thanks Patrick. Unfortunately that didn’t help. The image was originally a JPEG - I saved it as a PNG file in the final step of the server action.

I think the Wappler team is going to be adding Croppie type functionality soon, and that will certainly help your issue quite a bit, It is going to save us from trying to add conditions to work out portrait / landscape pics, and avoid the problems I sometimes hit when the aspect ratio my client uploads does not fit into any of my conditions, as far as I could tell there were also options to adjust the “fillColor” that will allow you to change the default black to white or any other colour you need.

Thanks Paul. Something like Croppie would be a great addition, but I imagine this will be for editing indivual images. I expect it might not be useful for batch-processing images.

1 Like

Tom, I’ve voted for this and my suggestion is not much help for built in Wappler functionality but as I posted in another thread Gumlet will do this for you and enable you to set a background colour but it is at an additional cost though which you might not want to incur.

1 Like

Gumlet seems to be like the engine I assume cloudinary uses, which if you look at the cost of gumlet is far cheaper long term than cloudinary, i use cloudinary on my website and it gave a vast SEO improvement, considering I have almost no control over the development of the site and am more on an advisory capacity, this took page load size from a pathetic 17mb to about 5mb which is still way to big in my opinion, but thats another rant in itself.


Thanks Max. I saw your suggestion about Gumlet and it looks very interesting - and reasonably priced.

As it is, I create any different image sizes I need dynamically, using .htaccess and PHP. They’re created the first time they’re requested and then cached. If I need to change a size or create a new one, I just add a line in .htaccess. Obviousy this is pretty basic compared to what Gumlet offers and it doesn’t create WebP format etc. I’m not sure what options there will be with NodeJS.

1 Like