Skip to content

Latest commit

 

History

History

custommedia

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 

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;
}