Upload widget UI translated in other languages ?

Comments

4 comments

  • Avatar
    Deepak Vishwakarma

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

    0
    Comment actions Permalink
  • Avatar
    Itay Taragano

    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
  • Avatar
    Gilberto Torrezan Filho

    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
  • Avatar
    Deepak Vishwakarma

    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

Please sign in to leave a comment.