{"id":26939293,"url":"https://github.com/sevensource/magnolia-responsive-dam","last_synced_at":"2025-04-02T14:17:41.245Z","repository":{"id":57740676,"uuid":"106321190","full_name":"sevensource/magnolia-responsive-dam","owner":"sevensource","description":"Responsive Image cropping and Image generation for Magnolia CMS 5.5, 5.6, 6.0, 6.1","archived":false,"fork":false,"pushed_at":"2020-03-07T13:43:50.000Z","size":155,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-16T10:59:09.249Z","etag":null,"topics":["dam","magnolia","magnolia-cms","rendition","responsive","responsive-images"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sevensource.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":"2017-10-09T18:35:24.000Z","updated_at":"2020-03-07T13:43:49.000Z","dependencies_parsed_at":"2022-08-25T19:20:43.884Z","dependency_job_id":null,"html_url":"https://github.com/sevensource/magnolia-responsive-dam","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sevensource%2Fmagnolia-responsive-dam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sevensource%2Fmagnolia-responsive-dam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sevensource%2Fmagnolia-responsive-dam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sevensource%2Fmagnolia-responsive-dam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sevensource","download_url":"https://codeload.github.com/sevensource/magnolia-responsive-dam/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246828477,"owners_count":20840474,"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":["dam","magnolia","magnolia-cms","rendition","responsive","responsive-images"],"created_at":"2025-04-02T14:17:40.705Z","updated_at":"2025-04-02T14:17:41.239Z","avatar_url":"https://github.com/sevensource.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![GitHub Tag](https://img.shields.io/github/tag/sevensource/magnolia-responsive-dam.svg?maxAge=3600)](https://github.com/sevensource/magnolia-responsive-dam/tags)\n[![Maven Central](https://img.shields.io/maven-central/v/org.sevensource.magnolia/magnolia-responsive-dam.svg?maxAge=3600)](http://search.maven.org/#search%7Cga%7C1%7Cg%3A%22org.sevensource.magnolia%22%20AND%20a%3A%22magnolia-responsive-dam%22)\n[![License](https://img.shields.io/github/license/sevensource/magnolia-responsive-dam.svg)](https://github.com/sevensource/magnolia-responsive-dam/blob/master/LICENSE)\n# magnolia-responsive-dam\n\n## Responsive images for [Magnolia](http://www.magnolia-cms.com) 5.5 to 6.1\n\n\nThis module provides:\n\n1. Two fields which allow content editors to specify multiple focus areas (i.e. cropping areas) of an image. The definable focus areas are specified by the means of aspect ratios (i.e. 16:9):\n    - AspectAwareDamLinkField (replacing LinkField for referencing images in DAM assets app)\n    - AspectAwareDamUploadField (replacing DamUploadField for storing images in website repository and also used by in the assets app itself).\n\n2. TemplatingFunctions to assist in generating the responsive HTML markup (i.e. srcset, etc.)\n\n3. An ImageOperationChain, which integrates into Magnolias imaging module to generate the image variations\n\n\n**Contributions welcome!**\n\n### Compatibility\n| Magnolia version  | Responsive DAM version |\n| ------------- | ------------- |\n| 5.5           | 0.9           |\n| 5.6           | 1.0           |\n| 6.0           | 1.1           |\n| 6.1           | 1.2           |\n\n\nInstallation\n=============\nThe module is available on Maven central\n```xml\n\u003cdependency\u003e\n  \u003cgroupId\u003eorg.sevensource.magnolia\u003c/groupId\u003e\n  \u003cartifactId\u003emagnolia-responsive-dam\u003c/artifactId\u003e\n  \u003cversion\u003ex.x.x\u003c/version\u003e\n\u003c/dependency\u003e\n```\n\nUpon module installation,\n* a contextAttribute (_responsivedamfn_) is installed into `/modules/rendering/renderers/freemarker/contextAttributes`\n* the ImageOperationChain is installed into `/modules/imaging/config/generators/rd`\n* a default config is installed into `/modules/responsive-dam/config`\n\nConfiguration\n=============\n* change `/modules/dam-app/apps/assets/subApps/detail/editor/form/tabs/asset/fields/resource` and add the following properties:\n```\n  class: org.sevensource.magnolia.responsivedam.field.upload.AspectAwareDamUploadFieldDefinition\n  useExistingFocusAreas: true\n```\n* in `/modules/responsive-dam/config/variations`, add a variation set, for example:\n```\n  hero-area:\n    mobile:\n      aspect: \"4:3\"\n      constraints.minimumSize: 320w\n      constraints.maximumSize: 576w\n    default:\n      aspect: \"16:9\"\n      constraints.minimumSize: 576w\n      constraints.maximumSize: 1600w\n```   \n* add a responsive-dam field to your component:\n  * either an *AspectAwareDamUploadField* (equivalent to Magnolias *DamUploadField*)\n    ```\n    - name: heroimage\n      label: ImageUpload\n      binaryNodeName: heroimage\n      variationSets: [hero-area]\n      class: org.sevensource.magnolia.responsivedam.field.upload.AspectAwareDamUploadFieldDefinition\n      editFileName: true\n    ```\n  * or an *AspectAwareDamLinkField* (equivalent to Magnolias *LinkField*) for storing the image in DAM\n    ```\n    - name: heroimagelink\n      label: ImageLink\n      variationSets: [hero-area]\n      class: org.sevensource.magnolia.responsivedam.field.link.AspectAwareDamLinkFieldDefinition\n      targetWorkspace: dam\n      appName: assets\n      aspectsAppName: \"dam-app:uploadAndEdit\"\n      identifierToPathConverter:\n      class: info.magnolia.dam.app.assets.field.translator.AssetCompositeIdKeyTranslator\n      contentPreviewDefinition:\n      contentPreviewClass: info.magnolia.dam.app.ui.field.DamFilePreviewComponent\n    ```\n\nUsage\n=====\nAfter uploading an image, you will find an additional button to specify the required focus areas.\nIn your template, you can use the provided [ResponsiveDamTemplatingFunctions](/src/main/java/org/sevensource/magnolia/responsivedam/templating/) for rendering support:\n\n```html\n[#assign imageNode = cmsfn.asJCRNode(content).getNode('heroimage') /]\n\u003c#-- use damfn.getAsset(content.imagelink).getNode() if the image is in DAM --\u003e\n\n[#assign variationMobile = responsivedamfn.getResponsiveVariation(imageNode, 'hero-area', 'mobile') /]\n[#assign variationDefault = responsivedamfn.getResponsiveVariation(imageNode, 'hero-area', 'default') /]\n\n[#assign mobileSrcSet = responsivedamfn.generateSrcSet(variationMobile.getRenditions()) /]\n[#assign defaultSrcSet = responsivedamfn.generateSrcSet(variationDefault.getRenditions()) /]\n\n\u003cpicture\u003e\n  \u003csource media=\"(max-width: 575px)\" srcset=\"${mobileSrcSet}\"\u003e\n  \u003cimg src=\"${variationDefault.getDefaultRendition().getLink()}\" srcset=\"${defaultSrcSet}\"\u003e\n\u003c/picture\u003e\n```\n\n\nAdvanced Configuration\n======================\n* Image format mappings and their parameters are specified `/modules/responsive-dam/config/outputFormatMappings`. Each sourceMimeType can have multiple outputFormats (useful for example for webp support)\n* Next to the minimum and maximum size for each variation, you can specify the maximum number of renditions, that are generated and the minimum pixel difference between each rendition:\n  ```\n      default:\n        aspect: \"2:1\"\n        constraints.minimumSize: 800w\n        constraints.maximumSize: 1600w\n        constraints.maximumResolutions: 3\n        constraints.minimumResolutionSizeStep: 200\n  ```\n  The defaults are specified in `/modules/responsive-dam/config/defaultConstraint`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsevensource%2Fmagnolia-responsive-dam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsevensource%2Fmagnolia-responsive-dam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsevensource%2Fmagnolia-responsive-dam/lists"}