{"id":15062408,"url":"https://github.com/otterdev-io/astro-sanity-picture","last_synced_at":"2025-10-06T11:35:35.145Z","repository":{"id":142257556,"uuid":"613128359","full_name":"otterdev-io/astro-sanity-picture","owner":"otterdev-io","description":"Asto component for rendering Sanity images in picture element","archived":false,"fork":false,"pushed_at":"2023-12-04T23:08:15.000Z","size":86,"stargazers_count":26,"open_issues_count":4,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-09T01:44:07.078Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/otterdev-io.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":"2023-03-13T00:05:15.000Z","updated_at":"2025-06-10T20:25:55.000Z","dependencies_parsed_at":"2024-05-19T22:00:49.162Z","dependency_job_id":null,"html_url":"https://github.com/otterdev-io/astro-sanity-picture","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/otterdev-io/astro-sanity-picture","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otterdev-io%2Fastro-sanity-picture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otterdev-io%2Fastro-sanity-picture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otterdev-io%2Fastro-sanity-picture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otterdev-io%2Fastro-sanity-picture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/otterdev-io","download_url":"https://codeload.github.com/otterdev-io/astro-sanity-picture/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otterdev-io%2Fastro-sanity-picture/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269677801,"owners_count":24457876,"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-08-10T02:00:08.965Z","response_time":71,"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-09-24T23:35:32.699Z","updated_at":"2025-10-06T11:35:30.098Z","avatar_url":"https://github.com/otterdev-io.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# astro-sanity-picture\nAn astro component for rendering a responsive `\u003cpicture\u003e` element for an image fetched from [Sanity](https://www.sanity.io). It will generate the element with a set of image sources for optimised resolutions and formats, using sanity's image API to serve the optimised images.\n\n# Usage\n---\nMinimal example:\n\n```astro\n---\nimport SanityPicture from \"astro-sanity-picture\";\n\n---\n   \u003cSanityPicture\n    image={mainBgImage}\n    imageUrlBuilder={myImageBuilder}\n    sizes=\"(min-width:768px) 50vw, 100vw\"\n  /\u003e \n```\n\nDefaults can be set for all picture components\n\n```astro\n---\nimport SanityPicture, {  setSanityPictureDefaults} from \"astro-sanity-picture\";\n\nsetSanityPictureDefaults({ imageUrlBuilder: myImageUrlBuilder })\n---\n   \u003cSanityPicture\n    image={mainBgImage}\n    sizes=\"(min-width:768px) 50vw, 100vw\"\n     /\u003e \n```\n\nAttributes of the `\u003cimg /\u003e` element displayed inside the picture can be set using the `img` property.\n\n```astro\n---\nimport SanityPicture, {  setSanityPictureDefaults} from \"astro-sanity-picture\";\n\nsetSanityPictureDefaults({ imageUrlBuilder: myImageUrlBuilder })\n---\n   \u003cSanityPicture\n    image={mainBgImage} \n    img={{style: {objectFit: 'cover'}}}\n    /\u003e \n```\n\nIn this example, we are stating that image is to be displayed at half the page width when the page is \u003e= 768px, and at the whole page width otherwise. The browser will then select the source that is appropriate for the image sizing, whether it is 50vw or 100vw.\n\n## Fetching the image from groq\nThe component will work with images fetched from a simple `groq`  query without fetching any image metadata, eg\n\n```ts\nconst query = groq`*[_id == 'homePage'][0] {\n     ...etc,\n     myBackgroundImage,\n     ...etc,\n  }`\n```\n\nHowever it is able to optimize the generated source sets to be smaller than the original image, and use a low quality placeholder, when the image is fetched with metadata.\nTo help with this, you can use the `picture` function provided:\n\n```ts\nimport { picture } from 'astro-sanity-picture/query'\n\nconst query = groq`*[_id == 'homePage'][0] {\n  ...etc,\n  ${picture('myBackgroundImage')},\n  ...etc\n}`\n```\n\n# Component options\n\n- `imageUrlBuilder?: ImageUrlBuilder` - An instance of sanity image url builder to use. If default is set, may be omitted\n- `src: SanityImageSource` - The image to display, as a property from a `groq` query\n- `sizes: string` - Sizes attribute to apply to each source element, unless overriden. You will want to specify this, eg `50vw`, to ensure the correct resolution of source image is chosen\n- `sources?: PictureSource[]` - Each `PictureSource` object in the list informs the generation of a `\u003csource /\u003e` element for each of the widths generated by the `widths` property. `PictureSource` properties are:\n  - `options?: Partial\u003cImageUrlBuilderOptionsWithAliases\u003e` - Options for the sanity image url builder to apply to this source\n  withWebp?: boolean - whether to include a mirrored source in webp format. Default setting is true\n  - `...attributes?: Omit\u003cSourceAttributes, \"srcset\"\u003e` - All other attributes that apply to the `\u003csource\u003e` element. Often you will want to set `media` and `sizes`, as in standard usage of the `\u003cpicture\u003e` tag.\n    - `media?: string` - CSS @media rule that determines when this source applies\n    - `sizes?: string;` - comma seperated list of rule - width pairings. Overrides the tag-level sizes attribute\n- `widths?: number[] | AutoWidths` - Specifies how to calculate widths for `\u003csource /\u003e` elements. You may either specify a list of widths to use, or a an `AutoWidths` type which declares how to automatically determine the widths. \n- `img?: Omit\u003cImgAttributes, \"src\"\u003e` - Attributes to apply to the base `\u003cimg /\u003e` element in the picture\n- `lqip?: Lqip` - Options for inserting a low quality image placeholder (lqip) as the background image of the element;\n  - `enabled: boolean` - Whether to use lqip\n  - `transitionDuration: number` - Duration in which to fade in final image once loaded\n- `...attributes - PictureAttributes` - Additional attributes to apply to the `\u003cpicture /\u003e` element;\n\n# Defaults \n- `autowidths`:\n```ts\n{\n  maxWidth: 3840,\n  step: 320,\n}\n```\n- `withWebp`: `true`\n- `img`: `loading: \"lazy\"`\n- `lqip`: `{ enabled: true, transitionDuration: 350 }`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fotterdev-io%2Fastro-sanity-picture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fotterdev-io%2Fastro-sanity-picture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fotterdev-io%2Fastro-sanity-picture/lists"}