Cloudinary Image component for Next.js

Overview

     

Cloudinary Next.js Component

Get the best of Cloudinary in Next.js with the CldImage component!

🚨 EXPERIMENTAL: while this should be working pretty well, it's consider experimental, so use at your own risk!

This plugin is not officially supported by Cloudinary.

⚡️ Getting Started

Installation

  • Install next-cloudinary with:
yarn add next-cloudinary
# or
npm install next-cloudinary
  • Add an environment variable with your Cloud Name:
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
  • Import the CldImage component:
import { CldImage } from 'next-cloudinary';

Usage

The basic required props include width, height, and src:

<CldImage
  width="600"
  height="600"
  src="<Public ID>"
/>

You can further take advantage of Cloudinary features like background removal and overlays by adding additional props:

<CldImage
  width="600"
  height="600"
  src="<Public ID>"
  crop="thumb"
  gravity="faces"
  removeBackground
  tint="100:blue:green:red"
  underlays={[{
    publicId: '<Public ID>',
    width: 600,
    height: 600,
    crop: 'fill'
  }]}
/>

As CldImage is a wrapper around the Next.js Image component, all built-in Image component features will work out-of-the-box including the layout prop.

🛠 Configuration

General Props

Prop Name Type Example
crop string "thumb"
gravity string "faces"
overlays array See Below
removeBackground bool/string true
underlays array See Below
zoompan bool/string/object See Below

Effect Props

Prop Name Type Example
art string "al_dente"
autoBrightness bool/string true, "80"
autoColor bool/string true, "80"
autoContrast bool/string true, "80"
assistColorblind bool/string true, "20", "xray"
blackwhite bool/string true, "40"
blur bool/string true, "800"
blurFaces bool/string true, "800"
blurRegion bool/string true, "1000,h_425,w_550,x_600,y_400"
brightness bool/string true, "100"
brightnessHSB bool/string true, "100"
cartoonify bool/string true, "70:80"
colorize string "35,co_darkviolet"
contrast bool/string true, "100", "level_-70"
distort string "150:340:1500:10:1500:1550:50:1000", "arc:180.0"
fillLight bool/string true, "70:20"
gamma bool/string true, "100"
gradientFade bool/string true, "symmetric:10,x_0.2,y_0.4"
grayscale bool true
improve bool/string true, "50", "indoor"
negate bool true
oilPaint bool/string true, "40"
outline bool/string true, "40", "outer:15:200"
pixelate bool/string true, "20"
pixelateFaces bool/string true, "20"
pixelateRegion bool/string true, "35,h_425,w_550,x_600,y_400"
redeye bool/string true
replaceColor string "saddlebrown", "2F4F4F:20", "silver:55:89b8ed"
saturation bool/string true, "70"
sepia bool/string true, "50"
shadow bool/string true, "50,x_-15,y_15"
sharpen bool/string true, "100"
shear string "20.0:0.0"
simulateColorblind bool/string "deuteranopia"
tint bool/string true, "100:red:blue:yellow"
unsharpMask bool/string true, "500"
vectorize bool/string true, "3:0.5"
vibrance bool/string true, "70"
vignette bool/string true, "30"

View the Cloudinary docs to see learn more about using effects.

Background Removal

Removing backgrounds require enabling the Cloudinary AI Background Removal Add-On which includes a free tier for getting started.

Once enabled, you can simply apply the removeBackground parameter.

Example:

<CldImage
  ...
  removeBackground
/>

Overlays

The overlays prop is an array of objects with the following configuration options:

Property Name Type Example
effects array See Below
position object See Below
publicId string "thumb"
text object See Below

The position property can include:

Property Name Type Example
angle number 45
gravity string '"north_west"'
x number 10
y number 10

Objects in the effects array can include:

Property Name Type Example
aspectRatio string "3.0"
crop string 10
gravity string '"north_west"'
height number '600'
width number '600'

The text property can include:

Property Name Type Example
color string "blueviolet"
fontFamily string "Open Sans"
fontSize number 48
fontWeight string "bold"
letterSpacing number "14"
textDecoration string "underline"

Adding Images

You can add images on top of other images by using image-based overlays.

Example:

<CldImage
  ...
  overlays={[{
    publicId: '<Public ID>',
    position: {
      x: 10,
      y: 10,
      gravity: 'north_west',
    },
    effects: [
      {
        crop: 'fill',
        gravity: 'auto',
        width: 500,
        height: 500
      }
    ]
  }]}
/>

Adding Text

You can add text on top of your image with text-based overlays.

Example:

