How to adjust the image sizes of the Image Picker and Signature

Hi Everyone.

Is there any way to set standard image size for the image picker within Glide? I need all of the images I collect to be the same size (specific to our requirements) so they can be put into reports without any additional work being done on resizing.

As well as the signature option. Can the signature image be resized?

Short answer is no.

When you say these will be put into reports, how will that be done?
I’d probably look at any resizing or other required image manipulation as a part of that process.

3 Likes

What’s the long answer?

1 Like

The long answer depends on your response to my question :wink:

What I’m getting at is that it’s not possible to resize images as they are being uploaded. After that it depends exactly what you’re doing with them. If you’re displaying them in the app, then Glide provides some standard container sizes and various other options.

But you mentioned something about reports. Are these reports that you plan to produce inside the app, or external to the app?

Depending on which, there will be other options available. Cloudinary might be one option, for example. It just depends. Tell me more about the use case, and I might be able to provide some suggestions.

3 Likes

So the reports will be generated through an automation that have been set up. There isn’t anybody creating the report. The images captured by the Image Picker aren’t the end of the world, but I just want to style them differently.

But the image created by the signature is huge. To make it more visually appealing, I would like the signature to be smaller at the end of the document.

The images being displayed in the App work fine, but when I present them in a PDF they aren’t so great.

All reports will external from the app

Okay, generating PDF’s and inserting both images and signatures is something I’ve done a lot of.
You haven’t told me how you’re generating your PDF, but here is how I do it:

  • I start with a GDoc template file, with placeholders for all the text that needs to be replaced
  • Where ever images (including signatures/initials) need to be inserted, I use a table element in the template. This makes it much easier both with positioning, and locating the target for the images.
  • The PDF itself is generated using Apps Script, and this where the images are appropriately sized (Apps Script provides methods for doing that).

Now I don’t know if any of the above is relevant to you, because again I don’t know how you’re generating your PDF’s. But my point is that it’s possible, and whatever method you’re using I’d be surprised if it doesn’t give you options.

4 Likes

So I am doing it in a similar way.

I have the report template save in GDocs with all the relevant placeholders.
Instead of using Apps Script I am using Integromat
The GDoc is then downloaded as a PDF.

But when adding the images to the template, the function is to replace the image, so my template has white images which are replaced by the image links from Glide. But the image doesn’t adopt the properties of the image it is replacing, rather it just cuts of some parts.

Okay.
I’ve never tried this with Integromat, so I can’t say whether or not it’s possible to resize the image - although I’d be surprised if it isn’t.

If Apps Script is out of the question and Integromat can’t do it, then one option may be to pass the images through Cloudinary first, and then feed the resized images to Integromat. You’d probably need to employ a webhook for that, as the resized image URL’s wouldn’t appear in your GSheet.

Anyway, just a thought.

2 Likes

I’ll read more into Cloudinary just to understand it better

I was actually using Apps Script before integromat. The reason why I went with Integromat is that I couldn’t figure out the script to add the images. All of my images were being added to the template as URLs and not as images.

ah, you need to insert it as a blob.

So you might have a helper function that looks like:

function get_image_blob(url) {
  var response = UrlFetchApp.fetch(url);
  var data = response.getBlob();
  return data;
}

You call that passing the image URL as a parameter, and then insert it into a table with something like:

  var sig_blob = get_image_blob(obj.signatures.employee);
  var tables = body.getTables();
  var sig_table = tables[1];
  var row = sig_table.getRow(0);
  row.getCell(1).insertImage(0,sig_blob).setHeight(75).setWidth(200);
3 Likes

This is great! Thank you. I will reopen my script editor and give this a shot

1 Like

Here’s a similar post from a few weeks ago, but it seems like you are really close, if you can get @Darren_Murphy 's script updates to work.

3 Likes