# September 4, 2019

# Notes for presentation on SRCSET and images in general

http://msuwebdesign.com/lectures/lecture14-images.html
http://msuwebdesign.com/lectures/lecture18-responsive-code.html#retina-images
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

# Simple retina with Imgix

<img srcset="
    @(heroImage.ImgixUrl())?w=440&auto=compress 1x,
     @(heroImage.ImgixUrl())?w=440&auto=compress&dpr=2 2x"
     src="@(heroImage.ImgixUrl())?w=440&auto=compress"
     alt="Sea Cuisine: Smart" />

1
2
3
4
5

# Different crop with Imgix

<picture>
  <source media="(min-width: 64em)"
      srcset="
          @(image.ImgixUrl())?w=900&h=1200&auto=compress&fit=crop 1x,
          @(image.ImgixUrl())?w=900&h=1200&auto=compress&fit=crop&dpr=2 2x" />
  <source media="(min-width: 40em)"
      srcset="
          @(image.ImgixUrl())?w=900&h=1200&crop=entropy&auto=compress&fit=crop 1x,
          @(image.ImgixUrl())?w=900&h=1200&crop=entropy&auto=compress&fit=crop&dpr=2 2x" />
  <source srcset="
          @(image.ImgixUrl())?w=742&h=506&auto=compress&fit=crop&crop=entropy 1x,
          @(image.ImgixUrl())?w=742&h=506&auto=compress&fit=crop&crop=entropy&dpr=2 2x" />
  <img src="@(image.ImgixUrl())?w=900&h=1200&&fit=crop" alt="@image.Alt" />
</picture>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Marlin Network Hubspot images

<picture>
  <source media="(min-width: 375px) and (max-width: 542px)" :srcset="ctaData.medium_rectangle.url">
  <source media="(min-width: 543px) and (max-width: 921px)" :srcset="ctaData.mobile_leaderboard.url">
  <source media="(min-width: 922px) and (max-width: 1288px)" :srcset="ctaData.leaderboard.url">
  <source media="(min-width: 1289px)" :srcset="ctaData.billboard.url">
  <img :src="ctaData.billboard.url">
</picture>

1
2
3
4
5
6
7

# Retina new tap site

<img
  :srcset="itemData.data.listing_image.url + ', ' + itemData.data.listing_image.retina.url + ' 2x'"
  :src="itemData.data.listing_image.url"
  :alt="itemData.data.listing_image.alt"
>

1
2
3
4
5

# Reviewing M's BSH style fix work

made small change

# TAP, finishing home page block, doing a bit of accessibility work.

Need to think about landmarks EARLIER. hard to change later on.

# Lupe meeting on client feature request. Need explanations on most.

Added some to the roadmap

# JMS analytics stuff again

final decision was to make label setable, with fallback to button text
finalizing for launch, but more tasks later

# Lupe, working on prototype

added my new type scale, moved meta to top under title
trying (vue-filter-date-format)[https://www.npmjs.com/package/vue-filter-date-format]
better! (nuxt date functions module)[https://github.com/nuxt-community/date-fns-module]