Add ImageKit media hosting guide#13836
Open
imagekitio wants to merge 3 commits into
Open
Conversation
- Adds src/content/docs/en/guides/media/imagekit.mdx with setup, image/video, OG image, client uploads, content-collection loader, and Node.js usage- Adds public/logos/imagekit.svg and registers it in src/data/logos.ts (alphabetically between image and juno)- Mentions ImageKit alongside Cloudinary in guides/images.mdx and reference/image-service-reference.mdx- Auto-registered in MediaGuidesNav via type: media frontmatter- i18nReady: false (translations to follow)
Co-authored-by: Copilot <copilot@github.com>
… to ImageKit guide Co-authored-by: Copilot <copilot@github.com>
✅ Deploy Preview for astro-docs-2 ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Hello! Thank you for opening your first PR to Astro’s Docs! 🎉 Here’s what will happen next:
|
Contributor
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
Member
ArmandPhilippot
left a comment
ArmandPhilippot
left a comment
There was a problem hiding this comment.
Thank you for your contribution, and for your patience! Between the minor releases and planning Astro 7, we're falling a bit behind on the reviews...
I left a few suggestions to match our writing style (i.e. too much "so", we try to be more direct) and to be clearer when the user is redirected to an external website. But, overall, this looks good to me!
| type: media | ||
| stub: false | ||
| logo: imagekit | ||
| i18nReady: false |
Member
There was a problem hiding this comment.
We want this to be translated once merged:
Suggested change
| i18nReady: false | |
| i18nReady: true |
|
|
||
| ## Using ImageKit in Astro | ||
|
|
||
| The [ImageKit Astro SDK](https://github.com/imagekit-developer/imagekit-astro) registers a custom [image service](/en/reference/image-service-reference/) that re-routes Astro's built-in `<Image />` and `<Picture />` components, plus Markdown and MDX images, through ImageKit. Local imports continue to be processed by Astro's built-in sharp service, so the integration can be added to an existing project without breaking existing assets. |
Member
There was a problem hiding this comment.
I can see they do not capitalize sharp in their GitHub, but we do in our docs. Maybe something to reconsider, but, in the meantime and for consistency:
Suggested change
| The [ImageKit Astro SDK](https://github.com/imagekit-developer/imagekit-astro) registers a custom [image service](/en/reference/image-service-reference/) that re-routes Astro's built-in `<Image />` and `<Picture />` components, plus Markdown and MDX images, through ImageKit. Local imports continue to be processed by Astro's built-in sharp service, so the integration can be added to an existing project without breaking existing assets. | |
| The [ImageKit Astro SDK](https://github.com/imagekit-developer/imagekit-astro) registers a custom [image service](/en/reference/image-service-reference/) that re-routes Astro's built-in `<Image />` and `<Picture />` components, plus Markdown and MDX images, through ImageKit. Local imports continue to be processed by Astro's built-in Sharp service, so the integration can be added to an existing project without breaking existing assets. |
| /> | ||
| ``` | ||
|
|
||
| The integration adds an additional `transformation` prop on `<Image />`, `<Picture />`, and `getImage()` for applying any [ImageKit transformation](https://imagekit.io/docs/transformations) — cropping, focus, AI effects, overlays, and more: |
Member
There was a problem hiding this comment.
We usually put examples in parentheses and avoid em-dashes:
Suggested change
| The integration adds an additional `transformation` prop on `<Image />`, `<Picture />`, and `getImage()` for applying any [ImageKit transformation](https://imagekit.io/docs/transformations) — cropping, focus, AI effects, overlays, and more: | |
| The integration adds an additional `transformation` prop on `<Image />`, `<Picture />`, and `getImage()` for applying any [ImageKit transformation](https://imagekit.io/docs/transformations) (e.g. cropping, focus, AI effects, overlays): |
| /> | ||
| ``` | ||
|
|
||
| See the [supported transformations reference](https://imagekit.io/docs/integration/astro#supported-transformations) for the full list, including overlays, smart cropping (`focus: 'auto'`, `focus: 'face'`), and other effects. |
Member
There was a problem hiding this comment.
We try to differentiate between internal and external links by including the external site name:
Suggested change
| See the [supported transformations reference](https://imagekit.io/docs/integration/astro#supported-transformations) for the full list, including overlays, smart cropping (`focus: 'auto'`, `focus: 'face'`), and other effects. | |
| See the [supported transformations reference in ImageKit documentation](https://imagekit.io/docs/integration/astro#supported-transformations) for the full list, including overlays, smart cropping (`focus: 'auto'`, `focus: 'face'`), and other effects. |
|
|
||
| ## Using ImageKit videos | ||
|
|
||
| Add videos to your `.astro` components with the `<Video />` component. It accepts standard HTML video attributes alongside ImageKit-specific props such as `transformation` and `urlEndpoint`. |
Member
There was a problem hiding this comment.
I think a link might be useful for users who want to learn more about these props:
Suggested change
| Add videos to your `.astro` components with the `<Video />` component. It accepts standard HTML video attributes alongside ImageKit-specific props such as `transformation` and `urlEndpoint`. | |
| Add videos to your `.astro` components with the `<Video />` component. It accepts standard HTML video attributes alongside [ImageKit-specific props](https://imagekit.io/docs/integration/astro#video-component) such as `transformation` and `urlEndpoint`. |
| </script> | ||
| ``` | ||
|
|
||
| See [the official guide](https://imagekit.io/docs/integration/astro#uploading-files) for full error handling and abort signals. |
Member
There was a problem hiding this comment.
"official" is confusing; Astro Docs is also official. We should include "ImageKit" to let users know this is an external link:
Suggested change
| See [the official guide](https://imagekit.io/docs/integration/astro#uploading-files) for full error handling and abort signals. | |
| See [the ImageKit guide](https://imagekit.io/docs/integration/astro#uploading-files) for full error handling and abort signals. |
| </Fragment> | ||
| </PackageManagerTabs> | ||
|
|
||
| Then define a collection backed by `client.assets.list()`. The Node SDK returns an array of `File | Folder` objects, so pass `type: 'file'` to exclude folders and `fileType: 'image'` to limit results to images. Use the `Files.File` type guard so each entry is correctly typed before mapping it into your collection schema: |
Member
There was a problem hiding this comment.
nit: I noticed a few "so", we usually don't use this. I think we can break this sentence to match our writing style:
Suggested change
| Then define a collection backed by `client.assets.list()`. The Node SDK returns an array of `File | Folder` objects, so pass `type: 'file'` to exclude folders and `fileType: 'image'` to limit results to images. Use the `Files.File` type guard so each entry is correctly typed before mapping it into your collection schema: | |
| Then define a collection backed by `client.assets.list()`. The Node SDK returns an array of `File | Folder` objects. To limit results to images, pass `type: 'file'` to exclude folders and `fileType: 'image'`. Use the `Files.File` type guard so each entry is correctly typed before mapping it into your collection schema: |
| export const collections = { gallery }; | ||
| ``` | ||
|
|
||
| After adding the collection, run `astro sync` (or start the dev server) so Astro generates the collection types used by `getCollection()`. |
Member
There was a problem hiding this comment.
nit: I think we can avoid the "so Astro" with something more direct here:
Suggested change
| After adding the collection, run `astro sync` (or start the dev server) so Astro generates the collection types used by `getCollection()`. | |
| After adding the collection, run [`astro sync`](/en/reference/cli-reference/#astro-sync) (or start the dev server) to generate the collection types used by `getCollection()`. |
| @@ -0,0 +1 @@ | |||
| <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" style="enable-background:new 0 0 400 400" version="1.1" viewBox="0 0 400 400"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#fff}</style><g><path d="M10 195.8c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9s-3.6-.6-4.9-1.9zm19.5 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7l3.4-.1z" class="st0"/><path d="M94.1 230.7c-6.8 18.4-30.6 21-27 1.9 1.2-6.6 2.6-13.4 3.9-20.9 2.1-9.8-7.2-2.5-10.3 5.4-.1.2-.2.3-.3.7-.5 2.7-4.5 25.3-4.9 27.5H44.4c2.4-13.4 4.2-24 5.9-33.3 1.6-9.1-7-3.7-10.5 3.5-.1.1-.1.2-.2.3l-5.9 29.4H21.9l8.6-42.8h11.8l-1.1 5.8c6.8-8.2 19.2-9.2 19.9 2.5 9-12.2 24.4-13.1 20.3 7l-1.4 7.6c-.7 3.7-.8 3.9-2.1 10.9-1.5 6.8 10 2.6 12.8-5.6h3.4v.1z" class="st0"/><path d="M118.3 210.3c-5.2-9.5-15.3-.3-18.3 13.6-3.3 15.5 2.4 23.5 14.2 7.6l4.1-21.2zm23.2 20.3c-5.9 15.8-26.4 21.3-27.6 6.6-9.1 13.5-28.6 11-27-6.7 1.2-13.8 8-27.6 23.3-28.1h21.7l-.7 3.3c-2.7 13.1-4.5 20.7-6.4 30.6-1.9 9.8 10.6 2.4 13.4-5.6l3.3-.1z" class="st0"/><path d="M166.4 209.6c-5.2-9.7-15.6-.3-18.7 13.8-3.4 15.9 2.6 24 14.4 7.9-.1-.1 4.3-21.7 4.3-21.7zM180 202l-6.6 32.3c-3.6 19.9-9.4 37.8-34.8 30.6l7.9-8.2c4.3 3.3 7.4 3.7 9.8 2.3l.3-1.4 3.9-19c-9.5 11.9-27.8 8.9-26.4-8.5 1.7-19.7 13.1-27.5 21.7-27.9 1.6-.1 3.2-.2 5-.2H180zm11.7 22.5c13.5.4 15.1-15.8 12.9-17.5-1.7-1.3-5.5.3-8.6 5.2-1.8 2.7-3.3 6.6-4.3 11.4.1.3 0 .7 0 .9zm25.7 6c-6.7 12.3-13.7 15.5-23.5 15.2-16.2-.5-16.4-21-8.5-33.6 6.5-10.1 17.6-12.2 22.5-8.1 4.4 3.5 4.5 10 1.9 15.1-3.9 7.1-11 9.8-18.4 9.5.1 4.1 1.6 8.9 5.3 10.7 6.6 3.1 13.5-2.1 17.6-8.7 0-.1 3.1-.1 3.1-.1z" class="st0"/><path d="M240.7 207.9c-4 2.1-9.3 10-12.3 13.8l-.9 4.1c.9-.3 1.7-.7 2.4-1 13.8-5.7 17.5-20.6 10.8-16.9zm7.6 37.4h-12.2l-9.5-14.7-2.7 14.7h-12l11.9-59.9h11.6c-2 10.7-3.8 18.9-5.8 29.6 2.9-4 7.1-9 11.2-11.4 12.2-7.4 15.8 14-4.7 22.7l12.2 19zm12.3-49.5c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9-2 0-3.6-.6-4.9-1.9zm19.4 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7l3.4-.1z" class="st0"/><path d="M303.7 230.3c-6.8 18.3-32.1 23.2-27.3-.3l4.5-22.3h-5.1l2.1-5.2h4.1l2.3-11.1 12.2-2.4-2.7 13.5h6.9l-2.5 5.2h-5.4l-5.7 28.4c-2 10 10.2 2.6 13.1-5.8h3.5zm3.2 3.7c1.4-1.3 3-2 4.9-2s3.5.7 5 2c1.3 1.5 2 3.1 2 5s-.7 3.5-2 4.9c-1.5 1.3-3.1 2-5 2s-3.5-.7-4.9-2c-1.3-1.4-2-3-2-4.9 0-2 .7-3.6 2-5m29.9-38.2c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9-2 0-3.6-.6-4.9-1.9zm19.4 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7l3.4-.1z" class="st0"/><path d="M378.6 223.3c-2.7-.5-5.3-1.7-8.2-3.9l4.5-6.1c1.1 1 2.4 1.8 3.7 2.3-1.4-6.3-6.8-12-11.6-5.2-4.3 6.2-8.1 24.9-.5 29.2 4.1 2.4 10-1.8 12.2-15.9v-.4h-.1zm20.4-8.7c-3.4 3.1-6.8 5.5-10.2 7-2.5 19.5-18.4 27.1-28.5 23.2-8-2.9-10.9-10.3-10-18.1.9-8.3 5.9-16.9 13.9-21.5s19.9-5 24 4.9c.7 1.6 1.1 3.7 1.1 6 3.4-.9 6.8-2.5 9.5-4.4l.2 2.9z" class="st0"/></g></svg> No newline at end of file | |||
Member
There was a problem hiding this comment.
Because the images are not processed (public/), we use SVGOMG to optimize the logos. With the following we obtain 1.32k → 1.23k and I don't see any difference locally, but feel free to double check:
Suggested change
| <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" style="enable-background:new 0 0 400 400" version="1.1" viewBox="0 0 400 400"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#fff}</style><g><path d="M10 195.8c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9s-3.6-.6-4.9-1.9zm19.5 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7l3.4-.1z" class="st0"/><path d="M94.1 230.7c-6.8 18.4-30.6 21-27 1.9 1.2-6.6 2.6-13.4 3.9-20.9 2.1-9.8-7.2-2.5-10.3 5.4-.1.2-.2.3-.3.7-.5 2.7-4.5 25.3-4.9 27.5H44.4c2.4-13.4 4.2-24 5.9-33.3 1.6-9.1-7-3.7-10.5 3.5-.1.1-.1.2-.2.3l-5.9 29.4H21.9l8.6-42.8h11.8l-1.1 5.8c6.8-8.2 19.2-9.2 19.9 2.5 9-12.2 24.4-13.1 20.3 7l-1.4 7.6c-.7 3.7-.8 3.9-2.1 10.9-1.5 6.8 10 2.6 12.8-5.6h3.4v.1z" class="st0"/><path d="M118.3 210.3c-5.2-9.5-15.3-.3-18.3 13.6-3.3 15.5 2.4 23.5 14.2 7.6l4.1-21.2zm23.2 20.3c-5.9 15.8-26.4 21.3-27.6 6.6-9.1 13.5-28.6 11-27-6.7 1.2-13.8 8-27.6 23.3-28.1h21.7l-.7 3.3c-2.7 13.1-4.5 20.7-6.4 30.6-1.9 9.8 10.6 2.4 13.4-5.6l3.3-.1z" class="st0"/><path d="M166.4 209.6c-5.2-9.7-15.6-.3-18.7 13.8-3.4 15.9 2.6 24 14.4 7.9-.1-.1 4.3-21.7 4.3-21.7zM180 202l-6.6 32.3c-3.6 19.9-9.4 37.8-34.8 30.6l7.9-8.2c4.3 3.3 7.4 3.7 9.8 2.3l.3-1.4 3.9-19c-9.5 11.9-27.8 8.9-26.4-8.5 1.7-19.7 13.1-27.5 21.7-27.9 1.6-.1 3.2-.2 5-.2H180zm11.7 22.5c13.5.4 15.1-15.8 12.9-17.5-1.7-1.3-5.5.3-8.6 5.2-1.8 2.7-3.3 6.6-4.3 11.4.1.3 0 .7 0 .9zm25.7 6c-6.7 12.3-13.7 15.5-23.5 15.2-16.2-.5-16.4-21-8.5-33.6 6.5-10.1 17.6-12.2 22.5-8.1 4.4 3.5 4.5 10 1.9 15.1-3.9 7.1-11 9.8-18.4 9.5.1 4.1 1.6 8.9 5.3 10.7 6.6 3.1 13.5-2.1 17.6-8.7 0-.1 3.1-.1 3.1-.1z" class="st0"/><path d="M240.7 207.9c-4 2.1-9.3 10-12.3 13.8l-.9 4.1c.9-.3 1.7-.7 2.4-1 13.8-5.7 17.5-20.6 10.8-16.9zm7.6 37.4h-12.2l-9.5-14.7-2.7 14.7h-12l11.9-59.9h11.6c-2 10.7-3.8 18.9-5.8 29.6 2.9-4 7.1-9 11.2-11.4 12.2-7.4 15.8 14-4.7 22.7l12.2 19zm12.3-49.5c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9-2 0-3.6-.6-4.9-1.9zm19.4 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7l3.4-.1z" class="st0"/><path d="M303.7 230.3c-6.8 18.3-32.1 23.2-27.3-.3l4.5-22.3h-5.1l2.1-5.2h4.1l2.3-11.1 12.2-2.4-2.7 13.5h6.9l-2.5 5.2h-5.4l-5.7 28.4c-2 10 10.2 2.6 13.1-5.8h3.5zm3.2 3.7c1.4-1.3 3-2 4.9-2s3.5.7 5 2c1.3 1.5 2 3.1 2 5s-.7 3.5-2 4.9c-1.5 1.3-3.1 2-5 2s-3.5-.7-4.9-2c-1.3-1.4-2-3-2-4.9 0-2 .7-3.6 2-5m29.9-38.2c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9-2 0-3.6-.6-4.9-1.9zm19.4 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7l3.4-.1z" class="st0"/><path d="M378.6 223.3c-2.7-.5-5.3-1.7-8.2-3.9l4.5-6.1c1.1 1 2.4 1.8 3.7 2.3-1.4-6.3-6.8-12-11.6-5.2-4.3 6.2-8.1 24.9-.5 29.2 4.1 2.4 10-1.8 12.2-15.9v-.4h-.1zm20.4-8.7c-3.4 3.1-6.8 5.5-10.2 7-2.5 19.5-18.4 27.1-28.5 23.2-8-2.9-10.9-10.3-10-18.1.9-8.3 5.9-16.9 13.9-21.5s19.9-5 24 4.9c.7 1.6 1.1 3.7 1.1 6 3.4-.9 6.8-2.5 9.5-4.4l.2 2.9z" class="st0"/></g></svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" viewBox="0 0 400 400"><style>.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#fff}</style><path d="M10 195.8c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9s-3.6-.6-4.9-1.9m19.5 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7z" class="st0"/><path d="M94.1 230.7c-6.8 18.4-30.6 21-27 1.9 1.2-6.6 2.6-13.4 3.9-20.9 2.1-9.8-7.2-2.5-10.3 5.4-.1.2-.2.3-.3.7-.5 2.7-4.5 25.3-4.9 27.5H44.4c2.4-13.4 4.2-24 5.9-33.3 1.6-9.1-7-3.7-10.5 3.5-.1.1-.1.2-.2.3l-5.9 29.4H21.9l8.6-42.8h11.8l-1.1 5.8c6.8-8.2 19.2-9.2 19.9 2.5 9-12.2 24.4-13.1 20.3 7l-1.4 7.6c-.7 3.7-.8 3.9-2.1 10.9-1.5 6.8 10 2.6 12.8-5.6h3.4z" class="st0"/><path d="M118.3 210.3c-5.2-9.5-15.3-.3-18.3 13.6-3.3 15.5 2.4 23.5 14.2 7.6zm23.2 20.3c-5.9 15.8-26.4 21.3-27.6 6.6-9.1 13.5-28.6 11-27-6.7 1.2-13.8 8-27.6 23.3-28.1h21.7l-.7 3.3c-2.7 13.1-4.5 20.7-6.4 30.6-1.9 9.8 10.6 2.4 13.4-5.6z" class="st0"/><path d="M166.4 209.6c-5.2-9.7-15.6-.3-18.7 13.8-3.4 15.9 2.6 24 14.4 7.9-.1-.1 4.3-21.7 4.3-21.7M180 202l-6.6 32.3c-3.6 19.9-9.4 37.8-34.8 30.6l7.9-8.2c4.3 3.3 7.4 3.7 9.8 2.3l.3-1.4 3.9-19c-9.5 11.9-27.8 8.9-26.4-8.5 1.7-19.7 13.1-27.5 21.7-27.9 1.6-.1 3.2-.2 5-.2zm11.7 22.5c13.5.4 15.1-15.8 12.9-17.5-1.7-1.3-5.5.3-8.6 5.2-1.8 2.7-3.3 6.6-4.3 11.4.1.3 0 .7 0 .9m25.7 6c-6.7 12.3-13.7 15.5-23.5 15.2-16.2-.5-16.4-21-8.5-33.6 6.5-10.1 17.6-12.2 22.5-8.1 4.4 3.5 4.5 10 1.9 15.1-3.9 7.1-11 9.8-18.4 9.5.1 4.1 1.6 8.9 5.3 10.7 6.6 3.1 13.5-2.1 17.6-8.7 0-.1 3.1-.1 3.1-.1" class="st0"/><path d="M240.7 207.9c-4 2.1-9.3 10-12.3 13.8l-.9 4.1c.9-.3 1.7-.7 2.4-1 13.8-5.7 17.5-20.6 10.8-16.9m7.6 37.4h-12.2l-9.5-14.7-2.7 14.7h-12l11.9-59.9h11.6c-2 10.7-3.8 18.9-5.8 29.6 2.9-4 7.1-9 11.2-11.4 12.2-7.4 15.8 14-4.7 22.7zm12.3-49.5c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9-2 0-3.6-.6-4.9-1.9m19.4 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7z" class="st0"/><path d="M303.7 230.3c-6.8 18.3-32.1 23.2-27.3-.3l4.5-22.3h-5.1l2.1-5.2h4.1l2.3-11.1 12.2-2.4-2.7 13.5h6.9l-2.5 5.2h-5.4l-5.7 28.4c-2 10 10.2 2.6 13.1-5.8zm3.2 3.7c1.4-1.3 3-2 4.9-2s3.5.7 5 2c1.3 1.5 2 3.1 2 5s-.7 3.5-2 4.9c-1.5 1.3-3.1 2-5 2s-3.5-.7-4.9-2c-1.3-1.4-2-3-2-4.9 0-2 .7-3.6 2-5m29.9-38.2c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9-2 0-3.6-.6-4.9-1.9m19.4 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7z" class="st0"/><path d="M378.6 223.3c-2.7-.5-5.3-1.7-8.2-3.9l4.5-6.1c1.1 1 2.4 1.8 3.7 2.3-1.4-6.3-6.8-12-11.6-5.2-4.3 6.2-8.1 24.9-.5 29.2 4.1 2.4 10-1.8 12.2-15.9v-.4zm20.4-8.7c-3.4 3.1-6.8 5.5-10.2 7-2.5 19.5-18.4 27.1-28.5 23.2-8-2.9-10.9-10.3-10-18.1.9-8.3 5.9-16.9 13.9-21.5s19.9-5 24 4.9c.7 1.6 1.1 3.7 1.1 6 3.4-.9 6.8-2.5 9.5-4.4z" class="st0"/></svg> |
| Alternatively, the CDN may provide its own SDKs to more easily integrate in an Astro project. For example: | ||
|
|
||
| - Cloudinary supports an [Astro SDK](https://astro.cloudinary.dev/) which allows you to easily drop in images with their `CldImage` component or a [Node.js SDK](https://cloudinary.com/documentation/node_integration) that can generate URLs to use with an `<img>` tag in a Node.js environment. | ||
| - ImageKit provides an [Astro integration](https://github.com/imagekit-developer/imagekit-astro) that registers an image service, so Astro's built-in `<Image />` and `<Picture />` components, along with Markdown `![]()` and MDX images, are all routed through ImageKit automatically. It adds CDN delivery, automatic AVIF/WebP conversion, responsive `srcset`, and on-the-fly transformations without changing your existing image syntax. |
Member
There was a problem hiding this comment.
nit: Again, just trying to eliminate a few "so" to match our writing style and shorter sentences are easier to read:
Suggested change
| - ImageKit provides an [Astro integration](https://github.com/imagekit-developer/imagekit-astro) that registers an image service, so Astro's built-in `<Image />` and `<Picture />` components, along with Markdown `![]()` and MDX images, are all routed through ImageKit automatically. It adds CDN delivery, automatic AVIF/WebP conversion, responsive `srcset`, and on-the-fly transformations without changing your existing image syntax. | |
| - ImageKit provides an [Astro integration](https://github.com/imagekit-developer/imagekit-astro) that registers an image service. This means Astro's built-in `<Image />` and `<Picture />` components, along with Markdown `![]()` and MDX images, are all routed through ImageKit automatically. It adds CDN delivery, automatic AVIF/WebP conversion, responsive `srcset`, and on-the-fly transformations without changing your existing image syntax. |
ArmandPhilippot
added
add new content
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a new media hosting guide for ImageKit alongside the existing Cloudinary and Mux guides.
What's added
src/content/docs/en/guides/media/imagekit.mdx— full guide covering installation, configuration, the image service,<Image />/<Picture />usage, AI-powered transformations (background removal, upscale, generative fill, drop shadow), the<Video />component, the<OgImage />component andgetOgImageUrl()helper, client-side uploads (getUploadAuthParams+@imagekit/javascript), loading from the ImageKit Media Library via Astro Content Collections +@imagekit/nodejs, and Node.js asset management.public/logos/imagekit.svgand a new entry insrc/data/logos.ts(alphabetical, betweenimageandjuno).MediaGuidesNavviatype: mediafrontmatter — no nav file edits needed.i18nReady: falseso the page is queued for translation by the community translators.Small mentions added alongside Cloudinary
src/content/docs/en/guides/images.mdx— added a bullet under "Using Images from a CMS or CDN" mentioning the ImageKit Astro integration as a peer to the existing Cloudinary mention.src/content/docs/en/reference/image-service-reference.mdx— added "ImageKit" to the list of example external image services (Cloudinary, Vercel, RIAPI).Verification
pnpm astro check→ 0 errors, 0 warnings on the new file.pnpm build→ 6268 pages built successfully./en/guides/media/(card appears alphabetically) and/en/guides/media/imagekit/.@imagekit/astro/integration,@imagekit/astro/server,getUploadAuthParams,OgImage,getOgImageUrl,Video,@imagekit/nodejs) cross-checked against the published ImageKit Astro integration docs.