{"id":25209923,"url":"https://github.com/backdrop-contrib/srcset_image","last_synced_at":"2025-10-25T09:31:46.214Z","repository":{"id":91639632,"uuid":"134708721","full_name":"backdrop-contrib/srcset_image","owner":"backdrop-contrib","description":"Provides responsive images in your Backdrop CMS site that utilise the `srcset` attribute.","archived":false,"fork":false,"pushed_at":"2024-07-27T18:28:13.000Z","size":32,"stargazers_count":3,"open_issues_count":0,"forks_count":3,"subscribers_count":34,"default_branch":"1.x-1.x","last_synced_at":"2024-07-30T17:16:23.040Z","etag":null,"topics":["backdrop","backdropcms","cms","image","responsive","srcset"],"latest_commit_sha":null,"homepage":"https://backdropcms.org/project/srcset_image","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/backdrop-contrib.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"BWPanda"}},"created_at":"2018-05-24T11:56:30.000Z","updated_at":"2024-07-27T18:28:17.000Z","dependencies_parsed_at":"2023-10-11T11:55:06.076Z","dependency_job_id":"bdbbea8e-bc40-4a51-b7a1-a1125e1ba781","html_url":"https://github.com/backdrop-contrib/srcset_image","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/backdrop-contrib%2Fsrcset_image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/backdrop-contrib%2Fsrcset_image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/backdrop-contrib%2Fsrcset_image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/backdrop-contrib%2Fsrcset_image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/backdrop-contrib","download_url":"https://codeload.github.com/backdrop-contrib/srcset_image/tar.gz/refs/heads/1.x-1.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238117361,"owners_count":19419223,"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":["backdrop","backdropcms","cms","image","responsive","srcset"],"created_at":"2025-02-10T13:18:58.480Z","updated_at":"2025-10-25T09:31:45.906Z","avatar_url":"https://github.com/backdrop-contrib.png","language":"PHP","funding_links":["https://github.com/sponsors/BWPanda"],"categories":[],"sub_categories":[],"readme":"srcset Image\n============\n\nProvides a field formatter that outputs responsive images utilising the `srcset`\nimage attribute.\n\n`srcset` lets you specify different image variants which the browser chooses\nbetween based on the screen size. For example, you can specify a large, medium\nand small variant of a particular image; then, depending on the user's screen\nsize, the browser will automatically load the appropriately-sized image. No more\ndisplaying 1000+ pixel images on mobile devices!  \nYou can read more about the `srcset` and `sizes` image attributes here:\nhttps://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/\n\nThis module integrates with Backdrop's image styles to automatically create the\nimage variants you select. Simply upload a full-size image, and the different\nvariants are created automatically. You can also edit the value of the `sizes`\nattribute for more fine-grained control.\n\nInstallation\n------------\n\n- Install the [Preset](https://github.com/backdrop-contrib/preset) module.\n\n- Install this module using the official Backdrop CMS instructions at\n  https://backdropcms.org/guide/modules.\n\n- Visit the Image Styles configuration page under Administration \u003e\n  Configuration \u003e Media \u003e Image Styles (admin/config/media/image-styles) and\n  create different image styles corresponding to the image variants you want.  \n  For example, you could create image styles named '1200w', '600w' and '300w'\n  which each include a 'Scale' effect that resizes images to the respective\n  widths.\n\n- Visit the srcset Image configuration page under Administration \u003e\n  Configuration \u003e Media \u003e srcset Image (admin/config/media/srcset-image) and add\n  an Image Set that references the different image styles you created above.\n\n- Add an Image field to a content type, configure it, then visit the Manage\n  Display page under Administration \u003e Structure \u003e Content Types \u003e [Content Type\n  Name] \u003e Manage Displays (admin/structure/types/manage/[content-type]/display).\n  Choose a Display Mode to edit, then set the Format of your Image field to\n  'srcset Image' and configure it to use the Image Set you created above.\n  Optionally edit the Sizes field and specify a link for the image.\n\nIssues\n------\n\nBugs and Feature requests should be reported in the Issue Queue:\nhttps://github.com/backdrop-contrib/srcset_image/issues.\n\nCurrent Maintainers\n-------------------\n\n- [Martin Price](https://github.com/yorkshire-pudding) - [System Horizons Ltd](https://www.systemhorizons.co.uk)\n- Collaboration and co-maintainers welcome!\n\nCredits\n-------\n\n- Developed for Backdrop CMS by [Peter Anderson](https://github.com/BWPanda).\n\nLicense\n-------\n\nThis project is GPL v2 software. See the LICENSE.txt file in this directory for\ncomplete text.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbackdrop-contrib%2Fsrcset_image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbackdrop-contrib%2Fsrcset_image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbackdrop-contrib%2Fsrcset_image/lists"}