Setup

Requirements

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

Prerequisite How to check
PHP >= 5.6.x php -v
WordPress >= 3.5.x wp core version
WP-Cron enabled or a real cron job set up test WP-Cron

Installation

via Command-line

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

$ composer require "booreiland/responsive-pics"

Then activate the plugin with wp-cli:

$ wp plugin activate responsive-pics

via WordPress Admin Panel

  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.

Browser Support

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

Configuration

Variables

Responsive Pics uses the following default variables:

Variable Type Default Definition
$columns number 12 The amount of columns your grid layout uses.
$gutter number 30 The gutter width in pixels (space between grid columns).
$breakpoints array ['xs' => 0, 'sm' => 576, 'md' => 768, 'lg' => 992, 'xl' => 1200, 'xxl' => 1400] The media query breakpoints Responsive Pics will use for creating and serving your image sources.
$grid_widths array ['xs' => 576, 'sm' => 540, 'md' => 720, 'lg' => 960, 'xl' => 1140, 'xxl' => 1320] The maximum widths of your layout in pixels Responsive Pics will use for resizing your images.
$max_width_factor number 2 The maximum factor of the width to use for resizing and cropping the height of an image source.
$lazyload_class string lazyload The css class to be added on the picture img tag when lazyload is enabled.
$image_quality number 90 The image compression quality in percentage used in the WP_Image_Editor when resizing images.
$wp_rest_cache boolean false Wether to enable cache in the WP Rest API response headers.
$wp_rest_cache_duration number 3600 The cache duration (max-age) in seconds of the WP Rest API Cache-Control header.

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).

Setter Functions

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::setImageQuality(85);
ResponsivePics::setRestApiCache(true);
ResponsivePics::setRestApiCacheDuration(86400); // 1 day

Getter Functions

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::getImageQuality();         // Will return $image_quality
ResponsivePics::getRestApiCache();         // Will return $wp_rest_cache
ResponsivePics::getRestApiCacheDuration(); // Will return $wp_rest_cache_duration