PHPackages                             tomlutzenberger/yii2-responsive-image - 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. tomlutzenberger/yii2-responsive-image

ActiveYii2-extension[Image & Media](/categories/media)

tomlutzenberger/yii2-responsive-image
=====================================

Create thumbnails with custom presets and use them in responsive widgets

v0.2.1(4y ago)11641[1 issues](https://github.com/tomlutzenberger/yii2-responsive-image/issues)MITPHPPHP >=5.4.0CI failing

Since Dec 5Pushed 1y ago1 watchersCompare

[ Source](https://github.com/tomlutzenberger/yii2-responsive-image)[ Packagist](https://packagist.org/packages/tomlutzenberger/yii2-responsive-image)[ RSS](/packages/tomlutzenberger-yii2-responsive-image/feed)WikiDiscussions master Synced today

READMEChangelog (7)Dependencies (4)Versions (8)Used By (0)

[![Yii2 Responsive Image](logo.png)](logo.png)

[![GitHub release (latest SemVer)](https://camo.githubusercontent.com/21a1d9a41487fccbbc1696e4baad2189db40becafc9f3a4a4332f2485daa6901/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f746f6d6c75747a656e6265726765722f796969322d726573706f6e736976652d696d616765)](https://camo.githubusercontent.com/21a1d9a41487fccbbc1696e4baad2189db40becafc9f3a4a4332f2485daa6901/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f746f6d6c75747a656e6265726765722f796969322d726573706f6e736976652d696d616765)[![Packagist PHP Version Support](https://camo.githubusercontent.com/0c4bb46a0eb4f68a0a07562b92c2445aecc74c443e8695c57a7231cb62d53460/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f746f6d6c75747a656e6265726765722f796969322d726573706f6e736976652d696d616765)](https://camo.githubusercontent.com/0c4bb46a0eb4f68a0a07562b92c2445aecc74c443e8695c57a7231cb62d53460/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f746f6d6c75747a656e6265726765722f796969322d726573706f6e736976652d696d616765)[![Libraries.io dependency status for GitHub repo](https://camo.githubusercontent.com/6fed8e6df08f89e6a24de4f7eb50c7ec6c00a62768758c76238fcc00a5bd509f/68747470733a2f2f696d672e736869656c64732e696f2f6c6962726172696573696f2f6769746875622f746f6d6c75747a656e6265726765722f796969322d726573706f6e736976652d696d616765)](https://camo.githubusercontent.com/6fed8e6df08f89e6a24de4f7eb50c7ec6c00a62768758c76238fcc00a5bd509f/68747470733a2f2f696d672e736869656c64732e696f2f6c6962726172696573696f2f6769746875622f746f6d6c75747a656e6265726765722f796969322d726573706f6e736976652d696d616765)[![Packagist Downloads](https://camo.githubusercontent.com/3b5d5cf8d4a936e2d1e367e87fd3615a9e3d3713c1f42221e6675d0cd7509b08/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f746f6d6c75747a656e6265726765722f796969322d726573706f6e736976652d696d616765)](https://camo.githubusercontent.com/3b5d5cf8d4a936e2d1e367e87fd3615a9e3d3713c1f42221e6675d0cd7509b08/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f746f6d6c75747a656e6265726765722f796969322d726573706f6e736976652d696d616765)[![Lines of code](https://camo.githubusercontent.com/6ecc788c82fd9a3d83a5553997f2ddf82c0bb2e3ab76835e1d6768732203a332/68747470733a2f2f696d672e736869656c64732e696f2f746f6b65692f6c696e65732f6769746875622f746f6d6c75747a656e6265726765722f796969322d726573706f6e736976652d696d616765)](https://camo.githubusercontent.com/6ecc788c82fd9a3d83a5553997f2ddf82c0bb2e3ab76835e1d6768732203a332/68747470733a2f2f696d672e736869656c64732e696f2f746f6b65692f6c696e65732f6769746875622f746f6d6c75747a656e6265726765722f796969322d726573706f6e736976652d696d616765)[![Quality Gate Status](https://camo.githubusercontent.com/1d5b860c130566b85e6777d2e906a76666950c99fa61d4dc46fd75a73ae1df16/68747470733a2f2f736f6e6172636c6f75642e696f2f6170692f70726f6a6563745f6261646765732f6d6561737572653f70726f6a6563743d746f6d6c75747a656e6265726765725f796969322d726573706f6e736976652d696d616765266d65747269633d616c6572745f737461747573)](https://sonarcloud.io/dashboard?id=tomlutzenberger_yii2-responsive-image)[![Maintenance](https://camo.githubusercontent.com/652950e93cdb2b41c0c752ae200d6defea506fa6b49a80fc38c349f9757c08cc/68747470733a2f2f696d672e736869656c64732e696f2f6d61696e74656e616e63652f7965732f32303232)](https://camo.githubusercontent.com/652950e93cdb2b41c0c752ae200d6defea506fa6b49a80fc38c349f9757c08cc/68747470733a2f2f696d672e736869656c64732e696f2f6d61696e74656e616e63652f7965732f32303232)

Yii2 Responsive Image
=====================

[](#yii2-responsive-image)

Create thumbnails with custom presets and use them in responsive widgets

Installation
------------

[](#installation)

The preferred way to install this extension is through [composer](http://getcomposer.org/download/).

Either run

```
php composer.phar require --prefer-dist tomlutzenberger/yii2-responsive-image "*"

```

or add

```
"tomlutzenberger/yii2-responsive-image": "*"

```

to the required section of your `composer.json` file.

Usage
-----

[](#usage)

Once the extension is installed, add the component to your `web.php`:

```
    // ...
    'components' => [
        // ...
        'responsiveImage' => [
            'class'   => 'TomLutzenberger\ResponsiveImage\components\ResponsiveImage',
            'presets' => [
                // Your presets here
            ],
        ],
    ],
```

### Defining a preset

[](#defining-a-preset)

A preset is like a template for both the thumbnail generator and the picture widget.

```
    'preset-name' => [
        // Path where the source images are stored
        // Must be absolute and web-accessible -> @webroot
        // Will be used to bulk-generate via console command
        // Required
        'srcPath'         => '@webroot/img/some_path',

        // Path where the thumbnails should be stored
        // Must be absolute and web-accessible -> @webroot
        // If not set, component's defaultTargetPath will be used
        // Optional
        'targetPath'      => '@webroot/img/some_path/preset-name',

        // File extension of the thumbnails
        // If not set, thumbnail will have the same extension as source file
        // Optional
        'targetExtension' => 'jpg',

        // Thumbnail width and height in pixels
        // At least one of them is required
        'width'           => 480,
        'height'          => 400,

        // Image quality in percent
        // Optional
        'quality'         => 80,

        // Viewport breakpoints for the Picture widget
        // Thumbnails gets only displayed within this breakpoint (min and/or max)
        // At least one of them is required
        'breakpointMin'   => 992,
        'breakpointMax'   => 1200,

        // Enable/disable cache-busting for a single preset
        // Optional, defaults to `true`
        'cacheBusting'    => true,
    ],
```

### Using the picture widget

[](#using-the-picture-widget)

Just set the source image and the presets you want to use.

**Important:**

- Path of the source image must be an alias and web-accessible, so either `@web` or `@webroot`
- Path of the source image need to match `srcPath` of the preset

```