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

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
• 

  Thiru Raja

  June 13, 2014 21:17

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

  0
• 

  iti tomar

  November 05, 2014 05:53

  How to add text in Javascript??? 

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

  0
• 

  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
• 

  Brian Albert

  June 27, 2017 21:46

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

  0
• 

  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
• 

  Laura Perez Vera

  June 24, 2020 17:59

  What about Ç? I am having the same problem

  0
• 

  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

Post is closed for comments.