How can I change the dimension of the photo displayed in the Submissions screen?

  • cherylchooo
    Asked on March 26, 2016 at 6:56 PM

    Hi.  I am using JotForm to collect photos in a form.  When the photo is collected from Take Photo with a web cam, and I use the PDF editing function, I can resize the photo however I want.  But if the photo is collected on a mobile device in any widget, it cannot display in the PDF editor, only the Submission screen.  I know you are working on fixing the PDF editor issue, many thanks, so I am looking for a workaround until then.  I could work with just printing from the Submissions screen except the photos are scaled to the width of a whole page when you print it.  Is there a way to make the photos smaller in the Submission screen?  I can't seem to find any place to change that.  It appears I can resize it somewhat with web cam pictures in the form editor but again not with images from mobile devices.  Thanks. 

    Jotform Thread 803427 Screenshot
  • jonathan
    Replied on March 26, 2016 at 8:19 PM

    I am sorry but there is no means to modify/change the uploaded image data within the Submission panel. It is because the Submission panel is a back-end tool and part of the system.

    I see that you were using the Take Photo widget on your form http://www.jotform.us/form/60846941368163 to capture image. I think there is a way to have a fixed dimension for the image being captured  using CSS code on the widget. If we can set a fixed dimension for the image captured by the widget, perhaps the output image in the Submission data will use the fix dimension as well.

    I have not tried this yet so I will have to check if there is a way to achieve it.

    I will update you here as soon as available.

    Thanks.

  • cherylchooo
    Replied on March 26, 2016 at 9:06 PM

    Hmm. I tried to change the image width, and then the div dimensions, in the CSS code of both the Take A Photo and the Image Upload Preview widgets.  It works when I take a pic on my computer but not when I take a pic on my phone.  I hope you had more luck than I did! ;)

  • cherylchooo
    Replied on March 26, 2016 at 11:59 PM

    Wow, I think I have stumbled upon a solution to being able to take pictures with mobile devices on forms and have it show up in the PDF Design report so I can resize and place the pictures any way I want.  With this solution I have been able to use it successfully on not only my Chromebook, but my iPhone and my Samsung tablet with a form that uploads 4 pictures at the default high resolution.  Do you think this may earn me an account upgrade?  ;)  I am happy to share the solution but don't have a clue where I should post it.  There are too many threads that could use this.

  • Mike_G JotForm Support
    Replied on March 27, 2016 at 7:11 AM

    We're glad to hear that you have come across a solution to your issue. I would like to apologize, unfortunately, we don't have any rewards that may earn free account upgrade when you share any workarounds. You can try to post it on your blog, if you have, and submit us the link through http://www.jotform.com/myaccount/getMore. This may grant you additional submission limit on your account, but please be reminded this is something that is still subjected to approval.

    By the way, I'm not sure if we have the same workaround, but I believe, I was able to do it on my end also by enabling the "Request Desktop Site" option in my mobile phone browser.

    How can I change the dimension of the photo displayed in the Submissions screen? Image 1 Screenshot 40

    Then, the Take Photo widget looked something like in the PC browsers. I took a picture and submitted it. I was able to resize it through the Customize PDF page after.

    How can I change the dimension of the photo displayed in the Submissions screen? Image 2 Screenshot 51

    Without doing what I did above, the Take Photo widget will just have a link when opened in the PDF Design page.

    How can I change the dimension of the photo displayed in the Submissions screen? Image 3 Screenshot 62

    Also, this worked for me when using Google Chrome as my mobile browser and have not tried using other browsers on mobile phones.

  • cherylchooo
    Replied on March 27, 2016 at 8:11 AM

    My solution is different and does not require you to enable the desktop version. Once implemented within the form, the form works as on a computer or mobile device as is without the end user having to do anything special. I don't have a blog, I am just a coach on a kids' robotics team and not a professional programmer, but I guess I can make a video and upload to YouTube and submit that. Thanks!

  • jonathan
    Replied on March 27, 2016 at 8:21 AM

    Thank you for providing us with more details. Our higher ups are always generous, so I am sure we can find ways to reward you if you can share a solution that will be beneficial to all other JotForm users as well.

    You can share the solution on your response on this thread anytime you see fit. :-)

    Best

     

  • cherylchooo
    Replied on March 27, 2016 at 1:22 PM

    I submitted the video file per your instructions.  The video explains how to employ the solution.

    The short answer is to use the Image Upload Preview widget and insert the following CSS code. It makes the giant mobile device image files easier for the PDF editor to load. I hope this helps others with this issue.

     

    img {
        max-width: 50%;
        height: auto;
    }

     

  • David JotForm Support Manager
    Replied on March 27, 2016 at 1:40 PM

    Thank you for sharing, you haven rewarded with 25 submissions. So, your new limit is 125 for each month.

    If you need anything else, please open a new thread we will be glad to assist you.