{"id":21638789,"url":"https://github.com/novactive/novaezresponsiveimagesbundle","last_synced_at":"2025-04-11T16:51:29.021Z","repository":{"id":57028669,"uuid":"54366156","full_name":"Novactive/NovaeZResponsiveImagesBundle","owner":"Novactive","description":"Novactive eZ Responsive Images is a lightweight eZ Publish 5.x|6.x bundle for Responsive Images management.","archived":false,"fork":false,"pushed_at":"2022-08-19T07:31:16.000Z","size":27,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-25T12:53:34.689Z","etag":null,"topics":[],"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/Novactive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-21T06:47:18.000Z","updated_at":"2022-03-05T01:57:51.000Z","dependencies_parsed_at":"2022-08-23T16:20:45.935Z","dependency_job_id":null,"html_url":"https://github.com/Novactive/NovaeZResponsiveImagesBundle","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novactive%2FNovaeZResponsiveImagesBundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novactive%2FNovaeZResponsiveImagesBundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novactive%2FNovaeZResponsiveImagesBundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novactive%2FNovaeZResponsiveImagesBundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Novactive","download_url":"https://codeload.github.com/Novactive/NovaeZResponsiveImagesBundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248443023,"owners_count":21104320,"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-25T04:11:42.411Z","updated_at":"2025-04-11T16:51:28.998Z","avatar_url":"https://github.com/Novactive.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Novactive eZ Responsive Images Bundle\n\n----\n\nThis repository is what we call a \"subtree split\": a read-only copy of one directory of the main repository. \nIt is used by Composer to allow developers to depend on specific bundles.\n\nIf you want to report or contribute, you should instead open your issue on the main repository: https://github.com/Novactive/Nova-eZPlatform-Bundles\n\nDocumentation is available in this repository via `.md` files but also packaged here: https://novactive.github.io/Nova-eZPlatform-Bundles/master/ResponsiveImagesBundle/README.md.html\n\n----\n\n[![Downloads](https://img.shields.io/packagist/dt/novactive/ezresponsiveimagesbundle.svg?style=flat-square)](https://packagist.org/packages/novactive/ezresponsiveimagesbundle)\n[![Latest version](https://img.shields.io/github/release/Novactive/NovaeZResponsiveImagesBundle.svg?style=flat-square)](https://github.com/Novactive/NovaeZResponsiveImagesBundle/releases)\n[![License](https://img.shields.io/packagist/l/novactive/ezresponsiveimagesbundle.svg?style=flat-square)](LICENSE)\n\n\nNovactive eZ Responsive Images is a lightweight eZ Publish 5.x|6.x bundle for Responsive Images management.\n\n##  Install\n\n### Usage and main feature\n\nAdd the lib to your composer.json, run `composer require novactive/ezresponsiveimagesbundle` to refresh dependencies.\n\nBy default this bundle will use [picturefill](https://github.com/scottjehl/picturefill) to load the good version of the your variations.\n\nYou can also decide to lazy load the images, in this case the bundle uses [unveil.js](https://github.com/luis-almeida/unveil) to load the good version of the variation alias name.\n\nToday it handles 3 versions:\n\n* Mobile: viewport width \u003c 640px\n* Desktop: default choice\n* Retina: devicePixelRatio \u003e 1,\n\nThen it is really interesting to understand that only the good version will be loaded in the browser.\nThe Lazy loading is based on the view port too, if an image is not visible on the screen it will be pre-loaded and loaded on the scroll action.\n\nIt means:\n\n* it reduces drastically the size and the load time of the page by not loading the non visible images\n* when an image is loaded, it ensures that is the adapted one.\n\n\n```twig\n        {{ ez_render_field(content, 'image', {\n            parameters: {\n                alias: 'blog_post_line_home',\n                class: 'img-responsive img-rounded',\n                unveiled: true,\n            }\n        }) }}\n```\n\n\u003e Unveiled means \"Lazy Loading\"\n\n\u003e Read below, you will need 2 more aliases for each current alias that you have.\n\n### Use Composer\n\nAdd the lib to your composer.json, run `composer require novactive/ezprotectedcontentbundle` to refresh dependencies.\n\nThen inject the bundle in the `bundles.php` of your application.\n\n```php\n    Novactive\\Bundle\\eZResponsiveImagesBundle\\NovaeZResponsiveImagesBundle::class =\u003e [ 'all'=\u003e true ],\n```\n\n### Create the _mobile and _retina Alias Names\n\nThe bundle requires that you create 2 more alias for each alias you are using. Ex:\n\n```yaml\n    gallery_full_thumbnail:\n        reference: ~\n        filters:\n            - { name: geometry/scaledownonly, params: [354, 224] }\n\n    gallery_full_thumbnail_mobile:\n        reference: gallery_full_thumbnail\n        filters:\n            - { name: geometry/scalewidthdownonly, params: [175] }\n\n    gallery_full_thumbnail_retina:\n        reference: ~\n        filters:\n            - { name: geometry/scaledownonly, params: [708, 448] }\n```\n\n\n### Load the resources in your pagelayout\n\n```twig\n    \u003chead\u003e\n        ...\n        {% include 'NovaeZResponsiveImagesBundle::novaezresponsiveimages.html.twig' %}\n    \u003c/head\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovactive%2Fnovaezresponsiveimagesbundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnovactive%2Fnovaezresponsiveimagesbundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovactive%2Fnovaezresponsiveimagesbundle/lists"}