docs: Updates Cloudinary Astro Integration Guides

src/content/docs/en/guides/images.mdx

@@ -497,7 +497,7 @@ export default defineConfig({
 
 Image CDNs work with all Astro image options. Use an image's full URL as the `src` attribute in the `<Image />` component, an `<img>` tag, or in Markdown notation. For image optimization with remote images, also [configure your authorized domains or URL patterns](#authorizing-remote-images).
 
-Alternatively, if the CDN provides a Node.js SDK, you can use that in your project. For example, [Cloudinary’s SDK](https://cloudinary.com/documentation/node_integration) can generate an `<img>` tag with the appropriate `src` for you.
+Alternatively, the CDN may provide it's 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.
 
 ## Images in Markdown files
 

src/content/docs/en/guides/media/cloudinary.mdx

@@ -6,11 +6,214 @@ stub: true
 service: Cloudinary
 i18nReady: true
 ---
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 
 [Cloudinary](https://cloudinary.com) is an image and video platform and headless Digital Asset Manager (DAM) that lets you host assets and deliver them from their content delivery network (CDN).
 
-When delivering from Cloudinary, you additionally get access to their transformation engine, giving you the ability to edit your assets with tools like background removal, dynamic cropping and resizing, and generative AI.
+When delivering from Cloudinary, you additionally get access to their Transformation API, giving you the ability to edit your assets with tools like background removal, dynamic cropping and resizing, and generative AI.
+
+## Using Cloudinary in Astro
+
+Cloudinary supports a wide variety of SDKs that can be used depending on your Astro environment.
+
+The [Cloudinary Astro SDK](https://astro.cloudinary.dev/) supports native Astro components, including an Image, Video, and Upload component, as well as a Loader that can be used with Astro's Content Layer.
+
+Alternatively, both the Cloudinary [Node.js SDK](https://cloudinary.com/documentation/node_integration) or [JavaScript SDK](https://cloudinary.com/documentation/javascript_integration) can be used to generate URLs, where the Node.js SDK can additionally make requests to the Cloudinary API including uploading assets, requesting resources, and running content analysis.
+
+## Prerequisites
+
+- An existing Astro project
+- A Cloudinary account
+
+## Installing Astro Cloudinary
+
+Install the Cloudinary Astro SDK by running:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  npm install astro-cloudinary
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  pnpm install astro-cloudinary
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  yarn add astro-cloudinary
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+## Configuring Your Account
+
+Create a new `.env` file in the root of your project and add your Cloudinary credentials:
+
+```shell
+PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
+
+// Only needed if using CldUploadWidget or cldAssetsLoader
+PUBLIC_CLOUDINARY_API_KEY="<Your API Key>"
+CLOUDINARY_API_SECRET="<Your API Secret>"
+```
+
+## Adding Images
+
+To add an image, you can use the CldImage component, which will automatically optimize your image and give you access to the Transformations API.
+
+```jsx
+---
+import { CldImage } from 'astro-cloudinary';
+---
+<CldImage
+  src="<Public ID>"
+  width="<Width>"
+  height="<Height>"
+  alt="<Description>"
+/>
+```
+
+[Learn more about CldImage](https://astro.cloudinary.dev/cldimage/basic-usage).
+
+## Adding Videos
+
+To add a video, you can use the CldVideoPlayer component, which will embed your video automatically optimized using the [Cloudinary Video Player](https://cloudinary.com/documentation/cloudinary_video_player).
+
+```jsx
+---
+import { CldVideoPlayer } from 'astro-cloudinary';
+---
+<CldVideoPlayer
+  src="<Public ID>"
+  width="<Width>"
+  height="<Height>"
+/>
+```
+
+[Learn more about CldVideoPlayer](https://astro.cloudinary.dev/cldvideoplayer/basic-usage).
+
+## Uploading Files
+
+To add file uploading in your website or app's UI, you can use the CldUploadWidget, which will embed the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget).
+
+For unsigned uploads, create an unsigned [Upload Preset](https://cloudinary.com/documentation/upload_presets#banner) and add:
+
+```jsx
+---
+import { CldUploadWidget } from 'astro-cloudinary';
+---
+<CldUploadWidget uploadPreset="<Upload Preset>">
+  <button>Upload</button>
+</CldUploadWidget>
+```
+
+For signed uploads, you can find [a guide and example](https://astro.cloudinary.dev/clduploadwidget/signed-uploads) on the Astro Cloudinary docs.
+
+[Learn more about CldUploadWidget](https://astro.cloudinary.dev/clduploadwidget/basic-usage).
+
+## Loading Images & Videos
+
+The Astro Content Layer can be used to load Cloudinary assets with the `cldAssetsLoader`.
+
+To load images or videos, add:
+
+```js
+import { defineCollection } from 'astro:content';
+import { cldAssetsLoader } from 'astro-cloudinary/loaders';
+
+export const collections = {
+  assets: defineCollection({
+    loader: cldAssetsLoader({
+      folder: '<Folder>' // Optional, without loads root directory
+    })
+  }),
+}
+```
+
+You can then use the [getCollection or getEntry functions](/en/guides/content-collections/#querying-collections) to select one or many images or videos from your collection.
+
+[Learn more about cldAssetsLoader](https://astro.cloudinary.dev/cldassetsloader/basic-usage).
+
+## Generating Social Media Cards
+
+Social Media Cards are useful for increasing engagement on social posts.
+
+To create a Social card, generate a Cloudinary URL and utilize Open Graph and Twitter meta tags to embed the image on your website:
+
+```jsx
+---
+import { getCldOgImageUrl } from 'astro-cloudinary/helpers';
+const ogImageUrl = getCldOgImageUrl({ src: '<Public ID>' });
+---
+<meta property="og:image" content={ogImageUrl} />
+<meta property="og:image:secure_url" content={ogImageUrl} />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+<meta property="twitter:title" content="<Twitter Title>" />
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:image" content={ogImageUrl} />
+```
+
+The `getCldOgImageUrl` helper utilizes the same API as the CldImage component, meaning you can use Cloudinary transformations to create dynamic, unique social cards for any of your pages.
+
+Find [Social Media Card templates](https://astro.cloudinary.dev/templates/social-media-cards) on the Astro Cloudinary docs.
+
+[Learn more about getCldOgImageUrl](https://astro.cloudinary.dev/getcldogimageurl/basic-usage).
+
+## Using Cloudinary in Node.js
+
+For more complex asset management, uploading, or analysis, you can use the Cloudinary Node.js SDK when working in an Astro Node.js environment.
+
+Install the Cloudinary Node.js SDK by running:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  npm install cloudinary
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  pnpm install cloudinary
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  yarn add cloudinary
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+And configure your account by running:
+
+```js
+import { v2 as cloudinary } from "cloudinary";
+
+cloudinary.config({
+  cloud_name: import.meta.env.PUBLIC_CLOUDINARY_CLOUD_NAME,
+  api_key: import.meta.env.PUBLIC_CLOUDINARY_API_KEY,
+  api_secret: import.meta.env.CLOUDINARY_API_SECRET,
+});
+```
+
+:::note
+This assumes you have your environment variables set up using the specified names.
+:::
+
+Which will give you access to the Cloudinary APIs such as the Upload API, where you can upload an asset by running:
+
+```js
+await cloudinary.uploader.upload('./path/to/file');
+```
+
+Learn how to [upload files using the Cloudinary Node.js SDK with Astro Forms](https://www.youtube.com/watch?v=DQUYMyT2MTM).
+
 
 ## Official Resources
 
-- Check out [the Cloudinary Astro SDK](https://astro.cloudinary.dev/) (in Beta)
+- [Cloudinary Astro SDK](https://astro.cloudinary.dev/)
+- [Cloudinary Node.js SDK](https://cloudinary.com/documentation/node_integration)
+- [Using Cloudinary with Astro (YouTube)](https://www.youtube.com/playlist?list=PL8dVGjLA2oMqnpf2tShn1exf5GkSWuu5-)
+- [Code Examples Using Cloudinary Astro SDK (GitHub)](https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/astro-cloudinary)