{"id":35722,"date":"2024-09-19T07:25:12","date_gmt":"2024-09-19T14:25:12","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=35722"},"modified":"2025-04-16T12:33:24","modified_gmt":"2025-04-16T19:33:24","slug":"source-cloudinary-assets-astro-content-layer","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer","title":{"rendered":"Source Cloudinary Assets in Astro With the Astro Content Layer"},"content":{"rendered":"\n<p>Cloudinary&#8217;s state-of-the-art Media Library and DAM allows developers and non-technical teams to easily manage their assets at scale, but how can we just as easily access those assets programmatically to deliver them in our websites and apps?<\/p>\n\n\n\n<p>The Astro team just launched their new Content Layer feature, which is a perfect fit for natively sourcing your assets inside of your Astro project. And we&#8217;re excited to be their launching partner.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"900\" height=\"400\" data-public-id=\"Web_Assets\/blog\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-1\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-1.png\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_900,h_400,c_scale\/f_auto,q_auto\/v1726681151\/Web_Assets\/blog\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-1\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-1.png?_i=AA\" alt=\"Grid of images showing clothing and fashion with Cloudinary and Astro logos\" class=\"wp-post-35722 wp-image-35723\" loading=\"lazy\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1726681151\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726681151\/Web_Assets\/blog\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-1\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-1.png?_i=AA 900w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726681151\/Web_Assets\/blog\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-1\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-1.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726681151\/Web_Assets\/blog\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-1\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-1.png?_i=AA 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<p>We\u2019ll discuss how we can use the Cloudinary Astro SDK and the <code>cldAssetLoader<\/code> to load your images and videos into your app.<\/p>\n\n\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Astro Cloudinary is a community library supported by the Cloudinary Developer Experience team.<\/p>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">What is the Astro Content Layer?<\/h2>\n\n\n\n<p>The Astro Content Layer builds on top of Astro&#8217;s existing Content Collections, which allows you to easily source local content, like Markdown or MDX, into your project. Content Collections are a powerful way to build blogs, online stores, and any site with file-based content.<\/p>\n\n\n\n<p>Taking that a step further, the Content Layer allows you to source local content <em>and<\/em> source data from remote locations like an API, CMS, or even a DAM, which is where Cloudinary comes in.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img width=\"1024\" height=\"637\" data-public-id=\"Web_Assets\/blog\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-2\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-2.png\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_637,c_scale\/f_auto,q_auto\/v1726681146\/Web_Assets\/blog\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-2\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-2.png?_i=AA\" alt=\"Astro connecting data from multiple sources\" class=\"wp-post-35722 wp-image-35724\" style=\"width:840px;height:auto\" loading=\"lazy\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1726681146\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726681146\/Web_Assets\/blog\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-2\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-2.png?_i=AA 2000w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726681146\/Web_Assets\/blog\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-2\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-2.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726681146\/Web_Assets\/blog\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-2\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-2.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726681146\/Web_Assets\/blog\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-2\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-2.png?_i=AA 1024w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726681146\/Web_Assets\/blog\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-2\/blog-Source-Cloudinary-Assets-in-Astro-With-the-Astro-Content-Layer-2.png?_i=AA 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The Content Layer also improves on Collections from a technology perspective, but we&#8217;ll let the Astro team fill you in on those details.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cloudinary and the Astro Content Layer<\/h2>\n\n\n\n<p>To make it as easy as ever to source assets stored in Cloudinary into your Astro project, we&#8217;ve built a Cloudinary content loader available through a new Cloudinary Astro SDK.<\/p>\n\n\n\n<p>By using the <code>cldAssetsLoader<\/code>, you can define a new collection, configure options for how you want your data to be queried or how much of that data to load, and through Astro&#8217;s Content Layer, query it alongside the rest of your content.<\/p>\n\n\n\n<p>Want to watch the video version? Check out the Dev Hint or follow along with the steps below.<\/p>\n\n\n\n<style>\n.video-parent {padding-bottom: 56.25%; width: 100%;position: relative;}\n.video-parent iframe {position: absolute; width: 100%; height: 100%;}\n<\/style>\n<div class=\"video-parent\"><iframe width=\"100%\" src=\"https:\/\/www.youtube.com\/embed\/iS3bHR0bVOI?si=-5e70ILn1trDLyFg\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; encrypted-media; gyroscope; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Installing and Configuring Astro Cloudinary<\/h3>\n\n\n\n<p>To get started, we first need to <a href=\"https:\/\/astro.cloudinary.dev\/installation\">install the Astro Cloudinary SDK<\/a>.<\/p>\n\n\n\n<p>In your terminal, run:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"Shell Session\" data-shcb-language-slug=\"shell\"><span><code class=\"hljs language-shell shcb-wrap-lines\">npm install astro-cloudinary<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Shell Session<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">shell<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Then configure your Cloudinary cloud name, API key, and API secret in your <code>.env.<\/code> file:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"Shell Session\" data-shcb-language-slug=\"shell\"><span><code class=\"hljs language-shell shcb-wrap-lines\">PUBLIC_CLOUDINARY_CLOUD_NAME=\"&lt;Cloud Name&gt;\"\nPUBLIC_CLOUDINARY_API_KEY=\"&lt;API Key&gt;\"\nCLOUDINARY_API_SECRET=\"&lt;API Secret&gt;\"<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Shell Session<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">shell<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Need help finding your credentials? <a href=\"https:\/\/www.youtube.com\/watch?v=1SIp9VL5TMo&amp;list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8&amp;index=10\">Learn more<\/a>.<\/p>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 2: Sourcing Assets With <code>cldAssetLoader<\/code><\/h3>\n\n\n\n<p>To source our assets, we can use the <code>cldAssetLoader<\/code> to create a new Collection in Astro. This will allow us to programmatically access our images and videos anywhere in our Astro project.<\/p>\n\n\n\n<p>Inside of your <code>content\/config.ts<\/code> file, import the Astro <code>defineCollection<\/code> and Cloudinary <code>cldAssetsLoader<\/code> functions:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { defineCollection } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'astro:content'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { cldAssetsLoader } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'astro-cloudinary\/loaders'<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Next, define a new collect by exporting an object that represents each object that you want to make available in your Astro project:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> collections = {\n\u00a0\u00a0<span class=\"hljs-attr\">myAssets<\/span>: defineCollection({\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">loader<\/span>: cldAssetsLoader({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">limit<\/span>: <span class=\"hljs-number\">4<\/span>,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">folder<\/span>: <span class=\"hljs-string\">'samples\/food'<\/span>\n\u00a0\u00a0\u00a0\u00a0})\n\u00a0\u00a0}),\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>By default, excluding the limit and folder will query the Cloudinary API\u2019s default limit inside of the root directory. Check out the <a href=\"https:\/\/astro.cloudinary.dev\/cldassetsloader\/configuration\"><code>cldAssetsLoader<\/code> configuration<\/a> to learn more.<\/p>\n<\/div>\n\n\n<p>And with that configured, you&#8217;re now able to query those assets inside of your Astro project!<\/p>\n\n\n\n<p>For instance, if you want to query your assets inside of an Astro component, you can use the getCollection function by adding:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">---\n<span class=\"hljs-keyword\">import<\/span> { getCollection } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'astro:content'<\/span>;\n<span class=\"hljs-keyword\">const<\/span> assets = <span class=\"hljs-keyword\">await<\/span> getCollection(<span class=\"hljs-string\">'myAssets'<\/span>);\n---<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Where the first argument of <code>getCollection<\/code> would be the same name you used to define your collection.<\/p>\n\n\n\n<p>If you want to query an individual asset from your collection, you can alternatively use the <code>getEntry<\/code> function by adding:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">---\n<span class=\"hljs-keyword\">import<\/span> { getEntry } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'astro:content'<\/span>;\n<span class=\"hljs-keyword\">const<\/span> asset = <span class=\"hljs-keyword\">await<\/span> getEntry(<span class=\"hljs-string\">'myAssets'<\/span>, <span class=\"hljs-string\">'samples\/food\/dessert'<\/span>);\n---<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Where the first argument to <code>getEntry<\/code> is similarly the collection name and the second argument is your asset&#8217;s Public ID.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Adding Cloudinary Images and Videos in Astro<\/h3>\n\n\n\n<p>Now that you&#8217;ve sourced your <a href=\"https:\/\/cloudinary.com\/products\/digital_asset_management\">Cloudinary assets<\/a>, you need a great way to render them onto a page, which is where the Astro Cloudinary&#8217;s CldImage or CldVideoPlayer components come in.<\/p>\n\n\n\n<p>If you&#8217;re adding images, you can use the <a href=\"https:\/\/astro.cloudinary.dev\/cldimage\/basic-usage\"><code>CldImage<\/code><\/a> component with a few basic props:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">---\n<span class=\"hljs-keyword\">import<\/span> { getCollection } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'astro:content'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { CldImage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'astro-cloudinary'<\/span>;\n<span class=\"hljs-keyword\">const<\/span> images = <span class=\"hljs-keyword\">await<\/span> getCollection(<span class=\"hljs-string\">'myImages'<\/span>);\n---\n<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n\u00a0\u00a0{images.map(image =&gt; {\n\u00a0\u00a0\u00a0\u00a0return (\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldImage<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{image.data.public_id}<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{image.data.width}<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{image.data.height}<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">{image.data.context?.caption<\/span> || ''}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n\u00a0\u00a0\u00a0\u00a0)\n\u00a0\u00a0})}\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Similarly, if adding videos, you can use the <a href=\"https:\/\/astro.cloudinary.dev\/cldvideoplayer\/basic-usage\"><code>CldVideoPlayer<\/code><\/a>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">---\n<span class=\"hljs-keyword\">import<\/span> { getCollection } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'astro:content'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { CldVideoPlayer } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'astro-cloudinary'<\/span>;\n<span class=\"hljs-keyword\">const<\/span> videos = <span class=\"hljs-keyword\">await<\/span> getCollection(<span class=\"hljs-string\">'myVideos'<\/span>);\n---\n<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n\u00a0\u00a0{videos.map(video =&gt; {\n\u00a0\u00a0\u00a0\u00a0return (\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldVideoPlayer<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{video.data.public_id}<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{video.data.width}<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{video.data.height}<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n\u00a0\u00a0\u00a0\u00a0)\n\u00a0\u00a0})}\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Building Visual Experiences With Astro<\/h2>\n\n\n\n<p>Astro is rapidly becoming the go-to solution for building dynamic visual, content-driven experiences on the web, and we&#8217;re thrilled to give you the tools you need to make building those experiences with Cloudinary as easy as possible.<br>We&#8217;re looking for additional feedback on the Astro Cloudinary SDK!<\/p>\n\n\n\n<p>Head over to <a href=\"https:\/\/github.com\/cloudinary-community\/astro-cloudinary\">the GitHub repository<\/a> to submit any feedback or issues (or give us a star!) or email <a href=\"mailto:devrel@cloudinary.com\">devrel@cloudinary.com<\/a> for direct contact.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cloudinary&#8217;s state-of-the-art Media Library and DAM allows developers and non-technical teams to easily manage their assets at scale, but how can we just as easily access those assets programmatically to deliver them in our websites and apps? The Astro team just launched their new Content Layer feature, which is a perfect fit for natively sourcing [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":35727,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[89,263],"class_list":["post-35722","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-digital-asset-management","tag-sdk"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Source Cloudinary Assets in Astro With the Astro Content Layer<\/title>\n<meta name=\"description\" content=\"Cloudinary&#039;s state-of-the-art Media Library and DAM allows developers and non-technical teams to easily manage their assets at scale, but how can we just\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Source Cloudinary Assets in Astro With the Astro Content Layer\" \/>\n<meta property=\"og:description\" content=\"Cloudinary&#039;s state-of-the-art Media Library and DAM allows developers and non-technical teams to easily manage their assets at scale, but how can we just\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-19T14:25:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T19:33:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1726269803\/cloudinary_astro_content_layer-blog\/cloudinary_astro_content_layer-blog-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Source Cloudinary Assets in Astro With the Astro Content Layer\",\"datePublished\":\"2024-09-19T14:25:12+00:00\",\"dateModified\":\"2025-04-16T19:33:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer\"},\"wordCount\":650,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726269803\/cloudinary_astro_content_layer-blog\/cloudinary_astro_content_layer-blog.jpg?_i=AA\",\"keywords\":[\"Digital Asset Management\",\"SDK\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer\",\"url\":\"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer\",\"name\":\"Source Cloudinary Assets in Astro With the Astro Content Layer\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726269803\/cloudinary_astro_content_layer-blog\/cloudinary_astro_content_layer-blog.jpg?_i=AA\",\"datePublished\":\"2024-09-19T14:25:12+00:00\",\"dateModified\":\"2025-04-16T19:33:24+00:00\",\"description\":\"Cloudinary's state-of-the-art Media Library and DAM allows developers and non-technical teams to easily manage their assets at scale, but how can we just\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726269803\/cloudinary_astro_content_layer-blog\/cloudinary_astro_content_layer-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726269803\/cloudinary_astro_content_layer-blog\/cloudinary_astro_content_layer-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Source Cloudinary Assets in Astro With the Astro Content Layer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Source Cloudinary Assets in Astro With the Astro Content Layer","description":"Cloudinary's state-of-the-art Media Library and DAM allows developers and non-technical teams to easily manage their assets at scale, but how can we just","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer","og_locale":"en_US","og_type":"article","og_title":"Source Cloudinary Assets in Astro With the Astro Content Layer","og_description":"Cloudinary's state-of-the-art Media Library and DAM allows developers and non-technical teams to easily manage their assets at scale, but how can we just","og_url":"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer","og_site_name":"Cloudinary Blog","article_published_time":"2024-09-19T14:25:12+00:00","article_modified_time":"2025-04-16T19:33:24+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1726269803\/cloudinary_astro_content_layer-blog\/cloudinary_astro_content_layer-blog-jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Source Cloudinary Assets in Astro With the Astro Content Layer","datePublished":"2024-09-19T14:25:12+00:00","dateModified":"2025-04-16T19:33:24+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer"},"wordCount":650,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726269803\/cloudinary_astro_content_layer-blog\/cloudinary_astro_content_layer-blog.jpg?_i=AA","keywords":["Digital Asset Management","SDK"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer","url":"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer","name":"Source Cloudinary Assets in Astro With the Astro Content Layer","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726269803\/cloudinary_astro_content_layer-blog\/cloudinary_astro_content_layer-blog.jpg?_i=AA","datePublished":"2024-09-19T14:25:12+00:00","dateModified":"2025-04-16T19:33:24+00:00","description":"Cloudinary's state-of-the-art Media Library and DAM allows developers and non-technical teams to easily manage their assets at scale, but how can we just","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726269803\/cloudinary_astro_content_layer-blog\/cloudinary_astro_content_layer-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726269803\/cloudinary_astro_content_layer-blog\/cloudinary_astro_content_layer-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/source-cloudinary-assets-astro-content-layer#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Source Cloudinary Assets in Astro With the Astro Content Layer"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726269803\/cloudinary_astro_content_layer-blog\/cloudinary_astro_content_layer-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/35722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=35722"}],"version-history":[{"count":9,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/35722\/revisions"}],"predecessor-version":[{"id":37425,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/35722\/revisions\/37425"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/35727"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=35722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=35722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=35722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}