Using special characters in Text overlaying (',') ?

Follow

Thiru Raja

• June 13, 2014 12:51

How can we include special characters, like the** ',' comma** ? Tried replacing commas will Url Encoded characters (%2C), still no luck.

Below is the link that I have building on... Please refers the attach image to see the expected output ....

Thank You.

http://res.cloudinary.com/dy3pxdqun/image/fetch/w_1.0/l_black_box_corbn7,g_south_west,w_220,h_110,o_60/l_text:Ubuntu_65_bold:Run%20Jump,g_south_west,co_white,w_210,h_100,x_5,y_5,c_pad/http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg

1

• 

  Itay Taragano

  • June 13, 2014 20:22

  The issue with the comma is that it collides with Cloudinary's functionality. Specifically commas in Cloudinary URLs are used for separating between different transformation parameters (e.g.,  w_100,h_100 )
  
  So if the regular comma (or even its  %2C  escaped version) is used, Cloudinary will think that the next parameter is entered rather than the rest of the text string.
  
  Therefore, you can either double escape the comma character (e.g., %252C ): 
  
  http://res.cloudinary.com/dy3pxdqun/image/fetch/w_1.0/l_black_box_corbn7,g_south_west,w_220,h_110,o_60/l_text:Ubuntu_65_bold:Run%252CJump,g_south_west,co_white,w_210,h_100,x_5,y_5,c_pad/http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg

   Or, you can use a special encoding of a different type of the comma character ( %E2%80%9A ):

  http://res.cloudinary.com/dy3pxdqun/image/fetch/w_1.0/l_black_box_corbn7,g_south_west,w_220,h_110,o_60/l_text:Ubuntu_65_bold:Run%E2%80%9AJump,g_south_west,co_white,w_210,h_100,x_5,y_5,c_pad/http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg

  2

  Comment actions Permalink
• 

  Thiru Raja

  • June 13, 2014 21:17

  Thanks guys.... I just got the job done :)

  0

  Comment actions Permalink
• 

  iti tomar

  • November 05, 2014 05:53

  How to add text in Javascript??? 

  $(".dynamic_image").cloudinary({text:"hello Welcome", gravity: "north" });    Doesnt work :(

  0

  Comment actions Permalink
• 

  Itay Taragano

  • November 05, 2014 14:36

  You can use something like:

  $.cloudinary.image("my_image.jpg", { overlay: "text:Arial_24:hello+Welcome", gravity: 'north' });

  Here's our jQuery documentation regarding generating text overlays:
  
  http://cloudinary.com/documentation/jquery_image_manipulation#text_layers

  For more information about text overlays with Cloudinary:
  
  http://cloudinary.com/cookbook/add_a_text_to_an_image

  0

  Comment actions Permalink
• 

  Brian Albert

  • June 27, 2017 21:46

  Are commas the only character that collide with Cloudinary's functionality and require special encoding?

  0

  Comment actions Permalink
• 

  Itay Taragano

  • July 01, 2017 18:02

  It's mostly commas and slashes.
  For more information:
  https://support.cloudinary.com/hc/en-us/articles/202521512-How-to-add-a-slash-character-or-any-other-special-characters-in-text-overlays-

  0

  Comment actions Permalink
• 

  Laura Perez Vera

  • June 24, 2020 17:59

  What about Ç? I am having the same problem

  0

  Comment actions Permalink
• 

  Shirly Manor

  • June 24, 2020 20:26

  You can escape it. For example:

  https://res.cloudinary.com/demo/image/upload/l_text:arial_20:Here%20you%20go:%20%C3%87%3F/sample.jpg

   

  0

  Comment actions Permalink

Post is closed for comments.