<CldImage
  ...
  overlays={[{
    width: 2670 - 20,
    crop: 'fit',
    position: {
      x: 10,
      y: 10,
      gravity: 'north_west',
    },
    text: {
      color: 'blueviolet',
      fontFamily: 'Source Sans Pro',
      fontSize: 120,
      fontWeight: 'bold',
      textDecoration: 'underline',
      letterSpacing: 14,
      text: 'Text'
    }
  }]}
/>

Underlays

Underlays function very similar to overlays in terms of options, however they do not support text.

See the examples above under Overlays to learn more about the available configurations.

Example:

<CldImage
  ...
  underlays={[{
    publicId: '<Public ID>',
    width: 1920,
    height: 1200,
    crop: 'fill'
  }]}
/>
You might also like...

Change the color of an image to a specific color you have in mind.

image-recolor Run it: https://image-recolor.vercel.app/ image.recolor.mov Acknowledgments Daniel Büchele for the algorithm: https://twitter.com/daniel

Mar 9, 2022

A refined tool for exploring open-source projects on GitHub with a file tree, rich Markdown and image previews, multi-pane multi-tab layouts and first-class support for Ink syntax highlighting.

A refined tool for exploring open-source projects on GitHub with a file tree, rich Markdown and image previews, multi-pane multi-tab layouts and first-class support for Ink syntax highlighting.

Ink codebase browser, "Kin" 🔍 The Ink codebase browser is a tool to explore open-source code on GitHub, especially my side projects written in the In

Sep 5, 2021

🤍 Custom gradient image generator

🤍 Custom gradient image generator

Gradient Gradient is a custom gradiant making web app. Use it here Features Custom Gradient Making Using Sliders And Color Picker Use Ready Made Gradi

Sep 10, 2021

generate a map server side and save/return it as png image

NFT map generator Request a new map to be generated with latitude and longitude params, for example http://localhost:3000/maps?lat=45.3579&lng=9.4427

Jul 12, 2022

Monolithic repo for api server, image server, web server

Onsecondary Market Deployed at https://market.onsecondary.com Monolithic repo for api server, image server, web server TODO -use a script to cull expi

Jan 11, 2022

A POC of a Discord.js bot that sends 3D rendering instructions to a Go server through gRPC which responds with the image bytes which are then sent back on Discord.

A POC of a Discord.js bot that sends 3D rendering instructions to a Go server through gRPC which responds with the image bytes which are then sent back on Discord.

Jan 8, 2022

Image addon for xterm.js

Image addon for xterm.js

xterm-addon-image Image output in xterm.js. ⚠️ This is an experimental addon, that is still under construction. ⚠️ Install from npm (not yet released)

Sep 9, 2022

🎇 Dynamic Image Generator as a Service

Dynapic is a tool for generating images with dynamic content. You can use it to generate headers or profile pictures for your Social Media profiles, O

Mar 17, 2022
Comments
Owner
Colby Fayock
Destructuring React & the Static Web
Colby Fayock
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 13 Jul 1, 2022
A Javascript library that discourages and prevents image theft/download by preventing client ability to retrieve the image.

ProtectImage.js ProtectImage.js is a Javascript library that helps prevent image theft by disabling traditional user interactions to download/copy ima

null 4 Aug 18, 2022
🖼️ An image select component for Streamlit

streamlit-image-select ??️ An image select component for Streamlit. This custom component works just like st.selectbox but with images. It's a great o

Johannes Rieke 7 Sep 22, 2022
This simple project, show how work with async Fetch, function component and class component

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

DaliyaAsel 2 Feb 17, 2022
dynamic-component-app is an angular application for dynamic component template creation

MyApp This project was generated with Angular CLI version 14.1.0. Development server Run ng serve for a dev server. Navigate to http://localhost:4200/

Aniket Muruskar 7 Aug 26, 2022
next-graphql-server is a library for building production-grade GraphQL servers using Next.js with API Routes

next-graphql-server next-graphql-server is an easy to use Next.js library for creating performant GraphQL endpoints on top of Next.js API Routes. Star

Jakub Neander 79 Aug 20, 2022
💻 A simple Create Next App template to start your projects with Next.js, TypeScript, ESLint, Prettier and other tools.

⚡ Next Typescript Template ⚡ A simple Create Next App template to start your projects with Next.js, TypeScript, ESLint, Prettier and other tools. Quic

João Gabriel 14 Aug 20, 2022
A fullstack next.js template with all the fun stuff like next auth, mongodb, prisma, chakra ui

Welcome to FullStack Next.js template ?? A fullstack next.js template with all the fun stuff like next auth, mongodb, prisma, chakra ui ✨ Demo Tech Ne

Avneesh Agarwal 7 Sep 15, 2022