Can you make the Image Upload Preview widget display the preview window by default?

  • cgrouge
    Asked on March 9, 2016 at 1:58 PM

    The image preview is great but is there a way to make the preview image area display by default? Or some way to include a border around the preview area with a set width and height so there isn't a big white space on the form when an image hasn't been uploaded yet?

    Ideally I want the preview area to be gray with the text Image Preview visible. Something like this but with the text "Image Preview": Can you make the Image Upload Preview widget display the preview window by default? Image 1 Screenshot 20

    Then when someone uploads an image, the image will be previewed there.

    Is this possible? 

     

    Thank you in advance!!

  • David JotForm Support
    Replied on March 9, 2016 at 3:48 PM

    The image preview widget should not have that large amount of space below it, whether or not the preview is being shown.  I checked the fields CSS and there is a large amount of padding added to the bottom:

    Can you make the Image Upload Preview widget display the preview window by default? Image 1 Screenshot 20

    You can either remove the padding and the field will have much less space or you can add your border to the field itself:

    #id_53 {
        border : solid 1px;
    }

    Here is what the form would look like with the border added:

    https://form.jotform.com/60685945646975

  • cgrouge
    Replied on March 10, 2016 at 10:02 AM

    So, I had to re make the form I originally asked about, here is an updated link:

    https://form.jotform.com/60686534457162

    The height of the Image Preview widget is fine, what I need is a way to show the preview window by default. Right now it only appears when an image is uploaded. Or is there a way to add css styling to the widget? When I click on the button container (not the parent container) it doesn't show an id or class to add styling to. Here is what I'm talking about:

    Can you make the Image Upload Preview widget display the preview window by default? Image 1 Screenshot 20

     

    I've tried adding style to .form-input-wide jf-required div but nothing happens.

  • Nik_C
    Replied on March 10, 2016 at 11:06 AM

    Hello,

    Could you try to use this ID of that field:

    #id_57{

        background-color: gray;

    }

    #id_57 is ID of image preview field.

    For example I added only background color for testing purposes:

    Can you make the Image Upload Preview widget display the preview window by default? Image 1 Screenshot 20

    Now, I'm not sure if you just wanted to show that window like that or if you wanted to add something else to it.

    Anyhow, please let me know if that could work for you, or you have something else in mind.

    Best regards.

  • cgrouge
    Replied on March 10, 2016 at 11:32 AM

    I don't want to make edits to #id_57. After trying something new I got this:

    #customFieldFrame_57 {

        background-color : #555555;

    }

    Can you make the Image Upload Preview widget display the preview window by default? Image 1 Screenshot 30

    I thought this was it but after testing it, it doesn't work the way I need it to. With this custom field css, you can add an image but it pushes this custom field down rather than the preview winow laying over top of the background color:

    Can you make the Image Upload Preview widget display the preview window by default? Image 2 Screenshot 41

    On my form: https://form.jotform.com/60686534457162 I want the Image Preview Widget to look and function like #id_5 and #input_5, but when an image is uploaded I'd want a preview of the image to display over top of the background image.

  • David JotForm Support
    Replied on March 10, 2016 at 11:41 AM

    Since the preview section is not shown until an image is uploaded and will be hidden until an image is previed.  It is not possible to have a placeholder image that is always shown.  Increasing the area of your field does not compensate for the area that will be added when the preview is shown.  If you add 100px of padding to the bottom of the field, when the preview is shown, it will also have 100px of padding at the bottom, in addition to the area that is added by the preview window.  The preview portion of the widget is its own section.

  • cgrouge
    Replied on March 10, 2016 at 11:43 AM

    Is it possible to edit the preview portion of the widget in any way?

  • David JotForm Support
    Replied on March 10, 2016 at 11:47 AM

    It is possible to edit the preview portion as much as you would like.  The sizing, frame, everything can be changed.  However, the preview portion of the widget is not shown until a file is added to the preview.  Any changes made would not be visible unless there was a file previewed.  You could make the preview frame huge, but the widget would not show the increased area until a file was selected.

  • cgrouge
    Replied on March 10, 2016 at 11:53 AM

    Ok, that makes sense. Now is it possible to edit the widget or create a new widget exactly like this one but shows the preview portion by default?

  • David JotForm Support
    Replied on March 10, 2016 at 1:07 PM

    Unfortunately, creating and adding new widgets is a bit more complex.  Changing a widget widget will cause any form currently using it to have different behavior than it did previously and creating a new widget with slightly different functionality would likely be too time consuming.  It would likely be much quicker to adjust the layout of the form to compensate for the current functionality of the widget.  We will be more than happy to help with whatever that would require.

  • cgrouge
    Replied on March 10, 2016 at 2:21 PM

    That's completely understandable. Thank you for the assistance on this! I will make do with what I have here.

    Cheers!