I need help overlaying a Cloudinary image in another Cloudinary in React

apuente93
apuente93 Member Posts: 2 ✭
in Developer APIs

I'm not sure why I can't figure this out, I've literally tried everything! Overlay isn't working properly for me. Here is my react code:

<Image publicId={publicId}>

<Transformation overlay="v1682478917/youdesignai/noAuthUser/qald4f8keeumoehhei3t" width="70" />

</Image>

very simple right? Here is my URL of the first image: https://res.cloudinary.com/dhygjkoey/image/upload/v1681627748/youdesignai/websiteAssets/alejokpo_a_photo_of_a_model_wearing_a_white_t-shirt._White_t-sh_bccd6d02-baf9-4408-84c0-bf0fdbcdf890.png therefore, I'm using this as my publicId: v1681627748/youdesignai/websiteAssets/alejokpo_a_photo_of_a_model_wearing_a_white_t-shirt._White_t-sh_bccd6d02-baf9-4408-84c0-bf0fdbcdf890 this works fine without any transformation. Same as my other image with URL: https://res.cloudinary.com/dhygjkoey/image/upload/v1682478917/youdesignai/noAuthUser/qald4f8keeumoehhei3t.png when I use this as the publicId: v1682478917/youdesignai/noAuthUser/qald4f8keeumoehhei3t it is displaying the image properly. The issue is when I perform a overlay transformation. I'm tring to put my second image in the middle of my first image or to atleast just be able to see one image on top of the other, but it is not working with the code you see above. I also tried just using the image id as follows:

<Image publicId={publicId}>

<Transformation overlay="qald4f8keeumoehhei3t" width="70" />

</Image>

Since it was mentioned in a forum that I dont need the other extra part. This did not solve my issue, I still get 400 error with the URL generated.


Can someone please help fix this? Or let me know if the images I'm using are not correct? it has been extremely frustrating and based on documentation, I don't see that im doing anything wrong here.

Tagged:

Best Answer

  • tia
    tia Member, Cloudinary Staff Posts: 29
    Answer ✓

    Hi there,

    Thanks for reaching out.

    When I took a look at the image you are overlaying, I saw that it is in a folder. The folder is considered to be part of the public_id, so you need to include that. The full public id of the assets is: youdesignai/noAuthUser/qald4f8keeumoehhei3t

    When the public_id of an overlayed image includes slashes, you will need to replace the slash with a colon. So the syntax for the overlay will be l_youdesignai:noAuthUser:qald4f8keeumoehhei3t

    You can reference the documentation for image overlays here: https://cloudinary.com/documentation/layers#image_overlays

    Can you please make that adjustment and let me know how it goes? If you have any questions, do not hesitate to ask.

    Kind regards,

    Tia

Answers

  • apuente93
    apuente93 Member Posts: 2 ✭
    edited April 2023

    OMG thank you so much!!!!! This fixed the issue. I was banging my head head on the wall for days on this. Should've written a comment earlier

  • tia
    tia Member, Cloudinary Staff Posts: 29

    Hi there,

    My pleasure. That's why we are here 😊

    Kind regards,

    Tia

Categories