PHPackages                             irishdan/responsive-image-bundle - 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. [File & Storage](/categories/file-storage)
4. /
5. irishdan/responsive-image-bundle

ActiveLibrary[File & Storage](/categories/file-storage)

irishdan/responsive-image-bundle
================================

A bundle for creating styled and responsive images for symfony projects

v1.1.7(8y ago)3372[3 issues](https://github.com/irishdan/ResponsiveImageBundle/issues)MITPHPPHP >=5.6.4CI failing

Since Jun 2Pushed 7y agoCompare

[ Source](https://github.com/irishdan/ResponsiveImageBundle)[ Packagist](https://packagist.org/packages/irishdan/responsive-image-bundle)[ Docs](http://danbyrne.me/projects/responsive-image-bundle)[ RSS](/packages/irishdan-responsive-image-bundle/feed)WikiDiscussions master Synced 4w ago

READMEChangelog (10)Dependencies (11)Versions (16)Used By (0)

ResponsiveImageBundle
=====================

[](#responsiveimagebundle)

[![Build Status](https://camo.githubusercontent.com/16671d113374cc4a733caee8cbcbdaba7539f61c1aae9f1e5fced09123b17a68/68747470733a2f2f7472617669732d63692e6f72672f697269736864616e2f526573706f6e73697665496d61676542756e646c652e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/irishdan/ResponsiveImageBundle)[![Scrutinizer Code Quality](https://camo.githubusercontent.com/35bc56bd234dd97904e472f2b768eb981befcc9e603da22a9045823d06b0ae06/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f697269736864616e2f526573706f6e73697665496d61676542756e646c652f6261646765732f7175616c6974792d73636f72652e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/irishdan/ResponsiveImageBundle/?branch=master)

Overview:
---------

[](#overview)

The ResponsiveImageBundle adds the ability to easily create styled and responsive images (scaled, cropped, greyscale) in Symfony3. Responsive images are generated as <picture> tags or as <mg> tags with sizes and scrset attributes.

A crop and focus area widget is also provided to ensure that cropped images always include the most important part of the image.

The bundle uses [FlySystem](http://flysystem.thephpleague.com/) filesystem abstraction layer giving you control over where images are stored. Events are used to drive the system, giving more flexibiltiy and the ability to implement queuing of intensive image processing.

Features
--------

[](#features)

- Image objects are stored via Doctrine ORM
- Handles uploading images to a "[FlySystem](http://flysystem.thephpleague.com/)" filesystem
- Images styles are defined in configuration.
- Breakpoints and pictures sets are defined in configuration
- Handles creation of styled images on the fly (as they are viewed) if using a local filesystem
- Includes a widget to define an image's crop and focus areas giving art direction to styled images

Quick and basic setup
---------------------

[](#quick-and-basic-setup)

Out of the box, ResponsiveImage bundle should work with minimal configuration.

### Step 1: Download, enable the bundle and import its services and configuration

[](#step-1-download-enable-the-bundle-and-import-its-services-and-configuration)

Download with composer

```
composer require irishdan/responsive-image-bundle

```

Enable the bundle and OneupFlysystem in the kernel

```
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new IrishDan\ResponsiveImageBundle\ResponsiveImageBundle(),
        new Oneup\FlysystemBundle\OneupFlysystemBundle(),
    );
}
```

### Step 2: Import its services, default configuration and the local image routing

[](#step-2-import-its-services-default-configuration-and-the-local-image-routing)

Import responsive image services, default and filesystem configuration.

```
imports:
    - { resource: "@ResponsiveImageBundle/Resources/config/services.yml" }
    - { resource: "@ResponsiveImageBundle/Resources/config/config.responsive_image_defaults.yml" }
    - { resource: "@ResponsiveImageBundle/Resources/config/config.responsive_image_filesystem.yml" }

```

Import the routing for local on the fly image generation.

```
responsive_image:
    resource: "@ResponsiveImageBundle/Resources/config/routing.yml"
    prefix:   /
```

### Step 3: [Install](Resources/doc/installation.md) the bundle and [generate](Resources/doc/commands.md) a [ResponsiveImage entity](Resources/doc/entities.md) and it's CRUD.

[](#step-3-install-the-bundle-and-generate-a-responsiveimage-entity-and-its-crud)

```
php bin/console responsive_image:generate:entity
php bin/console responsive_image:generate:crud
```

With the generated image [entity](Resources/doc/entities.md) and CRUD you can now, create and [upload](Resources/doc/uploading.md) images, apply '[art direction](Resources/doc/art-direction.md)' to images.

### Step 4: Define some image styles in your [configuration](Resources/doc/configuration.md) file. (Usually config.yml)

[](#step-4-define-some-image-styles-in-your-configuration-file-usually-configyml)

```
responsive_image:
    image_styles:
        groovy_thumbnail_style:
            effect: crop
            width: 180
            height: 180
        groovy_thumbnail_style_base:
            effect: scale
            width: 240
        groovy_thumbnail_style_mobile:
            effect: scale
            height:480
        groovy_thumbnail_style_mobile:
            effect: crop
            width: 200
            height: 300
            greyscale: true
```

You can now [render](Resources/doc/rendering.md) a styled in your twig template like so:

```
   {{ styled_image(image, 'groovy_thumbnail_style') }}

```

### Step 5: Define some breakpoints and "picture sets"

[](#step-5-define-some-breakpoints-and-picture-sets)

```
breakpoints:
    base:
        media_query: 'min-width: 0px'
    mobile:
        media_query: 'min-width: 300px'
    desktop:
        media_query: 'min-width: 1100px'
    groovey_picture_set:
        fallback: 'groovy_thumbnail_style'
        sources:
            base: groovy_thumbnail_style_base
            mobile: groovy_thumbnail_style_mobile
            desktop: groovy_thumbnail_style_desktop
```

You can now render <picture> [responsive images](Resources/doc/rendering.md) or render [responsive background image css](Resources/doc/rendering.md) in twig templates

```

    {{ background_responsive_image(image, 'picture_set_name', '#header') }}

    {{ picture_image(image, 'groovey_picture_set') }}

```

### Step 6: Define some size sets

[](#step-6-define-some-size-sets)

```
responsive_image:
    size_sets:
        blog_sizes:
            fallback: 'groovy_thumbnail_style_base'
            sizes:
                10vw:
                    breakpoint: 'mobile'
            srcsets: [ 'groovy_thumbnail_style_mobile', 'groovy_thumbnail_style_desktop' ]
```

You can now render <img> [responsive images](Resources/doc/rendering.md) width srcset and sizes attributes in twig templates.

```
    {{ sizes_image(image, 'blog_sizes') }}

```

Documentation
-------------

[](#documentation)

- [Installation and Setup](Resources/doc/installation.md)
- [Filesystems](Resources/doc/filesystem.md)
- [Image entities](Resources/doc/entities.md)
- [Uploading](Resources/doc/uploading.md)
- [Styled image generation](Resources/doc/styled-image-generation.md)
- [Image rendering](Resources/doc/rendering.md)
- [Art Direction](Resources/doc/art-direction.md)
- [Commands](Resources/doc/commands.md)
- [Configuration](Resources/doc/configuration.md)
- [Urls](Resources/doc/urls.md)
- [Events](Resources/doc/events.md)
- [Tests](Resources/doc/test.md)

Attribution
-----------

[](#attribution)

- [Intervention](http://image.intervention.io/) is the standalone PHP Imagine Library is used by this bundle for image transformations
- [OneupFlysystemBundle](https://github.com/1up-lab/OneupFlysystemBundle) which used [Flysystem](https://flysystem.thephpleague.com/) filesystem astraction library, is required by this bundle
- The CropFocus art direction widget javascript was created by following this [TutsPlus tutorial](http://code.tutsplus.com/tutorials/how-to-create-a-jquery-image-cropping-plugin-from-scratch-part-i--net-20994)

###  Health Score

24

—

LowBetter than 31% of packages

Maintenance0

Infrequent updates — may be unmaintained

Popularity12

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity66

Established project with proven stability

 Bus Factor1

Top contributor holds 100% 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 ~25 days

Recently: every ~19 days

Total

10

Last Release

3085d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/1085815?v=4)[Dan](/maintainers/irishdan)[@irishdan](https://github.com/irishdan)

---

Top Contributors

[![irishdan](https://avatars.githubusercontent.com/u/1085815?v=4)](https://github.com/irishdan "irishdan (3 commits)")

---

Tags

crop-imagefilesystemimage-processingintervention-imagemediaresponsive-imagessymfony3twig-templates

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/irishdan-responsive-image-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/irishdan-responsive-image-bundle/health.svg)](https://phpackages.com/packages/irishdan-responsive-image-bundle)
```

###  Alternatives

[easycorp/easyadmin-bundle

Admin generator for Symfony applications

4.3k17.9M379](/packages/easycorp-easyadmin-bundle)[rcsofttech/audit-trail-bundle

Enterprise-grade, high-performance Symfony audit trail bundle. Automatically track Doctrine entity changes with split-phase architecture, multiple transports (HTTP, Queue, Doctrine), and sensitive data masking.

1175.2k](/packages/rcsofttech-audit-trail-bundle)[sylius/sylius

E-Commerce platform for PHP, based on Symfony framework.

8.5k5.9M719](/packages/sylius-sylius)[pimcore/pimcore

Content & Product Management Framework (CMS/PIM/E-Commerce)

3.8k3.8M482](/packages/pimcore-pimcore)[sulu/sulu

Core framework that implements the functionality of the Sulu content management system

1.3k1.4M196](/packages/sulu-sulu)[2lenet/crudit-bundle

The easy like Crud'it Bundle.

1615.6k12](/packages/2lenet-crudit-bundle)

PHPackages © 2026

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