PHPackages                             offline/oc-responsiveimages-plugin - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. offline/oc-responsiveimages-plugin

ActiveOctober-plugin[Image & Media](/categories/media)

offline/oc-responsiveimages-plugin
==================================

ResponsiveImages Plugin for October CMS

v3.0.6(1mo ago)4466725[1 issues](https://github.com/OFFLINE-GmbH/oc-responsive-images-plugin/issues)MITPHPPHP >=7.1

Since Dec 7Pushed 2mo ago6 watchersCompare

[ Source](https://github.com/OFFLINE-GmbH/oc-responsive-images-plugin)[ Packagist](https://packagist.org/packages/offline/oc-responsiveimages-plugin)[ RSS](/packages/offline-oc-responsiveimages-plugin/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (8)Dependencies (6)Versions (78)Used By (0)

ResponsiveImages Plugin for October CMS
=======================================

[](#responsiveimages-plugin-for-october-cms)

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

Features
--------

[](#features)

- [Responsive images](#responsive-images)
- [WebP conversion](#webp-conversion)
- [Focuspoint](#focuspoint)
- [Inline SVG helper function](#inlining-svg-images)

Responsive images
-----------------

[](#responsive-images)

### How it works

[](#how-it-works)

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

It turns this

```

```

into this

```

```

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

[](#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

[](#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](http://www.appelsiini.net/projects/lazyload) where the image is initially linked via a `data-original` attribute.

If your plugin requires an alternative srcset attribute (like [verlok/LazyLoad](https://github.com/verlok/lazyload)) this can also be specified via the backend settings.

#### Global `class` attributes

[](#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

[](#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

[](#test-results)

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

Viewport widthTransferred file size1920 px21.8 MB1024 px3.1 MB768 px2.0 MB400 px0.8 MBOpt-out of processing
---------------------

[](#opt-out-of-processing)

If for any reason you want an `img` tag to be completely ignored by this plugin, simply add the `data-responsive="ignore"` attribute to your tag:

```

```

Delete resized images
---------------------

[](#delete-resized-images)

Use the `php artisan responsive-images:clear` command to delete all resized images. The next time a page/image is requested, the resized copies will be created again.

WebP conversion
---------------

[](#webp-conversion)

This plugin provides an option to serve WebP images if the visiting Browser signals support for it.

Enable the WebP conversion in the backend settings. Enabling this option will add a rule to your `.htaccess` file, that checks for a `{filename}.{extension}.webp` image for every request and serves it to the client, if available.

### Console command to convert images to WebP

[](#console-command-to-convert-images-to-webp)

The plugin includes a handy console command that you can run in a cronjob that iterates through your storage directories and converts images to WebP:

```
php artisan responsive-images:convert --include=storage/app

```

This command requires the `cwebp` to be available on your server. You can [download it for your OS](https://developers.google.com/speed/webp/download)and provide the path to the binary using the `--converter-path` option.

#### Conversion errors

[](#conversion-errors)

You can find a log of failed image conversions in the `offline_responsiveimages_inconvertibles` table. If the conversion for a file failed, it will be logged in this table. The conversion will not be retried for files that failed before. To force a retry, remove the file from the table table and run the conversion command again.

### Support for other servers than Apache

[](#support-for-other-servers-than-apache)

**If you do not use Apache**, you have to configure your server to do the following:

1. Check if `image/webp` is present in the `Accepts` http header
2. Check if the requested image ends in `jp(e)g` or `png`
3. Check if the requested image + a `.webp` exists
4. *If it does*, serve it

### Apache + .htaccess

[](#apache--htaccess)

If you are using Apache with `mod_rewrite` enabled, you do not have to do anything manually. The plugin [will patch your `.htaccess` file](views/webp-rewrite.htm) if WebP support gets enabled.

### Nginx

[](#nginx)

If you are using Nginx to serve your October website, you have to modify your server configuration **manually**.

The following example should give you a good starting point.

```
user www-data;

http {
  sendfile on;
  tcp_nopush on;
  tcp_nodelay on;

  include /etc/nginx/mime.types;
  default_type application/octet-stream;

  gzip on;
  gzip_disable "msie6";

  map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
  }

  # ...

  server {
    charset utf-8;
    listen 80;

    server_name localhost;
    root /var/www/html;
    index index.php;

    location ~ \.(jpe?g|png)$ {
	add_header Vary Accept;
        try_files $uri$webp_suffix $uri/;
    }

    # ...
  }
}
```

Your `mime.types` file should additionally list the webp mime type:

```
image/webp  webp;

```

### Other servers

[](#other-servers)

We did not invest in the proper WebP detection configuration for other server software. Based on the `.htaccess` example above and the [webp-detect](https://github.com/igrigorik/webp-detect)repo you should be able to figure out what config is needed.

If you have a working example please add it via a PR to this README!

### Custom base directory path

[](#custom-base-directory-path)

If your application directory is located in a special location, you can set the `RESPONSIVE_IMAGES_BASE_DIR` environment variable to [change the source path](./webp.php#29).

```

    SetEnv RESPONSIVE_IMAGES_BASE_DIR /path/to/your/dir

```

Focuspoint
----------

[](#focuspoint)

This feature has two components to it:

#### Backend

[](#backend)

In the backend, the file upload widget is extended with a simple focus point selector.

To enable this extension simply change the type of any fileupload widget to `focuspoint` in your plugin's `fields.yaml`. This feature is off by default.

```
avatar:
    label: Avatar
-   type: fileupload
+   type: focuspoint
    mode: image
    imageHeight: 260
    imageWidth: 260
```

Once it is enabled, you can click on an uploaded image to select the focus point.

[![focuspoint-configform](https://user-images.githubusercontent.com/10140882/51920398-97a27480-23e5-11e9-91ee-612da085fdb3.JPG)](https://user-images.githubusercontent.com/10140882/51920398-97a27480-23e5-11e9-91ee-612da085fdb3.JPG)

#### Frontend

[](#frontend)

You can use the new `focus` method on any `File` model to get the source to a focus point image.

The `focus` method has the exact same API as the `thumb` method, you can specify a `height`, `width` and a `mode`.

```

```

This call will result in the following HTML:

```

```

You can disable the injection of the inline styles via the plugin's backend settings.

If you want to use any of the existing focus point JS libraries you can also define a custom container that will be place around the image. The focus coordinates can be injected as custom `data-*` attributes.

All of these settings are available on the plugin's backend settings page.

```

```

### Browser-Compatibility

[](#browser-compatibility)

Be aware that `object-fit` is not supported in IE without [using a polyfill](https://github.com/bfred-it/object-fit-images).

Inlining SVG images
-------------------

[](#inlining-svg-images)

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

```

	{{ svg('assets/icon.svg') }}

	{{ svg('/plugins/vendor/plugin/assets/icon.svg') }}

```

### Using variables

[](#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.

```

 ...
```

```

```

Bug reports
-----------

[](#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.

Upgrading
---------

[](#upgrading)

### Breaking changes in 3.0

[](#breaking-changes-in-30)

If you are using the focuspoint feature, you now have to use `type: focuspoint` to enable the feature.

```
image:
-    type: fileupload
-    focuspoint: true
+    type: focuspoint
```

###  Health Score

56

—

FairBetter than 98% of packages

Maintenance87

Actively maintained with recent releases

Popularity31

Limited adoption so far

Community25

Small or concentrated contributor base

Maturity71

Established project with proven stability

 Bus Factor1

Top contributor holds 84.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~35 days

Recently: every ~70 days

Total

76

Last Release

39d ago

Major Versions

v2.9.1 → v3.0.02025-06-28

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/8600029?v=4)[Tobias Kündig](/maintainers/tobias-kuendig)[@tobias-kuendig](https://github.com/tobias-kuendig)

---

Top Contributors

[![tobias-kuendig](https://avatars.githubusercontent.com/u/8600029?v=4)](https://github.com/tobias-kuendig "tobias-kuendig (215 commits)")[![mtellenbach](https://avatars.githubusercontent.com/u/10140882?v=4)](https://github.com/mtellenbach "mtellenbach (4 commits)")[![mauserrifle](https://avatars.githubusercontent.com/u/1580250?v=4)](https://github.com/mauserrifle "mauserrifle (4 commits)")[![patrick-durrer](https://avatars.githubusercontent.com/u/15232963?v=4)](https://github.com/patrick-durrer "patrick-durrer (4 commits)")[![matteotrubini](https://avatars.githubusercontent.com/u/7964032?v=4)](https://github.com/matteotrubini "matteotrubini (4 commits)")[![damsfx](https://avatars.githubusercontent.com/u/282242?v=4)](https://github.com/damsfx "damsfx (3 commits)")[![verenaroe](https://avatars.githubusercontent.com/u/49275087?v=4)](https://github.com/verenaroe "verenaroe (3 commits)")[![obuchmann](https://avatars.githubusercontent.com/u/3889302?v=4)](https://github.com/obuchmann "obuchmann (3 commits)")[![PubliAlex](https://avatars.githubusercontent.com/u/55833027?v=4)](https://github.com/PubliAlex "PubliAlex (2 commits)")[![redcubehost](https://avatars.githubusercontent.com/u/63918609?v=4)](https://github.com/redcubehost "redcubehost (2 commits)")[![RomainMazB](https://avatars.githubusercontent.com/u/53976837?v=4)](https://github.com/RomainMazB "RomainMazB (2 commits)")[![webeks](https://avatars.githubusercontent.com/u/10531012?v=4)](https://github.com/webeks "webeks (2 commits)")[![wpluut](https://avatars.githubusercontent.com/u/15816596?v=4)](https://github.com/wpluut "wpluut (1 commits)")[![Andi-Moser](https://avatars.githubusercontent.com/u/10222649?v=4)](https://github.com/Andi-Moser "Andi-Moser (1 commits)")[![sergei3456](https://avatars.githubusercontent.com/u/818724?v=4)](https://github.com/sergei3456 "sergei3456 (1 commits)")[![TimFoerster](https://avatars.githubusercontent.com/u/7849550?v=4)](https://github.com/TimFoerster "TimFoerster (1 commits)")[![tomaszstrojny](https://avatars.githubusercontent.com/u/8854428?v=4)](https://github.com/tomaszstrojny "tomaszstrojny (1 commits)")[![agawle](https://avatars.githubusercontent.com/u/61741591?v=4)](https://github.com/agawle "agawle (1 commits)")

---

Tags

hacktoberfestoctobercmsoctobercms-pluginresponsivepluginimagescmsresponsiveoctober

### Embed Badge

![Health badge](/badges/offline-oc-responsiveimages-plugin/health.svg)

```
[![Health](https://phpackages.com/badges/offline-oc-responsiveimages-plugin/health.svg)](https://phpackages.com/packages/offline-oc-responsiveimages-plugin)
```

###  Alternatives

[mindkomm/timmy

Advanced image manipulation for Timber.

17735.6k](/packages/mindkomm-timmy)[humanmade/gaussholder

Fast and lightweight image previews for WordPress

196119.7k](/packages/humanmade-gaussholder)[offline/oc-mall-plugin

E-commerce solution for October CMS

1744.6k2](/packages/offline-oc-mall-plugin)[abwebdevelopers/oc-imageresize-plugin

Image resizing made easy for October CMS

141.3k](/packages/abwebdevelopers-oc-imageresize-plugin)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)