Upload widget UI translated in other languages ?

Follow

Bertrand Larsy

• April 29, 2015 13:01

The upload widget seems fantastic as it is.

Though, I did not find a way to translate the texts it uses to my users language.

If that is not currently possible, I definitely would like it in the future.

3

• 

  Deepak Vishwakarma

  • June 03, 2015 08:12

  @Bertrand Larsy : In case of any solution, Kindly contact me :
  deepak.vishwakarma@tothenew.com
  deepak.m.shrma@gmail.com

  0

  Comment actions Permalink
• 

  Itay Taragano

  • June 14, 2015 14:43

  It's on our road-map to support i18n for the widget. We will be happy to update here once it becomes available.

  0

  Comment actions Permalink
• 

  Gilberto Torrezan Filho

  • June 27, 2015 10:16

  I translated my upload widget by using CSS hacks with pseudo elements. Here is a snippet, using the minimal css as template (just replace the 'My text for...' for your actual translation):

  #cloudinary-navbar .source.local .label,
  #cloudinary-navbar .source.url .label {
  visibility: hidden;
  }

  #cloudinary-navbar .source.local .label:after,
  #cloudinary-navbar .source.url .label:after,
  #cloudinary-navbar .source.camera .label:after {
  display: block;
  visibility: visible;
  position: relative;
  }

  #cloudinary-navbar .source.local .label:after {
  content: 'My text for My Files';
  }

  #cloudinary-navbar .source.url .label:after {
  content: 'My text for URL';
  }

  #cloudinary-navbar .source.camera .label:after {
  content: 'My text for Camera';
  }

  #cloudinary-widget .panel.camera .note,
  .widget .panel.url .note {
  visibility: hidden;
  line-height: 1px;
  }

  #cloudinary-widget .panel.camera .note:after,
  .widget .panel.url .note:after {
  display: block;
  visibility: visible;
  position: relative;
  line-height: 23px;
  }

  .widget .panel.url .note:after {
  content: 'My text for public URL image file';
  }

  #cloudinary-widget .panel.camera .note:after {
  content: 'My text for make sure your browser supports camera';
  }

  #cloudinary-widget .panel.local .drag_area .drag_content .label.label_single,
  #cloudinary-widget .panel.local .drag_area .drag_content .label.label_multiple,
  .widget .panel.local .drag_area .drag_content .or {
  line-height: 1px;
  visibility: hidden;
  }

  #cloudinary-widget .panel.local .drag_area .drag_content .label.label_single:after,
  #cloudinary-widget .panel.local .drag_area .drag_content .label.label_multiple:after,
  .widget .panel.local .drag_area .drag_content .or:after {
  display: block;
  visibility: visible;
  position: relative;
  line-height: 35px;
  }

  #cloudinary-widget .panel.local .drag_area .drag_content .label.label_single:after {
  content: 'My text for drag the file here';
  }

  #cloudinary-widget .panel.local .drag_area .drag_content .label.label_multiple:after {
  content: 'My text for drag the files here';
  }

  .widget .panel.local .drag_area .drag_content .or:after {
  content: 'My text for or';
  }

  #cloudinary-widget .button.select_file.select_single,
  #cloudinary-widget .button.select_file.select_multiple,
  #cloudinary-widget .button.capture_camera {
  line-height: 1px;
  color: transparent;
  width: 260px;
  }

  #cloudinary-widget .button.select_file.select_single:after,
  #cloudinary-widget .button.select_file.select_multiple:after,
  #cloudinary-widget .button.capture_camera:after {
  display: block;
  visibility: visible;
  position: relative;
  line-height: 30px;
  color: #CE3340;
  }

  .widget .panel.local .upload_button_holder input[type="file"] {
  width: 262px;
  }

  #cloudinary-widget .upload_button_holder {
  width: 260px;
  cursor: pointer;
  }

  #cloudinary-widget .upload_button_holder:hover .button.select_file.select_single:after,
  #cloudinary-widget .upload_button_holder:hover .button.select_file.select_multiple:after,
  #cloudinary-widget .button_holder:hover .button.capture_camera:after {
  color: #ffffff;
  }

  #cloudinary-widget .button.select_file.select_single:after {
  content: 'My text for Select file';
  }

  #cloudinary-widget .button.select_file.select_multiple:after {
  content: 'My text for Select files';
  }

  #cloudinary-widget .button.capture_camera:after {
  content: 'My text for Capture';
  }

  0

  Comment actions Permalink
• 

  Deepak Vishwakarma

  • August 14, 2015 21:46

  There is an option, "text" where you can pass your i18n text. please refer to Customization tab, text option in
  http://cloudinary.com/documentation/upload_widget

  0

  Comment actions Permalink
• 

  Arturo Ojeda

  • May 14, 2021 19:01

  Hi there

  I just created this repo and will be uploading translation to Spanish (México):
  
  https://github.com/arturo-ojeda/cloudinary_uploader_i18n
  
  Feel free to push other translations so that we can centralize them.
  
  Best

  0

  Comment actions Permalink

Post is closed for comments.