Cloudinary upload widget - styling upload preview image (width and height)

Petros Tirokomos

November 16, 2016 14:46

Well, I'm try to customize the style of Cloudinary Upload Widget: http://cloudinary.com/documentation/upload_widget

I want to apply the correct css for limit the image/canvas of the image preview during the progress. Try to upload an image on the above page to see how it works.

During the upload, a preview is displayed: Screenshot

I want to limit the width/height of the above image preview and whole loading bar. How? What's the css selector I have to setup on "stylesheet" widget instace?

0

• 

  Roee Ben Ari

  November 17, 2016 14:40

  To customise the progress thumbnail container, you will actually need to apply changes to several selectors, which are pre-defined with fixed width and height values.

  Please refer to the following sample project (on jsFiddle) -

  https://jsfiddle.net/roee_ba/9owtj8uo/

  0
• 

  Petros Tirokomos

  November 17, 2016 15:30 Edited

  Thank you very much for the help, Ben-Ari! I appreciate it very much!

  I will let you know below about the exact issue.

  I have styling a minimal version of Widget. I have upload a working example here:

  https://jsfiddle.net/9owtj8uo/9/

  http://res.cloudinary.com/di2a8qkzv/image/upload/v1479396426/fgjcpb6ms6pv2nnnmyqm.jpg

  It works fine, except the preview image height/width during the upload.

  Here is what I want to achieve:

  - display:none for any preview image

  - display a gif (progress bar 32x32px) instead

  background: url("http://techdefencelabs.com/public/img/loading.gif")

  ... a result closer to this.

  I have spend countless hours for it, but it seems I make one spoils the other. The styling of the widget is very difficult!

  The only I can hope is a help from the support forum, 'cause the above is a good minimal version of the uploader and shame to not be functional...

  Regards,

  Peter

  0
• 

  Roee Ben Ari

  November 18, 2016 04:40 Edited

  Hi Peter, can you please open a support ticket and share with us your use-case and the code you are currently using, so we can have a closer look at this?

  0

Post is closed for comments.