Skip to main content

How to add a special characters in text overlays?

Itay Taragano
Updated

The slash character collides with Cloudinary's functionality, as specifically slashes in Cloudinary URLs are used for separating between different chained transformations (e.g., w_100/r_20).

So if the regular slash (or even its %2F escaped version) is used, Cloudinary will think that the next chained transformation is entered rather than the rest of the text string.
Therefore, you can either double escape the slash character (e.g., %252F): 

http://res.cloudinary.com/demo/image/upload/w_300,o_30/l_text:Arial_20_bold:www.cloudinary.com%252Fconsole/couple.jpg

Alternatively, you can use a special encoding of a different type of the slash character (%E2%88%95):
http://res.cloudinary.com/demo/image/upload/w_300,o_30/l_text:Arial_20_bold:www.cloudinary.com%E2%88%95console/couple.jpg

Generally it would be a good practice to double-escape the entire overlaid text, e.g.:
https://res.cloudinary.com/demo/image/upload/w_300,o_30/l_text:arial_30:%252C%2520-%2520comma%250A%2520%253F%2520-%2520question%2520mark%250A%2520%252F%2520%255C%2520-%2520both%2520slashes%250A%2523%2520-%2520hash./couple.jpg

Related articles

Comments

8 comments

Date Votes
  • Salil Sethi

    when I double escape the following string and send it over

     

    "The arrangement covers the movie studio 20th Century Fox, the company’s TV production arm 20th Century Fox Television, Fox-owned cable networks (including FX and National Geographic), and the company’s stakes in international networks like Star TV and Sky (which Fox is planning to acquire full ownership of before" 

    I'm receiving the following image with encoding characters

    0
  • Roee Ben Ari
    Edited

    Hi Salil,

    In order to get a valid URL, please use encodeURIComponent instead of escape, like this:

    overlayText = encodeURIComponent(encodeURIComponent(text));

    You can read more about the difference between the two methods here:

    http://xkr.us/articles/javascript/encode-compare/

     

    0
  • Lowell Chayadi

    hello, how about % character, I tried double-escape for that, but the node js library state that it's failing to decode URI malformed

    0
  • Raya Straus

    Hi Lowell,

    Can you please share with us your implementation? 

    0
  • Catherine Seo

    hello, I am having trouble getting commas to show up on text overlay. Here is a snippet of my code.

    ```

    {

    … 

    overlay: {

      font_family: 'arial',

      font_size: 14,

      text_align: 'left',

      text: 'WALK, HIKE, RUN, RIDE',

     },

    },

    ```

     

    I have tried

    1. encodeURIComponent('WALK, HIKE, RUN, RIDE')

    2. encodeURIComponent(encodeURIComponent('WALK, HIKE, RUN, RIDE'))

    3. ‘WALK\\, HIKE\\, RUN\\, RIDE’

     

    but none of these seem to work and I get the encoded string on my generated image. Can you please assist? Thank you!

    0
  • Tia Esguerra

    Hi Catherine, 

    Thanks for reaching out.

    In the Node SDK, the cloudinary.url() helper method will handle the encoding for you. For example:

    
let url = cloudinary.url("sample.jpg", {
	transformation: [
		{
			color: "#000000",
			overlay: {
				font_family: "Arial",
				font_size: 32,
				text: "WALK, HIKE, RUN, RIDE",
			},
		},
		{ flags: "layer_apply", gravity: "center" },
	],
});

    The code block above generates this URL: https://tangoecho.cloudinary.us/image/upload/co_rgb:000000,l_text:Arial_32:WALK%252C%20HIKE%252C%20RUN%252C%20RIDE/fl_layer_apply,g_center/v1632156908/sample.jpg

    Can you give this a try and let me know how it goes?

    Kind regards, 

    Tia

    0
  • Catherine Seo

    Hi Tia!

    Thank you for your response. So I am actually running this transformation in a serverless environment (from a lambda function) and I found that I could not call the `.url` method, without getting an error (from the cloudinary sdk) about not being able to find `./package.json`. It was this line specifically (https://github.com/cloudinary/cloudinary_npm/blob/master/lib/utils/analytics/getSDKVersions.js#L12) that was throwing the error. I'm thinking it's possibly related to `fs` in a lambda that's causing the issue? But `await cloudinary.uploader.upload(….)` works just fine so that is where I've been calling the transformations from. Does `.upload` not encode the text that gets passed into the transformations?

    Thank you!

    Catherine

    0
  • Danny Valentine

    Hi Catherine. Thanks for the additional information

    I'm not super familiar with AWS personally, but it's possible that the environment available to you is missing certain packages that we assume are there, which are usually present in a default Node installation. This in turn leads to errors when we attempt to use the .url() helper method.

    I assume everything works fine for you locally, and only fails when part of a Lambda, but could you please confirm? It would also be helpful if you could provide us with the full error message you get, if at all possible. If you would prefer to raise a support ticket instead due to the potential for sensitive details to be shared, you would be welcome to do so via https://support.cloudinary.com/hc/en-us/requests/new

    Many thanks,
    -Danny

    0

Please sign in to leave a comment.