We’re building an app that will allow users to upload graphics (as well as add text and other form elements) which we will then convert to an HTML page and display. Ideally, it should be a responsive display. My job is to give the developers the specifics of what data we need to collect for the graphic upload to give the end-user the best likelihood of having a satisfactory result. Very few of the users will have much, if any, working knowledge of graphics or html so I need to think for them - develop a form that will likely produce at least decent results no matter what they do. They could upload 16x16 icons, full-page images or anything in between. The most likely possibility will be a logo - but even there, it could be a corner logo or a 100% width banner logo. It could be a huge hi-res logo created for print, or a 50x100px thing.
To display these, I thought I might start with a default image div size of 100% x 1080px, white background. We can auto-detect the size of the image as they upload. If the user hasn’t played with ANY of the settings, as long as the height isn’t greater than 1080px, we should be OK. If the width is less than 100% (which will vary according to screensize, of course), we can align it in the center and I think that will be good enough. If the height IS greater than 1080px (again, assuming they haven’t changed from the default settings, what then? I’m thinking assign the height to 1080px and give a width of auto? Does that work?
My biggest questions are about what settings I should let the user change. I thought I might give them an “auto-fit” choice. I think for sure I need auto-fit both - do I also need auto-fit height only and/or auto-fit width only? For example, if they want to insert a series of 20x20px images to use as bullets for an unordered list, they obviously will need an inline image - as opposed to the 100% block level default we’re giving them. Is auto-fit the best way to do that (for naive users who might not know how to determine the exact size they need) and may NOT understand distinctions between block vs inline images?
I also thought I’d give them a way to choose background color (e.g., if they want a banner effect and their image is too small to cover the page), a left/right/center align (also for images less than 100% width). And then finally, I thought I would ALSO give them a way to specify the dimensions - for those users who are a little more sophisticated. Obviously, specifying width and/or height would kick out auto-fit as an option.
What do you think? Does this sound like it would work? What else do I need to consider? I plan to specify what image formats they can upload - png, jpg, gif, pdf?
If I get it right, it’s about displaying the uploaded image in a CMS type interface that allows the user to create a page.
From my point of view the logic is to consider these two points successively:
Uploading and sizing the image
Display
For example, a user may want to display a 200x100 image and upload the image in high resolution. So:
Upload and size the image
It is imperative to generate several images from the largest to the smallest, which will allow a responsive display. A simple PHP script can do the job.
Instead of giving the user the possibility to resize his image, it should be placed in a container (div) that the user could set, choosing for example its width in percentage (ideally according to screen sizes) or in pixels, and a display “block” or “inline”.
From that, the developer can use the “srcset” attribute to make the browser serve the image adapted to the display dimensions.
Another suggestion: I have used Cloudinary - https://cloudinary.com/- in various projects, an excellent service that allows among other things to serve images at the desired dimensions on the fly.
For this purpose I created a script that generates the code to send to Cloudinary from data-attributes. It’s here on Github: Cloudinary Images Loader
Thanks. This one is most like what I have planned:
<< 2. Instead of giving the user the possibility to resize his image, it should be placed in a container (div) that the user could set, choosing for example its width in percentage (ideally according to screen sizes) or in pixels, and a display “block” or “inline”.
We’re essentially building a form builder - a scaled down version of something like Formsite or Jotform. Each time the user drags a new form element onto their canvas, we create a new div, i.e., each form element gets its own div. So images would be treated the same. I was envisioning that the properties we collect would be for the div - not the image.
I do see your point about needing to create several image sizes for different screens if we plan to do this responsively. However, this is part of a larger app - which is NOT responsive (there’s a separate mobile app). So we may limit this to tablets and up for this form builder feature.
I’m a little concerned about changing the resolution - that’s going to be meaningless to our users. We can certainly do that for them behind the scenes, but I’m not clear how to think about the other settings. For example, if we change from 300dpi to 72dpi - and the user has also set a size of 50%, that’s going to give a VERY different result than if we display the original 300dpi at 50%.
Thoughts on that?
I’ll pass along the cloudinary info to my developers.