Create small images

Hi,
I’m trying to save in the DB smaller versions (thumbnails) of my users’ profile pics. I can’t seem to find a way to do that without relying on some plugin or API, even though it seems very basic…
Also, I would like that to happen in a workflow :

  1. make a smaller version of a given image (ideally, choose the size in pixels)
  2. save it in the DB in a new field.
    (alternatively, is there a way to access smaller versions of an image with url parameters, like on Unsplash ?)
    Any ideas ? Thanks

Have you checked the option to process with imgix?

Edit: you can try to use “processed with imgix” and then add parameters as per imgix documentation (eg.&w=50&h=50)

Hi @dorilama ! Could you please elaborate ?
I have tried ‘process with imgix’ but the only option that seemed interesting was ‘scale to fit’ but because I’m using it in a workflow, there isn’t an element to reference…

just select processed with imgix, it doesn’t matter if you select or not the options in this operator.
Then after the expression you can add any imgix parameter by writing them like this: &w=50&h=50, they will be appended at the end of the image url.

You need to experiment a bit and see which one is working.
The image needs to be already uploaded on bubble for this to work.

1 Like

Here’s what I tried but it doesn’t seem to be working :

Any ideas ?

This is what I do:
image

but apparently it works only if it’s in an image element, otherwise the resulting url is different.

It looks like in the image instead of requesting the url directly it’s requesting another endpoint with the image url (with imgix parameters) encoded. Something like https://SUBDOMAIN.cloudfront.net/https%3A%2F%2Fs3.amazonaws.com%2Fappforest_uf%2FYOURIMAGEPATH?w=50&h=50

One thing you can try is to use this expression in an image, note the format of the url, then reproduce that format in your workflow and see if it works.

Of course this can break any time bubble changes the way they handle imgix transformations.

It’s probably better if you make an account with imgix and use their api directly.