{"id":15021865,"url":"https://github.com/irishdan/responsiveimagebundle","last_synced_at":"2025-04-10T20:12:13.834Z","repository":{"id":56993428,"uuid":"56970527","full_name":"irishdan/ResponsiveImageBundle","owner":"irishdan","description":"Responsive images for symfony3 projects","archived":false,"fork":false,"pushed_at":"2019-05-02T07:25:11.000Z","size":1184,"stargazers_count":2,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T17:52:51.325Z","etag":null,"topics":["crop-image","filesystem","image-processing","intervention-image","media","responsive-images","symfony3","twig-templates"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/irishdan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-24T12:34:45.000Z","updated_at":"2024-06-27T13:45:39.000Z","dependencies_parsed_at":"2022-08-21T10:40:40.706Z","dependency_job_id":null,"html_url":"https://github.com/irishdan/ResponsiveImageBundle","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irishdan%2FResponsiveImageBundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irishdan%2FResponsiveImageBundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irishdan%2FResponsiveImageBundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irishdan%2FResponsiveImageBundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/irishdan","download_url":"https://codeload.github.com/irishdan/ResponsiveImageBundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248288361,"owners_count":21078903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["crop-image","filesystem","image-processing","intervention-image","media","responsive-images","symfony3","twig-templates"],"created_at":"2024-09-24T19:57:09.370Z","updated_at":"2025-04-10T20:12:13.791Z","avatar_url":"https://github.com/irishdan.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ResponsiveImageBundle\n\n[![Build Status](https://travis-ci.org/irishdan/ResponsiveImageBundle.svg?branch=master)](https://travis-ci.org/irishdan/ResponsiveImageBundle)\n[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/irishdan/ResponsiveImageBundle/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/irishdan/ResponsiveImageBundle/?branch=master)\n\n## Overview:\n\nThe ResponsiveImageBundle adds the ability to easily create styled and responsive images (scaled, cropped, greyscale) in Symfony3.\nResponsive images are generated as \u0026lt;picture\u003e tags or as \u0026lt;mg\u003e tags with sizes and scrset attributes. \n\nA crop and focus area widget is also provided to ensure that cropped images always include the most important part of the image.\n\nThe bundle uses [FlySystem](http://flysystem.thephpleague.com/) filesystem abstraction layer giving you control over where images are stored.\nEvents are used to drive the system, giving more flexibiltiy and the ability to implement queuing of intensive image processing. \n\n## Features\n\n- Image objects are stored via Doctrine ORM\n- Handles uploading images to a \"[FlySystem](http://flysystem.thephpleague.com/)\" filesystem \n- Images styles are defined in configuration.\n- Breakpoints and pictures sets are defined in configuration\n- Handles creation of styled images on the fly (as they are viewed) if using a local filesystem\n- Includes a widget to define an image's crop and focus areas giving art direction to styled images\n\n## Quick and basic setup\n\nOut of the box, ResponsiveImage bundle should work with minimal configuration.\n\n### Step 1: Download, enable the bundle and import its services and configuration\n\nDownload with composer\n```\ncomposer require irishdan/responsive-image-bundle\n```\nEnable the bundle and OneupFlysystem in the kernel\n```php\n// app/AppKernel.php\n\npublic function registerBundles()\n{\n    $bundles = array(\n        // ...\n        new IrishDan\\ResponsiveImageBundle\\ResponsiveImageBundle(),\n        new Oneup\\FlysystemBundle\\OneupFlysystemBundle(),\n    );\n}\n```\n\n### Step 2: Import its services, default configuration and the local image routing\n\nImport responsive image services, default and filesystem configuration.\n```\nimports:\n    - { resource: \"@ResponsiveImageBundle/Resources/config/services.yml\" }\n    - { resource: \"@ResponsiveImageBundle/Resources/config/config.responsive_image_defaults.yml\" }\n    - { resource: \"@ResponsiveImageBundle/Resources/config/config.responsive_image_filesystem.yml\" }\n```\n\nImport the routing for local on the fly image generation.\n\n```yml\nresponsive_image:\n    resource: \"@ResponsiveImageBundle/Resources/config/routing.yml\"\n    prefix:   /\n```\n\n### 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.\n\n```php\nphp bin/console responsive_image:generate:entity\nphp bin/console responsive_image:generate:crud\n```\nWith 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.\n\n### Step 4: Define some image styles in your [configuration](Resources/doc/configuration.md) file. (Usually config.yml)\n\n```yml\nresponsive_image:\n    image_styles:\n        groovy_thumbnail_style:\n            effect: crop\n            width: 180\n            height: 180\n        groovy_thumbnail_style_base:\n            effect: scale\n            width: 240\n        groovy_thumbnail_style_mobile:\n            effect: scale\n            height:480\n        groovy_thumbnail_style_mobile:\n            effect: crop\n            width: 200\n            height: 300\n            greyscale: true\n\n```\nYou can now [render](Resources/doc/rendering.md) a styled in your twig template like so:\n ```\n    {{ styled_image(image, 'groovy_thumbnail_style') }}\n\n ```\n### Step 5: Define some breakpoints and \"picture sets\"\n\n```yml\nbreakpoints:\n    base: \n        media_query: 'min-width: 0px'\n    mobile: \n        media_query: 'min-width: 300px'\n    desktop: \n        media_query: 'min-width: 1100px'\n    groovey_picture_set:\n        fallback: 'groovy_thumbnail_style'\n        sources:\n            base: groovy_thumbnail_style_base\n            mobile: groovy_thumbnail_style_mobile\n            desktop: groovy_thumbnail_style_desktop\n\n```\nYou can now render \u0026lt;picture\u003e [responsive images](Resources/doc/rendering.md) or render [responsive background image css](Resources/doc/rendering.md) in twig templates\n\n```\n\u003chead\u003e\n    {{ background_responsive_image(image, 'picture_set_name', '#header') }}\n\u003c/head\u003e\n\u003cbody\u003e\n    {{ picture_image(image, 'groovey_picture_set') }}\n\u003c/body\u003e\n```\n\n### Step 6: Define some size sets\n\n```yml\nresponsive_image:\n    size_sets:\n        blog_sizes:\n            fallback: 'groovy_thumbnail_style_base'\n            sizes:\n                10vw:\n                    breakpoint: 'mobile'\n            srcsets: [ 'groovy_thumbnail_style_mobile', 'groovy_thumbnail_style_desktop' ]\n\n```\nYou can now render \u0026lt;img\u003e [responsive images](Resources/doc/rendering.md) width srcset and sizes attributes in twig templates.\n\n```\n    {{ sizes_image(image, 'blog_sizes') }}\n```\n\n## Documentation\n\n- [Installation and Setup](Resources/doc/installation.md)\n- [Filesystems](Resources/doc/filesystem.md)\n- [Image entities](Resources/doc/entities.md)\n- [Uploading](Resources/doc/uploading.md)\n- [Styled image generation](Resources/doc/styled-image-generation.md)\n- [Image rendering](Resources/doc/rendering.md)\n- [Art Direction](Resources/doc/art-direction.md)\n- [Commands](Resources/doc/commands.md)\n- [Configuration](Resources/doc/configuration.md)\n- [Urls](Resources/doc/urls.md)\n- [Events](Resources/doc/events.md)\n- [Tests](Resources/doc/test.md)\n    \n## Attribution\n\n- [Intervention](http://image.intervention.io/) is the standalone PHP Imagine Library is used by this bundle for image transformations\n- [OneupFlysystemBundle](https://github.com/1up-lab/OneupFlysystemBundle) which used [Flysystem](https://flysystem.thephpleague.com/) filesystem astraction library, is required by this bundle\n- 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)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firishdan%2Fresponsiveimagebundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Firishdan%2Fresponsiveimagebundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firishdan%2Fresponsiveimagebundle/lists"}