{"id":36228,"date":"2024-10-28T07:00:00","date_gmt":"2024-10-28T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36228"},"modified":"2025-04-16T12:40:45","modified_gmt":"2025-04-16T19:40:45","slug":"cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1","title":{"rendered":"Cloudinary Asset Loader for Astro and Headless WordPress Using WPGraphQL (Part 1)"},"content":{"rendered":"\n<p>In web development, combining the flexibility of headless CMS with modern frontend frameworks and asset management tools is essential for building scalable, high-performance websites.&nbsp;<\/p>\n\n\n\n<p>This is a two-part blog post that will walk through building a website using headless WordPress, Astro, WPGraphQL, Advanced Custom Fields, and Cloudinary. We&#8217;ll combine the flexibility of a decoupled CMS with the speed of Astro&#8217;s static site generation and Cloudinary&#8217;s media optimization.<\/p>\n\n\n\n<p>By the end of this tutorial, you&#8217;ll have a better understanding and overall foundational setup that leverages the strengths of each technology to deliver optimized media-rich content. You\u2019ll also have an understanding of the flexibility and developer-friendly experience of headless and decoupled architecture.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What We\u2019ll Cover:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Headless WordPress and why it&#8217;s a good fit for modern web projects.<\/li>\n\n\n\n<li>How Astro complements headless WordPress to deliver fast, static sites.<\/li>\n\n\n\n<li>The role Cloudinary plays in managing and delivering optimized media assets.<\/li>\n\n\n\n<li>Step-by-step instructions for connecting Astro, WordPress, WPGraphQL, and Cloudinary.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>Before we begin, make sure you have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WordPress.<\/strong> For this blog post, I used the free <a href=\"https:\/\/wpengine.com\/local\/\">Local tool<\/a> but you can use any WP install you want.<\/li>\n\n\n\n<li><strong>Node.js and npm.<\/strong> Installed on your development machine.<\/li>\n\n\n\n<li><a href=\"https:\/\/cloudinary.com\/\"><strong>A Cloudinary Account<\/strong><\/a><strong>.<\/strong> I used the samples folder for this blog post.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">What is Headless WordPress?<\/h2>\n\n\n\n<p>Headless WordPress decouples the frontend from the backend. In a traditional setup, WordPress handles both content management and rendering through PHP templates. In a headless architecture, WordPress solely manages content while the frontend is handled by frameworks like Astro, which pull data from WordPress via APIs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Benefits of Using Headless WordPress<\/h3>\n\n\n\n<p>Using headless WordPress offers several advantages, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enhanced performance.<\/strong> By decoupling the frontend from the backend, you allow WordPress to focus solely on the content database and API interactions. This setup can lead to faster load times and improved responsiveness, as the API-driven approach optimizes data delivery and reduces overhead.<\/li>\n\n\n\n<li><strong>Omnichannel experiences.<\/strong> Without a single frontend, headless WordPress can seamlessly integrate with various platforms and technologies. This means you can publish and display content across multiple channels simultaneously, such as websites, mobile apps, and even digital kiosks, allowing for a unified and versatile content distribution strategy.<\/li>\n\n\n\n<li><strong>Improved security. <\/strong>Headless setups, especially static sites, eliminate traditional backend vulnerabilities since there\u2019s no exposed database. This significantly reduces the risk of common security threats associated with WordPress, such as SQL injection attacks, making your content safer from potential breaches.<\/li>\n<\/ul>\n\n\n\n<p>It\u2019s important to note that headless WordPress requires a solid understanding of web development. Additionally, managing and maintaining a headless setup can be more complex than a standard WordPress installation, as it involves handling both the content management system and the separate frontend technology stack.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Astro and Why Use It With Headless WordPress?<\/h2>\n\n\n\n<p>Astro is a modern, innovative framework designed for content-driven websites. It allows you to bring in components from frameworks like React, Vue, and Svelte, but the primary output is static HTML, which loads quickly and performs well.<\/p>\n\n\n\n<p>Astro is a great fit for headless WordPress because it can render static pages, reducing server load and speeding up your website. Astro&#8217;s flexibility lets you dynamically fetch content from APIs (like WPGraphQL), and it&#8217;s excellent at handling content-heavy sites with media assets provided by Cloudinary.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Role of Cloudinary<\/h2>\n\n\n\n<p>Cloudinary is a cloud-based media management solution that optimizes and delivers images, videos, and other resources efficiently. When combined with a headless setup, Cloudinary ensures that your website loads media in the most optimized form, enhancing performance.&nbsp; Here are some of the many features Cloudinary has that we will utilize:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Image and video optimization<\/strong>. Cloudinary automatically delivers media in the optimal format for the requesting device.<\/li>\n\n\n\n<li><strong>Asset management<\/strong>. Organize and manage your assets with versioning and automatic optimization features.<\/li>\n\n\n\n<li><strong>Transformation<\/strong>. Cloudinary allows you to dynamically resize, crop, and apply filters to media assets with URL-based transformations.<\/li>\n\n\n\n<li><strong>Easy WordPress integration<\/strong>. Cloudinary has a plugin in its ecosystem for WordPress that automates the connection and configuration between the two platforms<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step-by-Step Guide<\/h2>\n\n\n\n<p>Let\u2019s dive in and create a site that utilizes all the technology of Cloudinary, WordPress, WPGraphQL, and Astro.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Setting Up WordPress as a Headless CMS<\/h3>\n\n\n\n<p>The first thing we need to do is set up our WordPress install to become a headless CMS.&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Install WPGraphQL Plugin<\/strong>. Go to your WordPress admin, navigate to <strong>Plugins &gt; Add New Plugin<\/strong>, and install the search input bar, search for WPGraphQL, ACF, WPGraphQL for ACF, and Cloudinary.<strong>&nbsp;<\/strong><\/li>\n\n\n\n<li>Activate and install all these plugins. Here\u2019s what each of these plugins do respectively:\n<ul class=\"wp-block-list\">\n<li><strong>WPGraphQL Plugin<\/strong>. This turns your WP install into a headless CMS by exposing your content via GraphQL API<\/li>\n\n\n\n<li><strong>ACF. <\/strong>ACF will allow you to add custom fields to your posts.&nbsp;<\/li>\n\n\n\n<li><strong>WPGraphQL for ACF<\/strong>. WPGraphQL for ACF ensures that these custom fields are available in your GraphQL schema.<\/li>\n\n\n\n<li><strong>The Cloudinary Plugin<\/strong>. This will make the integration from Cloudinary into WordPress seamless and without heavy lifting.&nbsp;&nbsp;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>After you download all four plugins, this is what your plugins page should look like:<br><br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdbF_k062VapfPZp27LNw93LTtJVdmhJGwYjM0hgww3AHRLFRkGgMggcen0TKXITySnc1MdPmKpBkOJpYjRcv691rVEIoq-mO6krSod9BUaIel4zFS3qGTQNNjjHS84ZGCqOPmTYpBOuMhzNJN-rxKhnnI?key=tVJ-_oVdrhwIPT21wBjxcw\" width=\"715\" height=\"396\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Use ACF to Create a Field for Cloudinary Public ID<\/h3>\n\n\n\n<p>Now that we have all the plugins activated, we\u2019re ready for the next step.&nbsp;&nbsp;<\/p>\n\n\n\n<p>To ensure that the correct media is displayed with the corresponding post, we need a way to associate each post with its corresponding Cloudinary asset. This is where the power and fun of decoupled and API driven development comes in. The ability to take different platforms and APIs and combine them together give you the flexibility no other tech stack can.<\/p>\n\n\n\n<p>Since we downloaded the ACF plugin as well as its extension for WPGraphQL, we can now create a custom field in the native Post type of WordPress.<\/p>\n\n\n\n<p>In your WordPress admin, navigate to <strong>ACF &gt; Field Groups <\/strong>and<strong> <\/strong>you should have a page that looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdwy3HwlJ6hzrz_ZUFDGlKaZJiLJUJhAe93B3iZ6roPGY_LkSAvWlTMN0MNDxwwJa64dvbyIbD4wyXiPN0Jd72tmSdSEupJ6-G9VultnCPTSQm5mntCuTzFemy4kl7a4ApCoU5rieQ3IkuYQcrMSITRgAY?key=tVJ-_oVdrhwIPT21wBjxcw\" alt=\"\"\/><\/figure>\n\n\n\n<p>At the top of the screen near the <strong>Field Groups<\/strong> heading, click <strong>+Add New<\/strong> and you should see this page:<br><br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcENzmYgx17viRXLhHfayV8l-U4t1I2ZDw5hF9uUQ9czThv32VdFGFHqLKDy0pwyXVXgaxtQoBUC6FcuiBsOCiyh6QkA7P7KIav79E9_HlmTbaZHbALUZEzEKnH4O_FGhZU6T-reda49LzSvDcp405C5l1D?key=tVJ-_oVdrhwIPT21wBjxcw\" width=\"779\" height=\"426\"><\/p>\n\n\n\n<p>The first input box is the <strong>Field Group Title<\/strong>. This is what will appear on the <strong>Title<\/strong> column within the Field Groups page. For this blog post, I named it \u201ccloudinary public id\u201d.<\/p>\n\n\n\n<p>The second box is a drop-down and it\u2019s what data type you want the field to be. This will just be a simple string text so selecting <strong>text<\/strong> is fine. The third box is the <strong>Field Label<\/strong>, which is the name that will appear on the EDIT page. The last input we need to fill out is <strong>Field Name<\/strong> and this is the name of the actual field itself.<br><br>After you fill the fields out, scroll down until you see the <strong>Settings<\/strong> section. You need to do two things here. First, make sure your rules are set for your field group. In this case, we want to show this field group if the <strong>Post Type<\/strong> is <strong>Post<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfR7-TpQihPK2Veg4sSTcJSNytCnXCfiAxuORj5ZdCNiQVdYAZTRCLCTJR_Oacys5L0duyKkFJBOoJEktnvezEGAsSHapYdPg_GsNdQlvdFRdXlmnIu7SqHjLzZ3F8veg1QXFQ_-rdkwm3SK4NhaZsHtu4?key=tVJ-_oVdrhwIPT21wBjxcw\" alt=\"\"\/><\/figure>\n\n\n\n<p>The second thing is to click the <strong>GraphQL<\/strong> tab and make sure this shows in GraphQL:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeFkPJpYHwCt1KZHhB857vv9NfHX3KS1EJJ7-dGGfPXIBNgljEkPPRXdipDfDevDprBTUoGGLDZbzdHP2D02JrIQ0wLYgNIrQwu6sMDZtBGeMB5Nlqe9z-Tx9xVJJTvO70vm_m49QQUMHpnDQ6RRiJWrAET?key=tVJ-_oVdrhwIPT21wBjxcw\" alt=\"\"\/><\/figure>\n\n\n\n<p>We\u2019re all set on this section. The last thing we need to do is set our permalinks.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Set Permalinks<\/h4>\n\n\n\n<p>WordPress offers you the ability to create a custom URL structure for your permalinks and archives. Custom URL structures can improve the aesthetics, usability, and forward-compatibility of your links. In this blog post, we\u2019ll go by Post name.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Navigate to<strong> Settings &gt; Permalinks<\/strong> on the main hamburger menu from your WordPress admin.&nbsp; You should see this page:<br><br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfceqUNYq5H1-Zp0GKT646VQ--SBcvmgSahJM1SJ2ZCPeSuNQm5LvEzJ1YBqGEMir6F8o7Q22B3U3N6-Ejeh8Ma8JBQyYofSM1e-jOFq5if4ngONRAIbgDCyvxDApdyWWVx1M6ZvdjW2gpNQeN680lzjfoa?key=tVJ-_oVdrhwIPT21wBjxcw\" width=\"788\" height=\"366\"><\/p>\n\n\n\n<p>Check <strong>Post name<\/strong>.&nbsp; Then scroll to the bottom of the page and click <strong>Save Changes<\/strong>. We\u2019re done setting up our WordPress backend! Let\u2019s move on to our Astro frontend.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Cloudinary Assets<\/h2>\n\n\n\n<p>For this section, we need to make sure that we have assets to load into the frontend and that we grab those public ids connected to each asset.<\/p>\n\n\n\n<p>Log in to your Cloudinary account and navigate to <strong>Media Library &gt; Folders &gt; Samples &gt; Landscapes <\/strong>and you should see a page like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXe_KPuxhW5NtoEODFSmifkKWIQA4g8mfLc-IyZih-c91qHVY0jv8OGU8OXeMI4DfSq90P6ayKmHTpfP23l6NqzIw02ASZtqWRsOpKUvKjQ926IWCOUSx5RquCnacHTlIcc4zvJlJcCV19V_vBBvZSgt4Dxt?key=tVJ-_oVdrhwIPT21wBjxcw\" alt=\"\"\/><\/figure>\n\n\n\n<p>(Just a note, you can use whatever folder you own that contains your assets you wish to use for this blog post. I\u2019m just using the default landscape folder.)<\/p>\n\n\n\n<p>Once you\u2019re on your page that contains the assets, click any of the images to go into its asset detail page:<br><br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXd4tnX2ZAnQl38Y_z3DJrujb78q1xI4JfmkaVq0IG_0vecHgm3haDdpDLNOcZSQE1aVzSUB1oQtOwvNfV7jAd5aATS5wKe3GyzCk1T_MQB_MhfMxuhETLzrOJHWkaqZNGP8Nax_vgBAK3KXIk3UoHiPuTEJ?key=tVJ-_oVdrhwIPT21wBjxcw\" width=\"591\" height=\"326\"><\/p>\n\n\n\n<p>Focusing on the top left corner of the page, you\u2019ll see the Cloudinary public id, which is the public id tied to the image you just clicked. You want to copy and save the entire path of the name.&nbsp; So in this image the public id would be<strong> <\/strong>\u201csamples\/landscapes\/beach-boat\u201d. Go ahead and copy your public id and then save them somewhere. We\u2019ll need them in the next section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Custom Field of Cloudinary Public ID<\/h3>\n\n\n\n<p>Head back over to your WordPress admin. In your WP admin, navigate to <strong>Posts<\/strong>. Click any post you want to edit. You should have a page that looks like this:<br><br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXc_BeeI2hTJtFi4IDhi4_3kHyhao9-rB9SAdz9rjjt6RDQdpMtG2gDbPn6c8UtIIBA9FZJx2nM6J4MH0x8P0MSeXo9fjGODLAYWzIZHexXQRg42xAzNGda4mttqkznXGYbIV4bqYHwxxrMqnoOISByNbec?key=tVJ-_oVdrhwIPT21wBjxcw\" width=\"713\" height=\"393\"><\/p>\n\n\n\n<p>At the bottom of the screen, you should be able to see the custom field you created. This is where you need to insert the Cloudinary public id you saved from your Cloudinary account.&nbsp; In this example, the id related to my asset is \u201csamples\/landscapes\/landscape-panorama\u201d. This custom field will allow WordPress and Cloudinary to connect and link the asset together.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Test the Field in WPGraphQL<\/h3>\n\n\n\n<p>Let\u2019s make sure this works in WPGraphQL. Go to your GraphQL IDE at the top of the page and click it to reveal the IDE. Paste this query in the IDE to test:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-wrap-lines\">query GetPosts {\n\n\u00a0\u00a0posts {\n\n\u00a0\u00a0\u00a0\u00a0nodes {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uri\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cloudinaryAsset{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cloudinaryPublicId\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0}\n\n}<\/code><\/span><\/pre>\n\n\n<p>Press play to get the response, and you should get this JSON back:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcOqn0Q4pluC302ClnlDt54ahqte5LQ8tDc6F3_l0vxebYJejvrg_Y94sFCdkls0ixa-EQsp0fEqZdd2ZaYfwXcwZLFMfveBYMf3SZrRRMVVWAvtTGFCKyGfErcE9kbPw4KRcCIFAynSOq8CvMnnColYeo_?key=tVJ-_oVdrhwIPT21wBjxcw\" alt=\"\"\/><\/figure>\n\n\n\n<p>Awesome! This works! We\u2019re getting the custom field we made back.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>We set up our WordPress backend to be a headless CMS with the custom field we needed to connect and link to our <a href=\"https:\/\/cloudinary.com\/products\/digital_asset_management\">Cloudinary assets<\/a>. In <a href=\"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-2\">Part 2<\/a>, we\u2019ll spin up our Astro frontend, configure it with <a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> and WPGraphQL, and link the two systems together.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In web development, combining the flexibility of headless CMS with modern frontend frameworks and asset management tools is essential for building scalable, high-performance websites.&nbsp; This is a two-part blog post that will walk through building a website using headless WordPress, Astro, WPGraphQL, Advanced Custom Fields, and Cloudinary. We&#8217;ll combine the flexibility of a decoupled CMS [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":36229,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,137,328],"class_list":["post-36228","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-headless","tag-wordpress"],"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>Cloudinary Asset Loader for Astro and Headless WordPress Using WPGraphQL (Part 1)<\/title>\n<meta name=\"description\" content=\"In web development, combining the flexibility of headless CMS with modern frontend frameworks and asset management tools is essential for building\" \/>\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\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cloudinary Asset Loader for Astro and Headless WordPress Using WPGraphQL (Part 1)\" \/>\n<meta property=\"og:description\" content=\"In web development, combining the flexibility of headless CMS with modern frontend frameworks and asset management tools is essential for building\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-28T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T19:40:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1729880224\/Assets_Loader_Astro_Headless_WordPress_p1-blog\/Assets_Loader_Astro_Headless_WordPress_p1-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\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Cloudinary Asset Loader for Astro and Headless WordPress Using WPGraphQL (Part 1)\",\"datePublished\":\"2024-10-28T14:00:00+00:00\",\"dateModified\":\"2025-04-16T19:40:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1\"},\"wordCount\":1687,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729880224\/Assets_Loader_Astro_Headless_WordPress_p1-blog\/Assets_Loader_Astro_Headless_WordPress_p1-blog.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Headless\",\"WordPress\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1\",\"url\":\"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1\",\"name\":\"Cloudinary Asset Loader for Astro and Headless WordPress Using WPGraphQL (Part 1)\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729880224\/Assets_Loader_Astro_Headless_WordPress_p1-blog\/Assets_Loader_Astro_Headless_WordPress_p1-blog.jpg?_i=AA\",\"datePublished\":\"2024-10-28T14:00:00+00:00\",\"dateModified\":\"2025-04-16T19:40:45+00:00\",\"description\":\"In web development, combining the flexibility of headless CMS with modern frontend frameworks and asset management tools is essential for building\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729880224\/Assets_Loader_Astro_Headless_WordPress_p1-blog\/Assets_Loader_Astro_Headless_WordPress_p1-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729880224\/Assets_Loader_Astro_Headless_WordPress_p1-blog\/Assets_Loader_Astro_Headless_WordPress_p1-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cloudinary Asset Loader for Astro and Headless WordPress Using WPGraphQL (Part 1)\"}]},{\"@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":"Cloudinary Asset Loader for Astro and Headless WordPress Using WPGraphQL (Part 1)","description":"In web development, combining the flexibility of headless CMS with modern frontend frameworks and asset management tools is essential for building","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\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1","og_locale":"en_US","og_type":"article","og_title":"Cloudinary Asset Loader for Astro and Headless WordPress Using WPGraphQL (Part 1)","og_description":"In web development, combining the flexibility of headless CMS with modern frontend frameworks and asset management tools is essential for building","og_url":"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1","og_site_name":"Cloudinary Blog","article_published_time":"2024-10-28T14:00:00+00:00","article_modified_time":"2025-04-16T19:40:45+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1729880224\/Assets_Loader_Astro_Headless_WordPress_p1-blog\/Assets_Loader_Astro_Headless_WordPress_p1-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\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Cloudinary Asset Loader for Astro and Headless WordPress Using WPGraphQL (Part 1)","datePublished":"2024-10-28T14:00:00+00:00","dateModified":"2025-04-16T19:40:45+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1"},"wordCount":1687,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729880224\/Assets_Loader_Astro_Headless_WordPress_p1-blog\/Assets_Loader_Astro_Headless_WordPress_p1-blog.jpg?_i=AA","keywords":["Guest Post","Headless","WordPress"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1","url":"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1","name":"Cloudinary Asset Loader for Astro and Headless WordPress Using WPGraphQL (Part 1)","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729880224\/Assets_Loader_Astro_Headless_WordPress_p1-blog\/Assets_Loader_Astro_Headless_WordPress_p1-blog.jpg?_i=AA","datePublished":"2024-10-28T14:00:00+00:00","dateModified":"2025-04-16T19:40:45+00:00","description":"In web development, combining the flexibility of headless CMS with modern frontend frameworks and asset management tools is essential for building","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729880224\/Assets_Loader_Astro_Headless_WordPress_p1-blog\/Assets_Loader_Astro_Headless_WordPress_p1-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729880224\/Assets_Loader_Astro_Headless_WordPress_p1-blog\/Assets_Loader_Astro_Headless_WordPress_p1-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-1#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cloudinary Asset Loader for Astro and Headless WordPress Using WPGraphQL (Part 1)"}]},{"@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\/v1729880224\/Assets_Loader_Astro_Headless_WordPress_p1-blog\/Assets_Loader_Astro_Headless_WordPress_p1-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36228","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=36228"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36228\/revisions"}],"predecessor-version":[{"id":37431,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36228\/revisions\/37431"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/36229"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=36228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=36228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=36228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}