Image Handling Umbrella Issue

[haileypate]

- 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

[haileypate]

related use cases found so far:

• To select an image for use in a post, a user enters a URL that points to an external file of their choosing (from https://github.com/netlify/netlify-cms/issues/1293)
• A user wants to be able to see image thumbnails in the media browser after a large file has been uploaded (from https://github.com/netlify/netlify-cms/issues/1206)
• A user wants to configure netlifycms to organize uploaded files into subfolders that can be viewed in the media broswer (from https://github.com/netlify/netlify-cms/issues/1046)
  • similar: A user wants the ability to organize uploaded images by month and year (also from https://github.com/netlify/netlify-cms/issues/1046)
• A user can upload multiple files at once (from https://github.com/netlify/netlify-cms/issues/1032)
• A user can drag and drop files to upload (from https://github.com/netlify/netlify-cms/issues/1032)
• A user can select multiple images at once for deletion (https://github.com/netlify/netlify-cms/issues/1032)
• A site designer/maintainer wants netlifyCMS to display the value of an image's src attribute according to a path set by the netflifyCMS API (instead of displaying the file's raw.githubusercontent.com endpoint), in order to allow for image caching (https://github.com/netlify/netlify-cms/issues/990)
• A user can view SVG thumbnails in the media uploader (from https://github.com/netlify/netlify-cms/pull/954)
• Support for third party image services (from https://github.com/netlify/netlify-cms/pull/432)
• Media library items can be previewed and approved as part of an editorial workflow, before they are committed to a production branch (https://github.com/netlify/netlify-cms/issues/1344)
• As part of an editorial workflow, a reviewer of a pull request can see and approve a new collection item and related media items within a single pull request (https://github.com/netlify/netlify-cms/issues/1344)

[erquhart]

Okay so first of all, fantastic work on this issue, thank you!!

Whole lot to take in here. Here we go.

Features feedback

• Providing a warning when the size/dimensions are wrong We don't yet have the concept of "warnings" in our field validation - it's a pass/fail thing, and failure means you can't save the entry, so implementing validation warnings would make a good standalone issue.
• Offering a preview of the image with cropping/zooming Another good standalone issue candidate. I recommend react-image-crop, as it seems to have the most momentum and is in very active development.
• Previews for different contexts This one is a mouthful. We would effectively need to leverage the entire entry editor interface for image editing, where the left side has previewing/cropping/other controls, and the right side previews the image in various contexts, probably via a preview template just as entry previews use. Needs a standalone issue.
• The publishing images out of context problem/hiding the main Media button It feels odd to think of not having a way to access all of things you've uploaded as an editor, instead having to open each individual entry. No way to search through them all, etc. But disabling the media button is worth discussion for sure. Any chance allowing separate media folders a la (#1046) would help?

This issue

Totally agree on the need for a primary image handling issue that references the others, sort of an epic. I've renamed this issue to serve that purpose, and I'll add it to the v2 issue as it seems folks are primarily interested in improving image handling for 2.0.

[mb21]

see also https://github.com/netlify/netlify-cms/issues/2243

[TrySound]

https://github.com/ricardo-ch/react-easy-crop supports zooming unlike react-image-crop