Trying to overlay PNG images and I am wrong somewhere...

MrFrommelt · May 20

Long story short, I am trying to make a review system where I can overlay PNG's to make custom charts. Here are some examples of the direct URLs:

https://res.cloudinary.com/dlxzju4kg/image/upload/botanist/3Heat.png

https://res.cloudinary.com/dlxzju4kg/image/upload/botanist/1Spice.png

https://res.cloudinary.com/dlxzju4kg/image/upload/botanist/2Floral.png

Now, the problem is when I try to use the overlay command, the URL does not register:

https://res.cloudinary.com/dlxzju4kg/image/upload/botanist/l_3Spice,fl_layer_apply/base.png

I built a blank PNG called base to overlay everything into but I am missing some sort of command or I have not properly set up my images for the overlay to work. I have hunted around and haven't found anything specific so I am looking for any and all pointers to go off of. All images are in a folder. I am new to Cloudinary so I am sure I am missing something important or lacking set-up somewhere.

Michal · May 21

Hi,

Thanks for getting back.

Since the base image is located in a folder, you would need to include the folder in the public_id of the base image as well:

https://res.cloudinary.com/dlxzju4kg/image/upload/l_botanist:3Spice,fl_layer_apply/botanist/base.png

Please let me know if you have any further questions.

Best regards,

Michal

Michal · May 21

Hi,

Thanks for reaching out,

When overlaying an image that is located in a folder you would need to use a colon (:) as the separator (instead of /). So in your case, it would be like this: https://res.cloudinary.com/dlxzju4kg/image/upload/l_botanist:3Spice,fl_layer_apply/base.png

With that said, this URL is returning a 401 error: Transformation l_botanist:3Spice,fl_layer_apply/png is not allowed . Since strict transformations is enabled on your account, you would need to set this transformation as an allowed transformation on the "Transformation Log" page.

You can read more about this here:

https://cloudinary.com/documentation/control_access_to_media#strict_transformations

Please let us know if you need any further assistance,

Best regards,

Michal

MrFrommelt · May 21

https://community.cloudinary.com/discussion/comment/1449#Comment_1449

Alright, so I went through and cleared my strict settings and allowed anything that triggered in the Transformation Log panel. Yet, even when I go back to trying the overlay:

https://res.cloudinary.com/dlxzju4kg/image/upload/l_botanist:3Spice,fl_layer_apply/base.png

I am still getting a 404 error. Is there any other settings or triggers I should dive into to figure out why there is still a viewability error? I am stumped as I can view the images directly:

https://res.cloudinary.com/dlxzju4kg/image/upload/botanist/3Spice.png

https://res.cloudinary.com/dlxzju4kg/image/upload/botanist/base.png

And there isn't a view problem so I am missing something either on the image/cloudinary side or on the URL coding side… Any docs or other support I could dive into would be greatly appreciated!

MrFrommelt · May 21

https://community.cloudinary.com/discussion/comment/1451#Comment_1451

IT WORKS!! Thank you and also a demonstration here:

Now I got to fix the fact some of my elements are off center but Thank You!

Michal · May 22

Nice! Glad this is working for you now.

Please let us know if you have any further questions.

MrFrommelt · May 22

Alright, so I went through and used the following URL:

https://res.cloudinary.com/dlxzju4kg/image/upload/l_botanist:3Spice,fl_layer_apply/base.png

and it went through and triggered on the transformation panel. So I hit allow and then tried to reload and it still hit the 404. I then went through and dug into the settings to turn off the strict settings and attempted to run it again. I am still getting the 404.

Since I uploaded the files directly into Cloudinary, and since there still seems to be a viewability issue, is there some other image command or setting that I am missing in my commands to make the overlays work? I am a little stumped as to how I can view the images following the URL format:

https://res.cloudinary.com/dlxzju4kg/image/upload/botanist/3Spice.png

https://res.cloudinary.com/dlxzju4kg/image/upload/botanist/base.png

Yet I can't get the overlay system right or viewable

SreeCloudinary · May 22

Hi @MrFrommelt ,

Thanks for your respone.

The base.png is contained a folder called "Botanist" in your cloud. As @Michal mentioned, please include the folder name

https://res.cloudinary.com/dlxzju4kg/image/upload/l_botanist:3Spice,fl_layer_apply/Botanist/base.png

I would recommend logging to cloudinary.com and click on Media Library, please check the assets under root and under differnt folders. You will see that the URL structure includes the folder name.

Thanks,

Sree

Trying to overlay PNG images and I am wrong somewhere...

Best Answer

Answers

Categories