{"id":18773117,"url":"https://github.com/webfactory/webfactoryresponsiveimagebundle","last_synced_at":"2025-12-13T17:30:12.597Z","repository":{"id":32734216,"uuid":"141139370","full_name":"webfactory/WebfactoryResponsiveImageBundle","owner":"webfactory","description":"Symfony bundle for responsive images","archived":false,"fork":false,"pushed_at":"2024-04-11T19:35:20.000Z","size":74,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-12T00:20:37.016Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Twig","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webfactory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-07-16T13:02:20.000Z","updated_at":"2024-04-15T15:17:20.743Z","dependencies_parsed_at":"2024-04-11T20:50:47.292Z","dependency_job_id":null,"html_url":"https://github.com/webfactory/WebfactoryResponsiveImageBundle","commit_stats":{"total_commits":58,"total_committers":7,"mean_commits":8.285714285714286,"dds":0.5862068965517242,"last_synced_commit":"3e7b88b877759f18f93d380b167b7ff7ab33f35e"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2FWebfactoryResponsiveImageBundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2FWebfactoryResponsiveImageBundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2FWebfactoryResponsiveImageBundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2FWebfactoryResponsiveImageBundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webfactory","download_url":"https://codeload.github.com/webfactory/WebfactoryResponsiveImageBundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239680983,"owners_count":19679509,"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":[],"created_at":"2024-11-07T19:32:52.079Z","updated_at":"2025-12-13T17:30:12.559Z","avatar_url":"https://github.com/webfactory.png","language":"Twig","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebfactoryResponsiveImageBundle\n\nA convenience Symfony bundle tailored for current responsive images needs of the webfactory GmbH, without any claims on\nreusability outside of this scope. Ye be warned.\n\n## Installation\n\n    composer req webfactory/responsive-image-bundle\n\nActivate the bundle, e.g. in `src/bundles.php`:\n\n```php\n\u003c?php\nreturn [\n    // ...\n    Webfactory\\ResponsiveImageBundle\\WebfactoryResponsiveImageBundle::class =\u003e ['all' =\u003e true],\n];\n```\n\nIf you intend to use lazyloading for images (which is the default), require `\"lazysizes\": \"^5.3\"` in your `/package.json`.\n\n\n## Twig macros\n\n### Responsive image:\n\n`responsiveImg(image, options)` with:\n\n- `image`: an array with the following keys:\n    - `url` (mandatory): the URL of the image \n    - `alt` (optional): the alternative text for the image. Defaults to empty string.\n    - `title` (optional): the title text for the image. Defaults to empty string.\n- `options`: an array with the following keys:\n    - `sizes` (optional): a string that sets the `sizes`-Attribut. Defaults to `auto`, or to `100%` if lazyloading is disabled and sizes is empty.\n    - `transformations_to_widths` (optional): an object with thumbor transformation names as keys and image widths as values. Sets the `srcset`-Attribute, with the thumbor image URLs based on the given transformations as the source. Defaults to a `srcset` with keys from `imagex_xxxs` to `image_xl` respectively to values from `160w` to `1600w`.\n    - `class` (optional): CSS classes to add to the image. Defaults to empty string.\n    - `data_attributes` (optional): an iterable object with data-attribute names (= the part after `data-`) and values as key/value pairs. Defaults to empty string.\n    - `placeholder_filter`: a string with the name of the thumbor transformation (i.e. `image_lqip`) which is added to the placeholder image when lazyloading the image. Should match the target dimensions of the image. A list of default transformations is provided with this bundle (see below) and can be overwritten / extended in the application configuration, e.g. the config.yml.\n    - `lazyload` (optional): Use lazyloading. Defaults to `true`.\n    - `lqip` (optional): Use the LQIP-method ([original concept (2013)](https://www.guypo.com/introducing-lqip-low-quality-image-placeholders), [current popular LQIP options](https://cloudinary.com/blog/low_quality_image_placeholders_lqip_explained)) of always loading a low-quality placeholder image. Defaults to `true`.\n    - `focal_point` (optional): An object with `x` and `y` properties that contain integer values. This bundles exposes the focal point via CSS Custom Properties on `\u003cimg\u003e`; those Custom Properties can be used to mark the area that should be cropped last when the image is cropped via `object-fit`. The project using this bundle needs to add `object-position: var(--focal-x, center) var(--focal-y, top);` or similar to the image styles. This will interpret the focal point if one was selected in the CMS or fall back to the comma-separated values (which can be any length or keyword that is valid for `object-position`).\n\nExample:\n \n```\n{% import '@WebfactoryResponsiveImage/Macros/responsiveImg.html.twig' as rImg %}\n\n{{ rImg.responsiveImg(\n    {\n        'url': s3_cachable_url(artist, 'photo'),\n        'alt': 'Portrait of ' ~ artistEntity.name\n    },\n    {\n        'sizes': '100vw',\n        'transformations_to_widths': {\n            'image_xxs': '320w',\n            'image_md': '992w'\n        },\n        'data_attributes': {'credits': '© P. H. O'Tographer'},\n    }\n) }}\n```\n\n### Responsive image with art direction:\n\n`macro responsivePicture(formats, options)` with:\n\n- `formats`: Array of objects, with each object describing a different format variant of the motive/picture by the following keys:\n    - `image_url` (mandatory): the URL of the image in this format\n    - `options` (optional): an array with the following keys that parametrize this format variant:\n        - `sizes` (optional): a string that sets the `sizes`-Attribut. Defaults to `auto`, or to `100%` if lazyloading is disabled and sizes is empty.\n        - `transformations_to_widths` (optional): an object with thumbor transformation names as keys and image widths as values. Sets the `srcset`-Attribute, with the thumbor image URLs based on the given transformations as the source. Defaults to a `srcset` with keys from `imagex_xxxs` to `image_xl` respectively to values from `160w` to `1600w`.\n        - `media_query` (optional): a string that sets the media query for the source element\n- `options`: an array with the following keys:\n    - `class`: Optional class to add to the img-tag. Defaults to empty class attribute is no value is given to keep the code readable.\n    - `alt` (optional): the alternative text for the image. Defaults to empty string.\n    - `title` (optional): the title text for the image. Defaults to empty string.\n    - `data_attributes` (optional): an iterable object with data-attribute names (= the part after `data-`) and values as key/value pairs.\n    - `placeholder_filter`: a string with the name of the thumbor transformation (i.e. `image_lqip`) which is added to the placeholder image when lazyloading the image. Should match the target dimensions of the image. A list of default transformations is provided with this bundle (see below) and can be overwritten / extended in the application configuration, e.g. the config.yml.\n    - `lazyload` (optional): Use lazyloading. Defaults to `true`.\n    - `lqip` (optional): Use the LQIP-method ([original concept (2013)](https://www.guypo.com/introducing-lqip-low-quality-image-placeholders), [current popular LQIP options](https://cloudinary.com/blog/low_quality_image_placeholders_lqip_explained)) of always loading a low-quality placeholder image. Defaults to `true`.\n    - `focal_point` (optional): An object with `x` and `y` properties that contain integer values. This bundles exposes the focal point via CSS Custom Properties on `\u003cimg\u003e`; those Custom Properties can be used to mark the area that should be cropped last when the image is cropped via `object-fit`. The project using this bundle needs to add `object-position: var(--focal-x, center) var(--focal-y, top);` or similar to the image styles. This will interpret the focal point if one was selected in the CMS or fall back to the comma-separated values (which can be any length or keyword that is valid for `object-position`).\n\nExample:\n \n```\n{% import '@WebfactoryResponsiveImage/Macros/responsiveImg.html.twig' as rImg %}\n\n{{ rImg.responsivePicture(\n    [\n        {\n            'image_url': cachable_s3_url(artistEntity, 'photoInPortraitFormat'),\n            'options': {\n                'sizes': '100vw',\n                'transformations_to_widths': {\n                    'image_xxs' : '320w',\n                    'image_md' : '992w'\n                },\n                'media_query': '(min-width: 768px)'\n            }\n        },\n        {\n            'image_url': cachable_s3_url(artistEntity, 'photoInSquareFormat'),\n            'options': {\n                'sizes': '100vw',\n                'transformations_to_widths': {\n                    'image_xxs' : '320w',\n                    'image_md' : '992w'\n                },\n                'media_query': '(min-width: 640px)'\n            }\n        }\n    ],\n    {\n        'lazyload': true,\n        'class': 'js-object-fit',\n        'alt': 'Portrait of ' ~ artistEntity.name,\n        'data_attributes': {'credits': '© P. H. O\\'Tographer'},\n    }\n) }}\n```\n\n### Responsive Background Video\n\n`responsiveBackgroundVideo(video, options)` with:\n\n- `video`: an array with the following keys:\n  - `url` (mandatory): the URL of the image\n- `options`: an array with the following keys:\n  - `transformations` (optional): an object with thumbor transformation names as keys and MIME-Types as values. Defaults to \n    ```\n    {\n      'video_hevc_720p' : 'video/mp4; codecs=hevc',\n      'video_webm_720p' : 'video/webm; codecs=vp9',\n      'video_mp4_720p': 'video/mp4'\n    }\n    ```\n  - `class` (optional): CSS classes to add to the image. Defaults to empty string.\n  - `data_attributes` (optional): an iterable object with data-attribute names (= the part after `data-`) and values as key/value pairs. Defaults to empty string.\n\nExample:\n\n```\n{% import '@WebfactoryResponsiveImage/Macros/responsiveVideo.html.twig' as rVid %}\n\n{{ rVid.responsiveBackgroundVideo(\n    {\n        'url': s3_cachable_url(entity, 'video')\n    },\n    {\n        'class': 'background-video',\n        'data_attributes': {'credits': '© P. H. O\\'Tographer'},\n    }\n) }}\n```\n\n## Default Configuration for JbPhumborBundle\n\nThis bundle configures the JbPhumborBundle via the `Resources/config/jb_phumbor-default-config*.yaml` files, setting\nsome default transformations and the Thumbor server settings. You can overwrite any `jb_phumbor`-setting in your\napplication config.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebfactory%2Fwebfactoryresponsiveimagebundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebfactory%2Fwebfactoryresponsiveimagebundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebfactory%2Fwebfactoryresponsiveimagebundle/lists"}