custommedia

lazysizes custommedia extension

lazySizes custommedia extension allows you to automatically sync and manage your breakpoints between your CSS and the media attributes of your "picture > source" elements using the customMedia option of lazySizes.

Configuration via CSS

The following CSS...

html:after {
	display: none;
	content: '--small: (max-width: 500px) | --medium: (max-width: 1100px) | --large: (max-width: 1500px)';
}

... allows you to write the following markup:

<picture>
	<!--[if IE 9]><video style="display: none;"><![endif]-->
	<source
		data-srcset="http://placehold.it/500x600/11e87f/fff"
		media="--small" />
	<source
		data-srcset="http://placehold.it/700x300"
		media="--medium" />
	<source
		data-srcset="http://placehold.it/1400x600/e8117f/fff"
		media="--large" />
	<!--[if IE 9]></video><![endif]-->
	<img
		src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
		class="lazyload"
		data-srcset="http://placehold.it/1800x900/117fe8/fff"
		alt="image with artdirection" />
</picture>

The parsed custom media query object can be accessed through the lazySizesConfig.customMedia option object:

window.lazySizesConfig.customMedia; // returns:

/*
{
	'--small': '(max-width: 500px)',
    '--medium': (min-width: 1100px)',
    '--large': '(max-width: 1100px)'
}
*/

/*
 Simple Sass mixin to share a map of breakpoints between CSS and JS
 Usage:
 $breakpoints: (
   --small: (max-width: 480px),
   --medium: (max-width: 1024px),
   --large: (min-width: 1280px)
 );

 html:after {
 	@include shareBreakpoints($breakpoints);
 }
*/
@mixin shareBreakpoints($map , $cssprop: content){
  $description: '';

  @each $property, $value in $map
   {
    @if $description !=  '' {
      $description: $description + ' | ';
    }
    $description: $description + $property +': '+ inspect($value);
  }

  display: none;
  #{$cssprop}:  $description;
}