decaporg / decaporg/decap-cms

Image Handling Umbrella Issue

Open
#1,321 4 comments 22 reactions 0 assignees View on GitHub
area: media-library area: ux pinned
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

**- Do you want to request a *feature* or report a *bug*?**
Feature

**- What is the current behavior?**
- When a content creator wants to upload an image to their website, they click on a widget that has been prepared for them based the related template's needs.

- The user clicks on the widget's `Choose an image` button, then either:
- selects from a list of available files by clicking on a thumbnail, or
- uploads a new image and clicks that thumbnail,

- Both of which add the selected thumbnail to the widget area and the template preview area

### Some background UX considerations/notes from my own past life observations:
_When images on websites go wrong, it's often because:_
- the content publisher uploaded an image that was too small
- the content publisher chose the image because it was in a handy list and available, rather than curating it specifically for the post context
- the image looks good on one device (mobile) and not another (desktop)
- css or js cropped/transformed the photo in a way that didn't work with the image's context/dimensions/resolution
- the file is super huge and people click away before it downloads

One of the reasons I'm interested in NetlifyCMS is I want to provide a no-code content publishing option for the websites I build... all while retaining the ability to control art direction and code quality they've asked me to provide. From this perspective...

#### Some feature ideas for how we might help content publishers and the website creators/maintainers:
- provide a warning to users when an image they've selected doesn't meet minimum width and height measurements, or perhaps exceeds a file size threshold set by the site maintainer
- offer a preview of the photo with cropping and zoom that publishers could play with to help decide the best image settings (that could then become part of the HTTP request to the ImgIX (or whatever service) API that processes and returns the photos needed
- previews for different contexts that have different aspect ratios
- for example, if the widget is for featured images, the image uploaded will likely be used in multiple templates (like for singular post, a post preview, a search result, a related post thumbnail) all of which need to be styled for small to large screen sizes. So what if netlifyCMS could show the publisher at time of upload...
- here's how your image will look in this template...
- here's how it will look in your post index/search result/other page somewhere..
- here's a preview for each (with target aspect ratio & zoom)... do these look okay? If not, let us know what needs to change
- and then they do that by dragging/pinching/zooming preview into place...
- and then that gets captured and leveraged by whatever image processing and delivery service people are using.

While researching some of the different players in the image processing/delivery game, I was hoping to find a plugin or embeddable form that services like ImgIX offered that could be shoved into a widget to help content publishers send image their processing requests.. but didn't find anything

#### Stuff on my radar right now to research more:
- ImgIX
- UploadCare
- imgix.js
- react-crop, react-cropper
- https://imageoptim.com/api
- other things i'll come refactor into this post later!

In my current approach to web design, I don't want content publishers uploading images out of context. (I.e., I'll likely hide the Media button that's up in the main site nav bar to discourage people from just uploading photos without a specific place or use case on their website in mind.) **I realize that my use cases and opinionated approach aren't shared by all**

... so question --- Is there a place where we're collecting use cases for the image upload feature? How about we start collecting them to see what we have in common? Can we use this issue? :D

Who else has use cases for the image uploader that they wanna share? What are some of their UX needs?

hailey to do:
- [x] go find other issues that have image-related use cases described and reference them here

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.