Remote image with overlay

Rodrigo Almeida

April 03, 2022 21:00 Edited

Hi guys, I'm trying to use an remote image as overlay with text and background image.
I'm feeling I'm almost there, but I can't get the image from URL

Below is the exact thing that I want to do, but instead the purple girl picture, I want to use an url image. Replace the bold for the url

https://res.cloudinary.com/dkjohrieh/image/upload/l_text:Montserrat_70_bold:John%0DSmith,y_200/c_thumb,h_690,l_CRACHA-BRIG3_nbrkko.jpg,r_30,w_690,y_-290/v1648844782/JA%CC%81_SOU_ALUNA_-_1080X1920__qrz1lr.png

I tried with fecth command, but didn't work. You guys have an idea what I can do it for fix it?

0

• 

  Eric Pasos

  April 04, 2022 02:56

  Hi Rodrigo,

  You will need to use the remote image fetch overlay feature in order to achieve this (see https://cloudinary.com/documentation/layers#remote_image_overlays), which can be done by using the l_fetch:<base64encoded_URL> transformation (also, as described in this link). For example, overlaying https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png to a base image:

  Base64:

  aHR0cHM6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy8xLzEzL0JlbmVkaWN0X0N1bWJlcmJhdGNoXzIwMTEucG5n

  Transformation:

  https://res.cloudinary.com/demo/image/upload/l_fetch:aHR0cHM6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy8xLzEzL0JlbmVkaWN0X0N1bWJlcmJhdGNoXzIwMTEucG5n/samples/sample.jpg

  And you may need to allow this kind of transformation by adjusting the security settings of your account (i.e., by unchecking the Fetched URL from the Restricted media types).

  Hope this helps.

  0
• 

  Rodrigo Almeida

  April 05, 2022 22:24

  Thank you Eric, 

  It works perfectly with your example
  
  https://res.cloudinary.com/dkjohrieh/image/upload/l_fetch:aHR0cHM6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy8xLzEzL0JlbmVkaWN0X0N1bWJlcmJhdGNoXzIwMTEucG5n,c_thumb,h_690,r_30,w_690,y_-290/l_text:Montserrat_70_bold:John%0DSmith,y_200/v1648844782/JA%CC%81_SOU_ALUNA_-_1080X1920__qrz1lr.png
  
  But when I tried to convert my own URL, I get error. 
  
  This is the orignal image URL
  I also tried to change the / for %3F, and get the same error.
  
  https://pps.whatsapp.net/v/t61.24694-24/65293377_482477222579844_699030236938895360_n.jpg%3Fccb=11-4&oh=01_AVygUa7IFiygn2oB1-75Jm1Vz_kxwPG3hASLoYuGx7ggbg&oe=6253184B
  
  The base64 conversion
  aHR0cHM6Ly9wcHMud2hhdHNhcHAubmV0L3YvdDYxLjI0Njk0LTI0LzY1MjkzMzc3XzQ4MjQ3NzIyMjU3OTg0NF82OTkwMzAyMzY5Mzg4OTUzNjBfbi5qcGc/Y2NiPTExLTQmb2g9MDFfQVZ5Z1VhN0lGaXlnbjJvQjEtNzVKbTFWel9reHdQRzNoQVNMb1l1R3g3Z2diZyZvZT02MjUzMTg0Qg==
  
  
  

  0
• 

  Eric Pasos

  April 06, 2022 05:58

  Hi Rodrigo,

  The base64 you have provided contains a "/" which affects the delivery URL, and it needs to be replaced by "_" as described in this link. For example:

  https://res.cloudinary.com/dkjohrieh/image/upload/l_fetch:aHR0cHM6Ly9wcHMud2hhdHNhcHAubmV0L3YvdDYxLjI0Njk0LTI0LzY1MjkzMzc3XzQ4MjQ3NzIyMjU3OTg0NF82OTkwMzAyMzY5Mzg4OTUzNjBfbi5qcGc_Y2NiPTExLTQmb2g9MDFfQVZ5Z1VhN0lGaXlnbjJvQjEtNzVKbTFWel9reHdQRzNoQVNMb1l1R3g3Z2diZyZvZT02MjUzMTg0Qg==,c_thumb,h_690,r_30,w_690,y_-290/l_text:Montserrat_70_bold:John%0DSmith,y_200/v1648844782/JA%CC%81_SOU_ALUNA_-_1080X1920__qrz1lr.png

  Hope this helps.

  0
• 

  Rodrigo Almeida

  April 06, 2022 10:46

  If helps?? It saves my day!!!!
  Thank you so much Eric

  0

Post is closed for comments.