Picture Element

[cdowdy]

use the picture element with a separate twig function like:

{{ picture( record.image, 'configName') }}

Problems with this.

• glide (intervention) doesn't support webp yet so type switching could get weird.
• config setup

The way the config is setup right now could get messy since the picture element also allows multiple files at a particular media query. ie:

<picture>
  <source srcset="image-big.png, image-big-2x.png 2x"       
          media="(min-width: 990px)">
  <source srcset="image-medium.png, image-medium-2x.png 2x" 
          media="(min-width: 750px)">
  <img srcset="image-small.png, image-small-2x.png 2x" 
       alt="Some Fancy Pants Alt Text">
</picture>  

So the current config setup in 'modifications' would fail at here. Since we take each array inside modifications and use that for the files in srcset in an img tag. IE:

picture:
  class: []
  altText: '~'
  modifications:
    small:
      w: 900
      crop: 'crop-top'
    medium:
      w: 600
    large:
      w: 300 

Either We'd have to setup a config option for media queries and use those as our basis, make the modifications array even messier by using more arrays:

modifications:  
  media_queries: [ 'min-width: 900', 'min-width: 700' ]  
  mediaQuery1:  
    small:
      w: 900
      crop: 'crop-top'
    medium:
      w: 600
    large:
      w: 300  
  media2:  
   small:
      w: 900
      crop: 'crop-top'
    medium:
      w: 600
    large:
      w: 300  

This all sounds dumb, is fragile and allows for to many easy to make errors.

Type Switching

Since intervention doesn't do webp (or jxr) we would need to pass through those images. PHP doesn't have a IMAGETYPE_WEBP like for jpg/png/gif but imagewebp exists in php 5.5+. So we'd need to fork and modify Flysystems getmimetype method which I'm not going to do right now.

Passing through those image's also negates the use of any glide modifications. This is a bag of snakes :)

So in order to do type switching with webp, jxr and jpeg2000 for example:

<picture>
  <source srcset='fancy-pants.jxr' type='image/vnd.ms-photo'>
  <source srcset='fancy-pants.jp2' type='image/jp2'>
  <source srcset='fancy-pants.webp' type='image/webp'>
  <img srcset='fancy-pants.png' alt='alt-de-alt'>
</picture> 

we need a way to reliably get the mimetype and then let those passthrough without using intervention to modify the images. This can be done without the extension so maybe tell uses... "nah brah manually build that baaad thang instead".

Soooo this issue here is for me to come back at another time look at this and think of a better way to handle the picture element.