Skip to content
StudioCMS Docs
Main Site

@studiocms/cloudinary-image-service

v0.1.0-beta.23 GitHub npm Changelog

Introduction

Section titled “Introduction”

This plugin enables the Cloudinary Image Service for StudioCMS

Installation

Section titled “Installation”

  1. Install the package using the following command:

    Terminal window
    npm run studiocms add @studiocms/cloudinary-image-service

  2. Your StudioCMS config should now include @studiocms/cloudinary-image-service:

    studiocms.config.mjs
    import { 
    function defineStudioCMSConfig(config: StudioCMSOptions): {
        plugins?: StudioCMSPlugin[] | undefined;
        logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
        dbStartPage?: boolean | undefined;
        verbose?: boolean | undefined;
        componentRegistry?: Record<string, string> | undefined;
        locale?: {
            dateLocale?: string | undefined;
            dateTimeFormat?: Intl.DateTimeFormatOptions | undefined;
        } | undefined;
        features?: {
            sdk?: boolean | {
                cacheConfig?: boolean | {
                    lifetime?: string | undefined;
                } | undefined;
            } | undefined;
            robotsTXT?: boolean | RobotsConfig | undefined;
            injectQuickActionsMenu?: boolean | undefined;
            dashboardConfig?: {
                dashboardEnabled?: boolean | undefined;
                inject404Route?: boolean | undefined;
                faviconURL?: string | undefined;
                dashboardRouteOverride?: string | undefined;
                versionCheck?: boolean | undefined;
            } | undefined;
            authConfig?: {
                providers?: {
                    usernameAndPassword?: boolean | undefined;
                    usernameAndPasswordConfig?: {
                        allowUserRegistration?: boolean | undefined;
                    } | undefined;
                } | undefined;
                enabled?: boolean | undefined;
            } | undefined;
            developerConfig?: {
                demoMode?: false | {
                    password: string;
                    username: string;
                } | undefined;
            } | undefined;
            preferredImageService?: string ...
    A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
    

    StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
    

    Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
    @example 
    // studiocms.config.mjs
    import { defineStudioCMSConfig } from 'studiocms';
    

    export default defineStudioCMSConfig({
     dbStartPage: true,
     contentRenderer: 'marked',
     verbose: true,
     dateLocale: 'en-us',
     // ...Other Options
    })
    defineStudioCMSConfig     } from 'studiocms/config';
    import 
    function cloudinaryJS(): StudioCMSPlugin
    Cloudinary Image Service
    

    This plugin is used to generate Cloudinary URLs for images using @cloudinary/url-gen for StudioCMS.
    cloudinaryJS     from '@studiocms/cloudinary-image-service';
    

     export default 
    function defineStudioCMSConfig(config: StudioCMSOptions): {
        plugins?: StudioCMSPlugin[] | undefined;
        logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
        dbStartPage?: boolean | undefined;
        verbose?: boolean | undefined;
        componentRegistry?: Record<string, string> | undefined;
        locale?: {
            dateLocale?: string | undefined;
            dateTimeFormat?: Intl.DateTimeFormatOptions | undefined;
        } | undefined;
        features?: {
            sdk?: boolean | {
                cacheConfig?: boolean | {
                    lifetime?: string | undefined;
                } | undefined;
            } | undefined;
            robotsTXT?: boolean | RobotsConfig | undefined;
            injectQuickActionsMenu?: boolean | undefined;
            dashboardConfig?: {
                dashboardEnabled?: boolean | undefined;
                inject404Route?: boolean | undefined;
                faviconURL?: string | undefined;
                dashboardRouteOverride?: string | undefined;
                versionCheck?: boolean | undefined;
            } | undefined;
            authConfig?: {
                providers?: {
                    usernameAndPassword?: boolean | undefined;
                    usernameAndPasswordConfig?: {
                        allowUserRegistration?: boolean | undefined;
                    } | undefined;
                } | undefined;
                enabled?: boolean | undefined;
            } | undefined;
            developerConfig?: {
                demoMode?: false | {
                    password: string;
                    username: string;
                } | undefined;
            } | undefined;
            preferredImageService?: string ...
    A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
    

    StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
    

    Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
    @example 
    // studiocms.config.mjs
    import { defineStudioCMSConfig } from 'studiocms';
    

    export default defineStudioCMSConfig({
     dbStartPage: true,
     contentRenderer: 'marked',
     verbose: true,
     dateLocale: 'en-us',
     // ...Other Options
    })
    defineStudioCMSConfig    ({
       
    plugins?: StudioCMSPlugin[] | undefined
    plugins    : [
         
    function cloudinaryJS(): StudioCMSPlugin
    Cloudinary Image Service
    

    This plugin is used to generate Cloudinary URLs for images using @cloudinary/url-gen for StudioCMS.
    cloudinaryJS    (),
       ],
     });

  3. Set the required Environment Variables

    .env
    CMS_CLOUDINARY_CLOUDNAME="demo"

Usage

Section titled “Usage”

To enable the Image Service, you need to set the preferredImageService setting to 'cloudinary-js'.

studiocms.config.mjs
import { 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    plugins?: StudioCMSPlugin[] | undefined;
    logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
    dbStartPage?: boolean | undefined;
    verbose?: boolean | undefined;
    componentRegistry?: Record<string, string> | undefined;
    locale?: {
        dateLocale?: string | undefined;
        dateTimeFormat?: Intl.DateTimeFormatOptions | undefined;
    } | undefined;
    features?: {
        sdk?: boolean | {
            cacheConfig?: boolean | {
                lifetime?: string | undefined;
            } | undefined;
        } | undefined;
        robotsTXT?: boolean | RobotsConfig | undefined;
        injectQuickActionsMenu?: boolean | undefined;
        dashboardConfig?: {
            dashboardEnabled?: boolean | undefined;
            inject404Route?: boolean | undefined;
            faviconURL?: string | undefined;
            dashboardRouteOverride?: string | undefined;
            versionCheck?: boolean | undefined;
        } | undefined;
        authConfig?: {
            providers?: {
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string;
                username: string;
            } | undefined;
        } | undefined;
        preferredImageService?: string ...
A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.


StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.


Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
@example 
// studiocms.config.mjs
import { defineStudioCMSConfig } from 'studiocms';


export default defineStudioCMSConfig({
 dbStartPage: true,
 contentRenderer: 'marked',
 verbose: true,
 dateLocale: 'en-us',
 // ...Other Options
})
defineStudioCMSConfig } from 'studiocms/config';
import 
function cloudinaryJS(): StudioCMSPlugin
Cloudinary Image Service


This plugin is used to generate Cloudinary URLs for images using @cloudinary/url-gen for StudioCMS.
cloudinaryJS from '@studiocms/cloudinary-image-service';


export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    plugins?: StudioCMSPlugin[] | undefined;
    logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
    dbStartPage?: boolean | undefined;
    verbose?: boolean | undefined;
    componentRegistry?: Record<string, string> | undefined;
    locale?: {
        dateLocale?: string | undefined;
        dateTimeFormat?: Intl.DateTimeFormatOptions | undefined;
    } | undefined;
    features?: {
        sdk?: boolean | {
            cacheConfig?: boolean | {
                lifetime?: string | undefined;
            } | undefined;
        } | undefined;
        robotsTXT?: boolean | RobotsConfig | undefined;
        injectQuickActionsMenu?: boolean | undefined;
        dashboardConfig?: {
            dashboardEnabled?: boolean | undefined;
            inject404Route?: boolean | undefined;
            faviconURL?: string | undefined;
            dashboardRouteOverride?: string | undefined;
            versionCheck?: boolean | undefined;
        } | undefined;
        authConfig?: {
            providers?: {
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string;
                username: string;
            } | undefined;
        } | undefined;
        preferredImageService?: string ...
A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.


StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.


Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
@example 
// studiocms.config.mjs
import { defineStudioCMSConfig } from 'studiocms';


export default defineStudioCMSConfig({
 dbStartPage: true,
 contentRenderer: 'marked',
 verbose: true,
 dateLocale: 'en-us',
 // ...Other Options
})
defineStudioCMSConfig({
  
features?: {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    robotsTXT?: boolean | RobotsConfig | undefined;
    ... 4 more ...;
    preferredImageService?: string | undefined;
} | undefined
features: {
    
preferredImageService?: string | undefined
preferredImageService: 'cloudinary-js'
  },
  
plugins?: StudioCMSPlugin[] | undefined
plugins: [
    
function cloudinaryJS(): StudioCMSPlugin
Cloudinary Image Service


This plugin is used to generate Cloudinary URLs for images using @cloudinary/url-gen for StudioCMS.
cloudinaryJS(),
  ],
});