Displaying signed URL images with transformations via PHP

Hello,

I have image uploading & displaying working via pre-signed URL’s directly into / from my R2 bucket.

I’m wanting to add Cloudflare Image Transformations to be able to easily generate different sizes, etc. I’ve searched heavily online but can’t work out how to make it work in PHP.

I tried following the example at this link, although I wasn’t able to work it out:

There doesn’t seem to be any example code anywhere on how to simply display a signed / private image, transfored with Cloudflare Images, with a URL generated from PHP.

Is someone able to please give me a very simple example of an image that’s in an R2 bucket (not in an Images bucket), transformed to say 80px height, 80px width… signed and then simply output to an <img src=" tag in PHP?

Once I can do that, the rest of the transformations are easy, I am just stuck with a distinct lack of any example code from stackoverflow, etc.

Also, do I require a professional plan to be able to use this feature?

I’m more than happy to pay for it, although was hoping to pay for it on a ‘as I use it’ basis, if that’s a thing? It just would be good to see it working & up and running, before committing to a monthly plan, etc… at the minute I can’t get it to output anything.

Any basic PHP docs would be fantastic to get it up and running.
I know PHP is a bit of a dirty word with some developers but it’s still 80% of the internet :slight_smile:

So some implementation code would certainly help a lot of people.

Or is it possible to use the previously generated URL which works displaying the whole unmodified original file (without transformations), then append the transformations to it like a query string parameter…? i.e. https://signedURL/?options=width80px,height80px That kind of thing?

Thank you for your time,
Anthony

As a quick update, I realise that I’m getting 404 errors on the transform requests, because I’m addressing the file by its name not it’s ID number… so it’s not being found in the bucket.

Looking at the PUT requests response from the upload; although they’re successful and working, there is no response in the body… so I am trying to work out how to get the object ID’s… as I don’t seem to be receiving them.

Any tips would be appreciated, this is the upload code:

$.ajax ({
cache: false,
contentType: false,
data: file,
enctype: false,
processData: false,
type: ‘PUT’,
url: preSignedURL,
success: function (d) {
console.log (d); // This response is completely empty, no object ID, success status, etc.

As a little more information, I’m trying to display the images using:

<img src=“https://imagedelivery.net/account/filename/smallThumbs” />

Although the documents seem to reference an Object ID, that looks to be returned when uploading directly to an Images bucket, but I’m coming from an R2 bucket (because I’m not just storing images).

Do I have to use the Object ID or can I use the file name? The file name requires pre-signing as the bucket is not public.

When I use just the file name I get: ERROR 9404, can not fetch the image.
I tried using a pre-signed URL as the source I get: Malformed URL

smallThumbs is a variant that I’ve created and I’m working from my dev environment, so I have Resize from any origin enabled.

Can anyone see how this is supposed to work when the transformation is coming from an R2 bucket that requires a signed URL? (because the files are private)

Thank you for your time.

  1. If you are storing your images in R2, you would not use imagedelivery.net to access your image. imagedelivery.net is only used if you also use the Images product (and not R2) to store.

  2. Given you are storing your image on R2, the way you would resize/optimize is by enabling Image Resizing on your domain. These two links should help:
    Get started · Cloudflare Image Optimization docs and Transform via URL · Cloudflare Image Optimization docs

  3. To your original question about getting an object key, can you share what error you receive when you try to generate a presigned URL for a file stored on R2 when you set the object key to the path/filename? ie. images/hello.jpg if the R2 bucket contains a folder named images with a file called hello.jpg

1 Like

Thank you so much Zaid for getting back to me, that information was incredibly useful.
I managed to finally get it working!

Summary information:

  • imagedelivery.net domain doesn’t apply when using an R2 bucket
  • Object ID only applies to CF Images objects, not R2 bucket objects
  • The source image is the pre-signed URL

The answer for my situation was:
<img src=“https://yourdomain.com/cdn-cgi/image/width=200,height=200/‘.$presignedURL.’” />

The $preSignedURL variable was the same pre-signed variable that you create when referencing the original file directly, without using the Image Transform.

I was mainly missing imagedelivery.net doesn’t apply for R2 buckets; and the source image is the pre-signed URL.

Once again, thank you so much for your help!