{"id":18584281,"url":"https://github.com/brob/eleventy-plugin-sanity-image","last_synced_at":"2025-10-14T20:33:24.449Z","repository":{"id":39041353,"uuid":"283226957","full_name":"brob/eleventy-plugin-sanity-image","owner":"brob","description":null,"archived":false,"fork":false,"pushed_at":"2023-12-15T14:47:06.000Z","size":676,"stargazers_count":11,"open_issues_count":17,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-09-07T12:40:02.017Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/brob.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,"publiccode":null,"codemeta":null}},"created_at":"2020-07-28T13:53:09.000Z","updated_at":"2023-09-03T12:24:05.000Z","dependencies_parsed_at":"2024-11-07T00:42:14.887Z","dependency_job_id":null,"html_url":"https://github.com/brob/eleventy-plugin-sanity-image","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/brob/eleventy-plugin-sanity-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Feleventy-plugin-sanity-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Feleventy-plugin-sanity-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Feleventy-plugin-sanity-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Feleventy-plugin-sanity-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brob","download_url":"https://codeload.github.com/brob/eleventy-plugin-sanity-image/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Feleventy-plugin-sanity-image/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279020905,"owners_count":26086948,"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","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-07T00:26:59.220Z","updated_at":"2025-10-14T20:33:24.429Z","avatar_url":"https://github.com/brob.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Use Sanity's Asset Pipeline with 11ty\n\n## Alpha Release\n\nThis plugin is a template helper to connect Sanity's Asset Pipelines to your 11ty templates for images. This is currently in early stages.\n\n## Installation\n\n```shell\nnpm install eleventy-plugin-sanity-image\n```\n\nThen in your `.eleventy.js` file, you'll need to require this package and initialize your plugin. To initialize properly, you'll need to have a Sanity Client configured. If your project doesn't have this yet, you can [read documentation here](https://www.sanity.io/docs/js-client) to set up.\n\n```js\nconst sanityImage = require('../../eleventy-plugin-sanity-image/';\nmodule.exports = function(eleventyConfig) {\n  eleventyConfig.addPlugin(sanityImage, {\n    client: sanityClient // This is your Sanity connection object\n  })\n}\n```\n\nOnce this is initialized, you've got access to 3 new shortcodes:\n\n```twig\n// Get sanity cdn URLs for your image with optional transformations\n{% imageUrlFor sanityImageObject, optionalWidthValue %}\n{% croppedUrlFor sanityImageObject, widthValue, heightValue %}\n\n// Get a responsive \u003cimg\u003e with srcset and sizes\n{% responsiveImage sanityImageObject, \"comma delimited list of image sizes for srcset\", \"html sizes attr content\", \"optional classes listed\"}\n```\n\n## `imageUrlFor`\n\nThe `imageUrlFor` tag will return a URL to your image on the Sanity CDN. You can pass it a width to get a specific-width image.\n\nIf you want your image to respect the crop and hotspot functionality in your Studio, be sure to pass the entire image object and not just the reference to the asset (though this will work, it just won't respect an editor's choices).\n\n\n## `croppedUrlFor`\n\nThe `croppedUrlFor` tag will return a URL for your image on the Sanity CDN cropped to the specify width and height specified. If you.\n\nIf you want your image to respect the crop and hotspot functionality in your Studio, be sure to pass the entire image object and not just the reference to the asset (though this will work, it just won't respect an editor's choices).\n\n## `responsiveImage`\n\nThe `responsiveImage` shortcode will return an `img` element with responsive `srcset` and `sizes` with properly sized images pulled from Sanity's asset pipeline.\n\n### Arguments\n\nThe responsiveImage tag accepts 4 arguments\n\n### `sanityImageObject` (required)\n\nThe first argument in the tag is the required image object. If you want the image to respect a user's crop/hotspot in your Studio.\n\n### `srcSet` (optional)\n\nThe second argument in the tag is the optional `srcset` override. This will be a string of comma-delimited numbers: `\"300, 500, 800, 1000\"`. This will create a `srcset` attribute with those image sizes (in pixels). The images will be returned from Sanity's asset pipeline with those widths.\n\n### `sizes` (optional)\n\nThe third argument is the optional `sizes` override. By default, the plugin assumes `sizes=\"100vw\"` for maximum flexibility. There are plenty of responsive-related reasons for overriding this option. For more information on the (sometimes confusing) `sizes` attr, see this [CSS Tricks article](https://css-tricks.com/responsive-images-css/#sizes-in-css).\n\n### `classes` (optional)\n\nIf you want to add a class to the image that's being added, you can provide a final argument to add a space-delimited list of classes to go in the html `class` attr.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrob%2Feleventy-plugin-sanity-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrob%2Feleventy-plugin-sanity-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrob%2Feleventy-plugin-sanity-image/lists"}