{"id":21638774,"url":"https://github.com/novactive/novaezenhancedimageassetbundle","last_synced_at":"2025-04-11T16:51:24.170Z","repository":{"id":37768925,"uuid":"161766347","full_name":"Novactive/NovaeZEnhancedImageAssetBundle","owner":"Novactive","description":"Provide enhanced \"image\" and \"image asset\" field for ezplatform","archived":false,"fork":false,"pushed_at":"2024-05-29T13:05:22.000Z","size":6145,"stargazers_count":1,"open_issues_count":3,"forks_count":4,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-03-25T12:53:34.444Z","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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-14T10:02:42.000Z","updated_at":"2024-05-29T13:04:24.000Z","dependencies_parsed_at":"2024-03-04T10:51:43.829Z","dependency_job_id":"b8500b2c-8f95-4e1f-a17f-d9ac35d8acb4","html_url":"https://github.com/Novactive/NovaeZEnhancedImageAssetBundle","commit_stats":{"total_commits":13,"total_committers":2,"mean_commits":6.5,"dds":0.07692307692307687,"last_synced_commit":"2a9b15e5d8a5967003f37965b1e0103a6aa2886e"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novactive%2FNovaeZEnhancedImageAssetBundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novactive%2FNovaeZEnhancedImageAssetBundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novactive%2FNovaeZEnhancedImageAssetBundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novactive%2FNovaeZEnhancedImageAssetBundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Novactive","download_url":"https://codeload.github.com/Novactive/NovaeZEnhancedImageAssetBundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248443007,"owners_count":21104315,"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:36.634Z","updated_at":"2025-04-11T16:51:24.148Z","avatar_url":"https://github.com/Novactive.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NovaeZEnhancedImageAssetBundle\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/EnhancedImageAssetBundle/README.md.html\n\n----\n\n[![Downloads](https://img.shields.io/packagist/dt/novactive/ezenhancedimageassetbundle.svg?style=flat-square)](https://packagist.org/packages/novactive/ezenhancedimageassetbundle)\n[![Latest version](https://img.shields.io/github/release/Novactive/NovaeZEnhancedImageAssetBundle.svg?style=flat-square)](https://github.com/Novactive/NovaeZEnhancedImageAssetBundle/releases)\n[![License](https://img.shields.io/packagist/l/novactive/ezenhancedimageassetbundle.svg?style=flat-square)](LICENSE)\n\nAn eZPlatform bundle providing new field type with enhanced features related to image management\n\n## Features\n\n- [Focus point managment in admin UI](#1-focus-point)\n- [Default image configuration for file size optimization](#2-default-image-configuration)\n- [Lazy and Progressive loading](#3-lazyloading)\n- [Retina variations](#4-retina-variations)\n- [WebP variations](#5-webp-variations)\n- [Twig render field parameters](#6-twig-render-field-parameters)\n\n## Installation\n\n### Use Composer\n\nAdd NovaeZEnhancedImageAssetBundle in your composer.json:\n\n```bash\ncomposer require novactive/ezenhancedimageassetbundle\n```\n\n### Register the bundle\n\nRegister the bundle in your application's kernel class:\n\n```php\n// app/AppKernel.php\npublic function registerBundles()\n{\n    $bundles = array(\n        // ...\n        new Novactive\\EzEnhancedImageAssetBundle\\EzEnhancedImageAssetBundle(),\n        // ...\n    );\n}\n```\n## Features\n\n### 1. Focus point\n\nThis bundle provide a new `enhancedimage` field type which extend the `ezimage` field type.\nThis field type allow the user to select a focus point on the uploaded image.\nVariation can then be created based on the selected focus point.\n\n![Demo](doc/images/image-focus-demo.gif)\n\n[Check out the demo](https://image-focus.stackblitz.io/)\n\n### 2. Default image configuration\n\nAdded to siteaccess aware parameters which allow to define the default post processors and configuration to use when generating image alias\n```yaml\nparameters:\n  ez_enhanced_image_asset.default.image_default_post_processors: \n    pngquant:\n        quality: '40-85'\n    jpegoptim:\n        strip_all: true\n        max: 70\n        progressive: true\n  ez_enhanced_image_asset.default.image_default_config: \n    animated: true\n    quality: 80\n```\n\n### 3. LazyLoading\nLazy loading is controlled globaly by the following settings (default to true) and can be overriden at field level.\n\n```yaml\nparameters: \n  ez_enhanced_image_asset.default.enable_lazy_load: true\n```\n\n### 4. Retina variations \n\nRetina variations should suffixed by `_retina` will be used automatically (if enabled) when using the provided field template.\nTo be displayed, the generated variation width should be two time the width of the default variation.\n\nConsidering a variation named `my_alias`, the variation named `my_alias_retina` will be used and displayed on retina screens.\n```yaml\n - { name: my_alias, params: {size: [\u003cwidth\u003e, \u003cheight\u003e], focus: [0, 0]} }\n - { name: my_alias_retina, params: {size: [\u003cwidth*2\u003e, \u003cheight*2\u003e], focus: [0, 0]} }\n```\n\nThe automatic use of retina variations is controlled by this setting\n```yaml\nparameters: \n  ez_enhanced_image_asset.default.enable_retina: true\n```\n\n### 5. WebP variations\n\nAuto-creation of a webp variation for each existing variations and will then automaticaly add this variation as an alternative source\n\n### 6. Twig render field parameters\n\nYou can now specify the `alternativeAlias` parameter to define alternative image alias depending the screen size\n\n```twig\n\n{{ ibexa_render_field(content, fieldIdentifier, {\n    parameters: {\n        alias: 'desktop_alias',\n        alternativeAlias: [\n            {\n                alias: 'mobile_alias',\n                media: '(max-width: 320px)'\n            }\n        ],\n        lazyLoad: true|false, // optionnal\n        retina: true|false // optionnal\n    }\n}) }}\n```\n\n#### Variations configuration\n\nFocused variations require the use of a \"focusedThumbnail\" filter to generate thumbnail based on the contributed focus point.\n```yaml\n - { name: focusedThumbnail, params: {size: [\u003cwidth\u003e, \u003cheight\u003e], focus: [0, 0]} }\n```\nNB: the `focus` parameter is automaticaly updated for each image based on what has been contributed\n\n#### Migrate existing ezimage fields\n\nAs the new `enhancedimage` field type is an extend of the `ezimage` field type, you just need to update the `data_type_string` column in the database for the fields you want.\n\nExample :\n```sql\nUPDATE ezcontentclass_attribute ca\nINNER JOIN ezcontentclass c ON c.id = ca.contentclass_id\nSET data_type_string = \"enhancedimage\"\nWHERE ca.data_type_string = \"ezimage\" AND c.identifier=\"my_content_type\" AND ca.identifier=\"my_field_identifier\";\n\nUPDATE ezcontentobject_attribute oa\nINNER JOIN ezcontentclass_attribute ca ON oa.contentclassattribute_id = ca.id\nSET oa.data_type_string = \"enhancedimage\"\nWHERE oa.data_type_string = \"ezimage\" AND ca.data_type_string=\"enhancedimage\";\n```\n\n## Usage\nSome feature will require the following assets\n```twig\n{{ encore_entry_link_tags('enhancedimage-css', null, 'ibexa') }}\n```\n \n```twig\n{{ encore_entry_script_tags('enhancedimage-js', null, 'ibexa') }}\n```\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovactive%2Fnovaezenhancedimageassetbundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnovactive%2Fnovaezenhancedimageassetbundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovactive%2Fnovaezenhancedimageassetbundle/lists"}