Overlay capabilities?

Kent C. Dodds

July 09, 2021 20:20

Hi there! I'd just like to know whether this kind of transformation is possible.

Here's the input image:

And I'd like to add transforms to get this output:

 

Would that be possible with cloudinary transforms?

0

• Official comment

  

  Akshay Joshi

  September 20, 2021 21:53

  Hi Kent,

  You can specify the size of the font that you are using 

  For example https://res.cloudinary.com/demo/image/upload/l_text:Arial_24_bold:Dynamic%20style/site_bg_bright_small.jpg

  Also, You can use the gravity parameter (g in URLs) to place your text in different areas of the image. In addition, you can add the x and y parameters for even more accurate positioning.

  For example, using the default text placing (center):
  http://res.cloudinary.com/demo/image/upload/w_200,h_170,c_fill,g_face/l_text:dark_name/face_center.jpg

  And here's a sample of changing the text's location to the south-east corner, with a 5 pixels offset (for both 'x' and 'y'):
  http://res.cloudinary.com/demo/image/upload/w_200,h_170,c_fill,g_face/l_text:dark_name,g_south_east,x_5,y_5/face_center.jpg

  For more information:
  http://cloudinary.com/blog/adding_watermarks_credits_badges_and_text_overlays_to_images
• 

  Aleksandar Kostadinov

  July 10, 2021 13:48

  Hi Kent,

  Sure, that should definitely be possible to create via Cloudinary.

  For example -
  https://res.cloudinary.com/kostadinov/image/upload/$th_628,$tw_1200/h_$th/l_jceijys6ppyaasbhbbdy,h_$th,fl_cutter/b_white,c_pad,g_east,w_$tw,h_$th/c_fit,l_text:Helvetica_65_bold:Alex%20Anderson%20Creates%20Web-Based%20Spaceship%20Controls,g_north_west,x_70,y_70,w_$tw_sub_$th/l_text:Helvetica_45_bold:Chats%20with%20Kent,w_$tw_sub_$th,c_fit,g_south_west,x_70,y_70/f_auto,q_auto/whlqlynjcslyhgml0zxy.png

  Details:

  • $th_628,$tw_1200 - First I create some variables called $th (target height) and $tw (target width) and give them values that I can reuse later on.
  • h_$th - I resize the starting base image (whlqlynjcslyhgml0zxy) to 628px.
  • l_jceijys6ppyaasbhbbdy,h_$th,fl_cutter - Before starting this I had created a black and transparent image of the shape of the cutout (https://res.cloudinary.com/kostadinov/image/upload/jceijys6ppyaasbhbbdy.png) that we want to achieve and here I'm adding that as an overlay over the base image (l_jceijys6ppyaasbhbbdy). The fl_cutter flag then trims all parts of the base image that are covered with the transparent parts of the overlay. I also include h_$th so that the shape fits the target height we want.
  • b_white,c_pad,g_east,w_$tw,h_$th - Here it's creating a canvas of size 1200x628 and using c_pad it expands the canvas to those dimensions while b_white allows us to fill the extra space with a white background. g_east moves the based image to the right-hand side of the newly sized image rather than the center which is by default.
  • c_fit,l_text:Helvetica_65_bold:Alex%20Anderson%20Creates%20Web-Based%20Spaceship%20Controls,g_north_west,x_70,y_70,w_$tw_sub_$th - We then create the text overlay with the required content, position it in the top-left corner (g_north_east). Then I add some padding from the corners by moving it 70px right and down (x/y). The w_$tw_sub_$th sets the width of the text overlay to be the value of $th (1200) minus the $th (628) so that the text doesn't end up overflowing into the base image.
  • l_text:Helvetica_45_bold:Chats%20with%20Kent,w_$tw_sub_$th,c_fit,g_south_west,x_70,y_70 - We add the second text overlay but position it bottom left (g_south_west) and then move it 70px right and up to give it padding.
  • f_auto,q_auto - Apply Cloudinary's automatic format and automatic quality transformations.

  Of course, you can tweak the font, size, positioning and any other parts of the transformations as required but that should give you a starting point. We support many of the standard fonts out of the box but you can also upload your own custom fonts to be used in transformations too - https://cloudinary.com/documentation/layers#custom_fonts

  If you have any questions or run into issues please let us know.

  0
• 

  Kent C. Dodds

  July 11, 2021 01:15

  That's truly incredible. Thank you for taking the time to create that and show how you did it. Did you use some sort of generator or are you just a cloudinary wiz? 😅

  0
• 

  Kent C. Dodds

  July 11, 2021 01:20

  One other thing, what if the original image is not hosted on cloudinary? For example: https://image.simplecastcdn.com/images/e21d35da-a28e-4f59-97cc-3c82e6b81011/3d1d2a3f-da8f-4ff1-90ee-b67438aa3923/alex-anderson.jpg

  I'm guessing I'd just need to use a different image as the base? Maybe I could just upload a plain white image?

  0
• 

  Aleksandar Kostadinov

  July 12, 2021 17:33

  You're welcome!
  I'm actually part of the Developer Support team at Cloudinary, so I do get more practice with Transformations 😀

  In regards to your question - yes, it's definitely possible to use remote images for this. To do it, you can keep the same transformations, but just replace the "type" from "upload" to "fetch" - i.e. "image/upload" in the URL would now be "image/fetch" and then instead of using the public_id of the uploaded image (whlqlynjcslyhgml0zxy.png) you can add the full remote URL.

  For example:

  https://res.cloudinary.com/kostadinov/image/fetch/$th_628,$tw_1200/h_$th/l_jceijys6ppyaasbhbbdy,h_$th,fl_cutter/b_white,c_pad,g_east,w_$tw,h_$th/c_fit,l_text:Helvetica_65_bold:Alex%20Anderson%20Creates%20Web-Based%20Spaceship%20Controls,g_north_west,x_70,y_70,w_$tw_sub_$th/l_text:Helvetica_45_bold:Chats%20with%20Kent,w_$tw_sub_$th,c_fit,g_south_west,x_70,y_70/f_auto,q_auto/https://image.simplecastcdn.com/images/e21d35da-a28e-4f59-97cc-3c82e6b81011/3d1d2a3f-da8f-4ff1-90ee-b67438aa3923/alex-anderson.jpg

  For reference, this is using the Fetch functionality - https://cloudinary.com/documentation/fetch_remote_images#remote_image_fetch_url

  1
• 

  Kent C. Dodds

  July 13, 2021 17:15

  https://media.giphy.com/media/fYB7BTqxTvBIvNeS5l/giphy.gif

  0
• 

  Kent C. Dodds

  September 08, 2021 15:01

  Do you mind helping me with this one (or is there a tool I can use to help me work on this)?

  

   

  For each of these I either have a cloudinary ID for the featured image or I have a URL to an image hosted elsewhere (so I'd use `fetch` in that case I think). I also have a custom font that's hosted on my own server. Is it possible to use that font when generating these images?

  Thanks for any help/tips/references you (or anyone else) can offer!

  0
• 

  Wissam Khalili

  September 12, 2021 13:52

  Hi Kent,

  Thank you for reaching out.

  I see that my colleague has provided a detailed example of how to create a featured image with text overlay. Please let me know if there is any additional issue.

  Regarding custom fonts, you could upload your font as a raw, authenticated asset. Here is a guide on how to do it:
  https://cloudinary.com/documentation/layers#custom_fonts

  Please review.

  Thanks,

  Wissam

  0
• 

  Kent C. Dodds

  September 14, 2021 19:28

  Thanks! I've been working on this and it looks like it's not possible to set the font size to the value of a arithmetic expression is that right? I want to set it to `$tw_div_25`, but that's not working. Here's what I have working so far:

  https://res.cloudinary.com/kentcdodds-com/image/upload/$th_1256,$tw_2400/c_scale,h_$th,w_$tw/c_fit,g_east,h_$th_div_1.2,w_$tw_div_2.5,x_$tw_div_20,l_kentcdodds.com:illustrations:kody-flying_blue/c_fit,g_north_west,h_$th_div_1.5,w_$tw_div_2.7,x_$tw_div_20,y_$th_div_12,co_white,l_text:kentcdodds.com:Matter-Regular.woff2_100:Helping%20people%20make%20the%20world%20a%20better%20place%20through%20quality%20software./kentcdodds.com/social-background.png

  0
• 

  Wissam Khalili

  September 15, 2021 10:40

  Hi Kent,

  You can use variables for the text style and color. For example:

  • $style_!Arial_12!/$color_!rgb:ff33cc!/co_$color,l_text:$style:hello/fl_layer_apply

  The style of the text overlay consists of font format and size. Unfortunately, they could not be separated as variables and be combined in the l_text tag.

  Here is the guide for more details:
  https://cloudinary.com/documentation/user_defined_variables#text_overlays

  Thanks,

  Wissam

   

   

   

   

   

   

  0
• 

  Kent C. Dodds

  September 15, 2021 15:23

  Great, thank you!

  Also, this URL is starting to get very long. Is there any way to save this transform to my cloudinary account and just pass certain pieces as "parameters" or something?

  0
• 

  Kent C. Dodds

  September 15, 2021 18:35

  Also, I'm having trouble using a remote image as an overlay.

  Here's a working version with my own image: https://res.cloudinary.com/kentcdodds-com/image/upload/$th_1256,$tw_2400,$gw_$tw_div_24,$gh_$th_div_12/co_rgb:a9adc1,c_fit,g_north_west,w_$gw_mul_14,h_$gh,x_$gw_mul_1.5,y_$gh_mul_1.3,l_text:kentcdodds.com:Matter-Regular.woff2_50:Check%20out%20this%20Podcast/co_white,c_fit,g_north_west,w_$gw_mul_14,h_$gh_mul_7,x_$gw_mul_1.5,y_$gh_mul_2,l_text:kentcdodds.com:Matter-Regular.woff2_110:Erik%2520Rasmussen%2520Chats%2520With%2520Kent%2520About%2520Maintaining%2520Open-Source%2520Libraries/c_fit,g_south_west,r_max,w_$gw_mul_4,h_$gh_mul_3,x_$gw,y_$gh,l_kent:profile-transparent/co_rgb:a9adc1,c_fit,g_south_west,w_$gw_mul_5.5,h_$gh_mul_4,x_$gw_mul_4.5,y_$gh_mul_2,l_text:kentcdodds.com:Matter-Regular.woff2_70:Kent%20C.%20Dodds/co_rgb:a9adc1,c_fit,g_south_west,w_$gw_mul_5.5,h_$gh_mul_4,x_$gw_mul_4.5,y_$gh_mul_1.3,l_text:kentcdodds.com:Matter-Regular.woff2_40:kentcdodds.com%252Fblog/c_fill,ar_3:4,r_12,g_east,h_$gh_mul_10,x_$gw,l_unsplash:photo-1477959858617-67f85cf4f1df/c_fill,w_$tw,h_$th/kentcdodds.com/social-background.png

  But I want to use this as the image:

  https://image.simplecastcdn.com/images/e21d35da-a28e-4f59-97cc-3c82e6b81011/f3ae8c73-a91c-4dab-928e-072e56f02dc1/logo-square.jpg

  I found this article: https://cloudinary.com/product_updates/overlay_and_underlay_a_fetched_image

  And created a base64 encoded string of that URL:

  aHR0cHM6Ly9pbWFnZS5zaW1wbGVjYXN0Y2RuLmNvbS9pbWFnZXMvZTIxZDM1ZGEtYTI4ZS00ZjU5LTk3Y2MtM2M4MmU2YjgxMDExL2YzYWU4YzczLWE5MWMtNGRhYi05MjhlLTA3MmU1NmYwMmRjMS9sb2dvLXNxdWFyZS5qcGcK

  If I try using that with l_fetch, I get a 404 response:

  https://res.cloudinary.com/kentcdodds-com/image/upload/$th_1256,$tw_2400,$gw_$tw_div_24,$gh_$th_div_12/co_rgb:a9adc1,c_fit,g_north_west,w_$gw_mul_14,h_$gh,x_$gw_mul_1.5,y_$gh_mul_1.3,l_text:kentcdodds.com:Matter-Regular.woff2_50:Check%20out%20this%20Podcast/co_white,c_fit,g_north_west,w_$gw_mul_14,h_$gh_mul_7,x_$gw_mul_1.5,y_$gh_mul_2,l_text:kentcdodds.com:Matter-Regular.woff2_110:Erik%2520Rasmussen%2520Chats%2520With%2520Kent%2520About%2520Maintaining%2520Open-Source%2520Libraries/c_fit,g_south_west,r_max,w_$gw_mul_4,h_$gh_mul_3,x_$gw,y_$gh,l_kent:profile-transparent/co_rgb:a9adc1,c_fit,g_south_west,w_$gw_mul_5.5,h_$gh_mul_4,x_$gw_mul_4.5,y_$gh_mul_2,l_text:kentcdodds.com:Matter-Regular.woff2_70:Kent%20C.%20Dodds/co_rgb:a9adc1,c_fit,g_south_west,w_$gw_mul_5.5,h_$gh_mul_4,x_$gw_mul_4.5,y_$gh_mul_1.3,l_text:kentcdodds.com:Matter-Regular.woff2_40:kentcdodds.com%252Fblog/c_fill,ar_3:4,r_12,g_east,h_$gh_mul_10,x_$gw,l_fetch:aHR0cHM6Ly9pbWFnZS5zaW1wbGVjYXN0Y2RuLmNvbS9pbWFnZXMvZTIxZDM1ZGEtYTI4ZS00ZjU5LTk3Y2MtM2M4MmU2YjgxMDExL2YzYWU4YzczLWE5MWMtNGRhYi05MjhlLTA3MmU1NmYwMmRjMS9sb2dvLXNxdWFyZS5qcGcK/c_fill,w_$tw,h_$th/kentcdodds.com/social-background.png

  I'm not sure what I'm doing wrong here. Any help is appreciated!

  0
• 

  Kent C. Dodds

  September 15, 2021 19:13

  Curiously, that base64 string seems to work for the demo account:

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

  But doesn't work for my account:

  https://res.cloudinary.com/kentcdodds-com/image/upload/l_fetch:aHR0cHM6Ly9pbWFnZS5zaW1wbGVjYXN0Y2RuLmNvbS9pbWFnZXMvZTIxZDM1ZGEtYTI4ZS00ZjU5LTk3Y2MtM2M4MmU2YjgxMDExL2YzYWU4YzczLWE5MWMtNGRhYi05MjhlLTA3MmU1NmYwMmRjMS9sb2dvLXNxdWFyZS5qcGc/sample.jpg

  Is there a setting I need to enable?

  0
• 

  Eric Pasos

  September 16, 2021 08:54

  Hi Kent,

  You could use the named transformation for predefined transformation parameters to shorten the URL and it helps to hide the transformation details as well. More information on this link:
  https://cloudinary.com/documentation/cloudinary_glossary#named_transformation

  As for the remote image fetch feature, the target URL has to be encoded into a base64 format as described in this link: https://cloudinary.com/documentation/layers#remote_image_overlays

  And checking the two URLs you provided above, both are accessible and I am able to get your image:

  Your example using demo account

  Your example using your account

  Thanks,
  Eric

  0
• 

  Kent C. Dodds

  September 16, 2021 10:25

  I meant to come back here and mention that I figured out what the problem was. In my account security settings under "Restricted media types:" I had "Fetched URL" checked. I don't remember checking that. But you may want to update the documentation to mention that this will need to be unchecked when not using the authenticated API or signed URLs.

  Thanks.

  0
• 

  Aleksandar Kostadinov

  September 18, 2021 15:01

  Hi Kent,

  Thanks for the update and great to hear you were able to resolve it.

  I see there's a note about "Fetch URL" being Restricted in this part of the documentation (https://cloudinary.com/documentation/fetch_remote_images#restricting_the_allowed_fetch_domains) but I do agree with your feedback that it would be helpful if we add an additional sentence to clarify that when this type is restricted it only allows access via a Signed URL or if you pre-fetch the image via the API (Explicit method).

  0
• 

  Kent C. Dodds

  September 18, 2021 17:32

  In addition, it would be even more helpful if the error header in the response indicated why the "resource" could not be found.

  Thanks!

  0
• 

  Kent C. Dodds

  September 18, 2021 17:38 Edited

  Oh, one last thing. I've found that overlaying text can be rather tricky because I'm not sure how many lines of text there will be as it depends on the font, font size, characters used, and specified width. This means that I have to just do my best guess for where to position any other overlays that should appear below the text. When the text itself is dynamic this poses a bit of a problem where I could inadvertently leave too much of a gap between the text and the other overlay or too little of a gap (or potentially even overlap). Is there any way to say: "Set the font size so it fills this space" or even better: "position this overlay to be a certain number of pixels below this other overlay"?
  
  Here's an example: https://res.cloudinary.com/kentcdodds-com/image/upload/$th_3000,$tw_3000,$gw_$tw_div_12,$gh_$th_div_12/w_$tw,h_$th,l_kentcdodds.com:social-background/co_white,c_fit,g_north_west,w_$gw_mul_6,h_$gh_mul_2.6,x_$gw_mul_0.8,y_$gh_mul_0.8,l_text:kentcdodds.com:Matter-Medium.woff2_180:This%2520is%2520a%2520test/c_crop,g_north_west,h_$gh_mul_5.5,w_$gh_mul_5.5,x_$gw_mul_0.8,y_$gh_mul_1.6,l_fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20va2VudGNkb2Rkcy1jb20vaW1hZ2UvdXBsb2FkL2NfcGFkLHdfMTQwMCxoXzE0MDAscV9hdXRvLGZfYXV0by9rZW50Y2RvZGRzLmNvbS9pbGx1c3RyYXRpb25zL2tvZHlfcHJvZmlsZV95ZWxsb3c=/co_rgb:a9adc1,c_fit,g_south_west,w_$gw_mul_8,h_$gh_mul_4,x_$gw_mul_0.8,y_$gh_mul_0.8,l_text:kentcdodds.com:Matter-Regular.woff2_120:kentcdodds.com%252Fcalls/co_rgb:a9adc1,c_fit,g_south_west,w_$gw_mul_8,h_$gh_mul_4,x_$gw_mul_0.8,y_$gh_mul_2.2,l_text:kentcdodds.com:Matter-Regular.woff2_140:-%2520Kody/c_fit,g_east,w_$gw_mul_11,h_$gh_mul_11,x_$gw,l_kentcdodds.com:illustrations:mic/c_fill,w_$tw,h_$th/kentcdodds.com/social-background.png
  
  If I change that text at all, I need to reposition the image below it manually, but because the text is dynamic I don't know whether it's going to take one, two, or three lines.

  0

Post is closed for comments.