ResponsiveImages Plugin for October CMS

Automatically generate and serve images for your visitor's viewport size without changing your theme!

Features

• Auto resize images
• Inline SVG helper function

Auto resizing of images

This plugin provides a middleware that adds srcset and sizes attributes to all locally served images in your html response.

It turns this

<img width="500" src="/storage/app/media/image.jpg">

into this

<img width="500" src="/storage/app/media/image.jpg" srcset="/storage/temp/public/be7/4d6/0cc/image__400.jpg 400w, /storage/temp/public/be7/4d6/0cc/image__768.jpg 768w, /storage/temp/public/be7/4d6/0cc/image__1024.jpg 1024w" sizes="(max-width: 500px) 100vw, 500px">

It automatically creates resized copies of the image and serves the most fitting one to your visitor.

All image copies are saved in your public temp path. Remote file systems are currently untested.

The images are generated on the first page load. Depending on the source image size this may take a few seconds. Subsequent page loads will be faster since the images are only resized once.

Configuration

Three image sizes are created by default: 400, 768 and 1024 pixels.

You can change these values by changing the settings in the backend.

Alternative src and srcset attributes

If you want to use an alternative src attribute you can change this via the backend settings page.

This is useful if you are using a plugin like jQuery.lazyLoad where the image is initially linked via a data-original attribute.

If your plugin requires an alternative srcset attribute (like verlok/LazyLoad) this can also be specified via the backend settings.

Global class attributes

If you want to add a class to every processed image you can configure this via the backend settings.

This is useful if you want to add Bootstrap's img-responsive class to all images on your website.

Pre-generate images

You can use the php artisan responsive-images:generate command to pre-generate responsive images. The command uses October's pages.menuitem.* events to build a list of all available URLs and pre-generates all images used on these pages.

Test results

I have tested this plugin on a page with 20 hd wallpapers from pixabay.

Viewport width	Transferred file size
1920 px	21.8 MB
1024 px	3.1 MB
768 px	2.0 MB
400 px	0.8 MB

Inlining SVG images

This plugin registers a simple svg helper function that enables you to inline SVG images from your project.

<!-- search in theme directory -->
<div class="inline-svg-wrapper">
	{{ svg('assets/icon.svg') }}
</div>

<!-- start with a / to search relative to the project's root -->
<div class="inline-svg-wrapper">
	{{ svg('/plugins/vendor/plugin/assets/icon.svg') }}
</div>

Using variables

Aside from inlining the SVG itself the helper function will also pass any variables along to the SVG and parse it using October's Twig parser. This means you can easily create dynamic SVGs.

<!-- icon.svg -->
<svg fill="{{ fill }}" width="{{ width | default(800) }}"> ...

<!-- You can pass variables along as a second parameter -->
<img src="{{ svg('/plugins/xy/assets/icon.svg', {fill: '#f00', width: '200'}) }}">

Bug reports

It is very likely that there will be bugs with some specific html markup. If you encounter such a bug, please report it.

Future plans

• Exclude/Include-Filters
• Maybe a component to enable the middleware only on some pages