Overlay capabilities?
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?
-
Official comment
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 thex
andy
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.jpgAnd 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.jpgFor more information:
http://cloudinary.com/blog/adding_watermarks_credits_badges_and_text_overlays_to_images -
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:
For reference, this is using the Fetch functionality - https://cloudinary.com/documentation/fetch_remote_images#remote_image_fetch_url
1 -
Hi Kent,
Sure, that should definitely be possible to create via Cloudinary.
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 -
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 -
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 -
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 -
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_fontsPlease review.
Thanks,
Wissam
0 -
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:
0 -
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_overlaysThanks,
Wissam
0 -
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 -
Also, I'm having trouble using a remote image as an overlay.
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:
I'm not sure what I'm doing wrong here. Any help is appreciated!
0 -
Curiously, that base64 string seems to work for the demo account:
But doesn't work for my account:
Is there a setting I need to enable?
0 -
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_transformationAs 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,
Eric0 -
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 -
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 -
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 -
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.
Comments
18 comments