Image upload, resize and storage

[rayrfan]

Overview

When an image is uploaded through media gallery, composer or olw, the app-specific logic should apply

• how many resizes for each uploaded image and their sizes
• any other resizes besides upload
• save original
• default quality
• storage path

Blog app

• 3 resizes for each uploaded image
  • lg (either max 1200)
  • md (either max 800, used in post)
  • sm (width max 400, used in gallery, featured image for post)
• featured image (1440 x 600 or maybe 1400 x 600), resize it from lg when selecting it to feature
• no original is saved
• default quality: 75

Related DB changes

#117 admin Media.cshtml
#124 schema changes for 1.1
#135 data changes for 1.1

Responsive Images

Eventually should be processed into srcset with sizes during pre-render phase of a post.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
https://css-tricks.com/video-screencasts/133-figuring-responsive-images/
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

<img data-attachment-id="320" 
data-orig-file="https://mysite.com/2018/05/painting.jpg?w=1100" 
data-orig-size="4032,3024" 
src="https://mysite.com/2018/05/painting.jpg?w=1100" 
alt="" 
srcset="https://mysite.com/2018/05/painting.jpg?w=1100 1100w, 
        https://mysite.com/2018/05/painting.jpg?w=2200 2200w, 
		https://mysite.com/2018/05/painting.jpg?w=150 150w, 
		https://mysite.com/2018/05/painting.jpg?w=300 300w, 
		https://mysite.com/2018/05/painting.jpg?w=768 768w, 
		https://mysite.com/2018/05/painting.jpg?w=1024 1024w" 
sizes="(max-width: 1100px) 100vw, 1100px">

<img data-attachment-id="261" 
data-orig-file="https://mysite.com/2017/11/watch1.jpg?w=1100" 
data-orig-size="151,200" 
data-comments-opened="1" 
data-image-title="watch.jpg" 
data-image-description="" 
data-medium-file="https://mysite.com/2017/11/watch1.jpg?w=1100?w=151" 
data-large-file="https://mysite.com/2017/11/watch1.jpg?w=1100?w=151" 
class="alignnone size-full wp-image-261" 
src="https://mysite.com/2017/11/watch1.jpg?w=1100" alt="watch.jpg" 
srcset="https://mysite.com/2017/11/watch1.jpg 151w, 
        https://mysite.com/2017/11/watch1.jpg?w=113 113w" 
sizes="(max-width: 151px) 100vw, 151px">