Image requirements should be less strict to create better UX

[phutchins]

The issue is that we currently require images that are 1920x1028, are under 512k, and are of type svg or png.

The idea is that we want to keep the UI clean by requiring high quality images that scale appropriately but don't bog down the page load times. This in reality makes it very difficult for some to create a grant and many who are creating grants will not have a graphic designer at hand to manipulate/create their images.

Let's discuss alternate approaches to improve the UX here.

Problems

1. Without a consistent size being uploaded, it is difficult to create a consistent UX
2. Large images take more time to load or require a service on the frontend to create multiple sizes before upload
3. Limiting to SVG and PNG makes creating a grant restrictive

Proposed Solutions

1. Without a consistent size being uploaded, it is difficult to create a consistent UX

• We use a frontend tool to allow the user to crop their image before upload

2. Large images take more time to load or require a service on the frontend to create multiple sizes before upload and smaller sizes do not scale up well

• We allow smaller sizes (limiting to something reasonable on the smallest end like 600x600)
• When the screen scales to larger than the native image size, a background is added behind the image or either size of the image is extended (using the far left 1px column and far right 1px column)

3. Limiting to SVG and PNG makes creating a grant restrictive

• Lets open this up to SVG, PNG, JPG, GIF
• Lets add a step to the manual Grant review/approval process that checks the image for some level of quality

[scco]

simple solution (MASK images)

• open to ALL image formats ( .gif .png .jpg .jpeg .svg .webp .... )
• do not check for aspect-ratios and let users upload what ever format they like
• but still suggest an aspect ratio in text
• keep a max-filesize limit
• no need complicated canvas image processing but using a
  as MASK :

we can set a wrapper <figure> with a desired aspect-ratio: 16 / 9
then cover the div area with the inner image ( object-fit:cover ) and thats the full trick.

i can implement it within the next working days without any help in all the parts of the app.

complicated solution (clientside imageprocessing via a canvas plugin)

before i came up with the simple version, i just started exploring a way to integrate a client side crop to the app :

https://www.figma.com/file/sUQSYyPfooqTcVdajfZm0t/dgrants?node-id=1220%3A5447

• we would have to find whatever existing clientside vue3 canvas croping component we wana use and style it as good as possible.
• we would from this component upload directly to ipfs and have callback to change our ui to see the ipfs image + hash in UI
• i think this approach is not as awesome for UX and codebase as the simple solution

[mds1]

The simple solution here seems like the way to go IMO. We should include some text on the new grant page that says something like "X dimensions/size is recommended and it will be cropped to Y aspect ratio".

My only other comment would be to disallow gif format, because personally I find them super annoying/distracting when trying to browse grants (such as this one). But if other people disagree I don't feel strongly here

[scco]

regarding the text : in figma i also added for this simple solution some enhancements and a bit more clear how the final form how i see the upload process

https://www.figma.com/file/sUQSYyPfooqTcVdajfZm0t/dgrants?node-id=1220%3A5447

regarding animated gifs : yes i would dislike animated gifs as well.

[scco]

#314

implemented the simple solution : works great and is 100% tailwind code. this enable us to be open for user uploads in what ever aspect ratio ( we still will recommend perfect dimensions tho )

[Ajand]

Even though this is already solved since in our last meeting we decided that I do this for the first task, I want to suggest an alternative solution that will help me increase my vue.js skills and also could potentially be a useful component for future use.
I want to create a 100% in-house component for image upload and editing. Since it's in-house we gonna have full control over styling it.

Here is my suggestion spec:

• It must have 2 views: A minimize view which going to be the controller and A maximize view which gonna be the editor
• We can specify whether it is multi-upload or single
• We can specify the constraints: limit, ratio, size, format
• It must be able to handle drag and drop
• Editor must be able to crop and change the quality of the image
• In the controller, we must be able to discard one or all images

I think this gonna be a useful component and after implementing it I will be ready to work on different parts of the app. I could implement it in the next 4 days.

[Ajand]

A report on the state of the task:
First of all, my estimation for this component was far off and I think the reasons were:

1. I overestimate my fluency in vuejs
2. I overestimate my understanding of project structure
3. I underestimate the complexity of resizing images using canvas without adding a dependency that needed a Bicubic Interpolation algorithm which is fairly complex.

So I decided to change the route from making a canvas-based image editing to use native image and div and CSS to masking to the proper ratio. I ended up splitting into 2 components:

1. Image Uploader
2. Image Editor

currently, I created the image editor component which will take an image and a desiredRatio and user is able to zoom in/out and move and select which part of image he wants from ratio. But the output should be discussed.

In the image editor I just managed to add darg and drop part. I think I need one more week to finish the component.

Screencast.2021-10-10.04.25.58.mp4

[Ajand]

For ImageEditor There going to be three tasks:

• Making a new image with the coordinates of the select box for png, jpeg and gif
• Compress the image till it gets below the given size ( in this case 500kb )
• Create a new SVG with the coordinates of the select box as the container of the SVG

For ImageUploader:

• Support for multi upload
• Change in the validation logic
• Drag & Drop
• Discard Image