In order to use this WordPress plugin, your website/server needs to meet the following requirements:

If you’re using Composer to manage WordPress, add ResponsivePics to your project’s dependencies:

$ composer require "clarifynl/responsive-pics"

Then activate the plugin with wp-cli:

$ wp plugin activate responsive-pics

1. Download the latest zip of this repo.
2. In your WordPress admin panel, navigate to Plugins->Add New.
3. Click Upload Plugin.
4. Upload the zip file that you downloaded.
5. Activate the plugin after installation.

Currently the <picture> element and srcset and sizes attributes on the <img> element are supported in all modern browsers except Internet Explorer 11.

In order to enable support for the picture element and associated features in browsers that do not yet support them, you can use a polyfill. We recommend using Picturefill.

To install Picturefill in your wordpress theme as a node module, run the following command from your theme directory:

npm

npm install --save picturefill

Yarn

yarn add picturefill

And import the package in your theme’s global javascript file:

import 'picturefill';

Responsive Pics uses the following default variables:

By default, ResponsivePics will use the Bootstrap 4 SCSS variables for defining:

The amount of grid columns:

$grid-columns: 12;

The grid gutter width in pixels:

$grid-gutter-width: 30px;

The grid breakpoints in pixels:

$grid-breakpoints: (
 xs: 0,
 sm: 576px,
 md: 768px,
 lg: 992px,
 xl: 1200px,
 xxl: 1400px
);

And the maximum widths of the containers in pixels:

$container-max-widths: (
 sm: 540px,
 md: 720px,
 lg: 960px,
 xl: 1140px,
 xxl: 1320px
);

Note: ResponsivePics will add the xs container max width for you (= 576), based upon the default sm grid breakpoint (= 576px).

If you have customized the bootstrap defaults or if you’re using a different grid system (Foundation, Materialize etc.), or even if you want to add extra breakpoints & container widths, you can pass your own grid variables to the Responsive Pics library.

Add these lines to your theme’s functions.php and make sure to check if the ResponsivePics class exists:

/*
 * Set Responsive Pics variables
 */
if (class_exists('ResponsivePics')) {
	ResponsivePics::setColumns(12);
	ResponsivePics::setGutter(30);
	ResponsivePics::setBreakPoints([
		'xs'    => 0,
		'sm'    => 576,
		'md'    => 768,
		'lg'    => 992,
		'xl'    => 1200,
		'xxl'   => 1400,
		'xxxl'  => 1600,
		'xxxxl' => 1920
	]);
	ResponsivePics::setGridWidths([
		'xs'    => 576,
		'sm'    => 768,
		'md'    => 992,
		'lg'    => 1200,
		'xl'    => 1400,
		'xxl'   => 1600,
		'xxxl'  => 1920
	]);
}

Any variable used in Responsive Pics can be overridden by running one of these set functions:

ResponsivePics::setMaxWidthFactor(4);
ResponsivePics::setLazyLoadClass('lozad');
ResponsivePics::setLqipWidth(100);
ResponsivePics::setLqipClass('blurred');
ResponsivePics::setImageQuality(85);
ResponsivePics::setRestApiCache(true);
ResponsivePics::setRestApiCacheDuration(86400); // 1 day

You can retrieve any variables used in Responsive Pics by running one of these get functions:

ResponsivePics::getColumns();              // Will return $columns
ResponsivePics::getGutter();               // Will return $gutter
ResponsivePics::getBreakpoints();          // Will return $breakpoints
ResponsivePics::getGridWidths();           // Will return $grid_widths
ResponsivePics::getMaxWidthFactor();       // Will return $max_width_factor
ResponsivePics::getLazyLoadClass();        // Will return $lazyload_class
ResponsivePics::getLqipWidth();            // Will return $lqip_width
ResponsivePics::getLqipClass();            // Will return $lqip_class
ResponsivePics::getImageQuality();         // Will return $image_quality
ResponsivePics::getRestApiCache();         // Will return $wp_rest_cache
ResponsivePics::getRestApiCacheDuration(); // Will return $wp_rest_cache_duration