This post describes how to leverage Cloudinary's rich media transformation tools, which provide trimming functionality to adjust the length of product videos.

Create Video Playback for Product List Page

In this article, we'll build a responsive and optimized video playlist application using Next.js and Cloudinary.

Build a Responsive Video Playlist with Next.js 

In this post, we will go through the process of embedding a YouTube player in a React application using the react-youtube package. We will also look at some of the options for personalization. 

Embed a YouTube Player into a React App

In this article, we will build a QR code generator that encodes alphanumeric data representing social media links.

Generate QR Code for Social Media Profiles

In this tutorial, we will use Cloudinary's Imagga Auto Tagging add-on to add tags to images that have been uploaded to our Cloudinary store. Additionally, we will render the images in a gallery, providing a list of tags that the user can click to filter the rendered images.

Add Tags to Images before Upload with Imagga 

In this article, we’ll build a simple file-sharing application that allows users to upload files and generate custom download links that can then be shared.

Build a File-Sharing Application with Cloudinary

There are tons of cool APIs out there that give us access to all kinds of data. If you're into space things at all, you might be happy to know that NASA has APIs that let us work with some of their data. In this post, we'll see how you can make an asteroid map using one of these APIs.

Creating an Asteroid Map with a NASA API

This post demonstrates how Mirror API generates custom Bitmoji in a NextJS Application.

Generating Custom Bitmoji in Next.js

Learn how to personalize images on an event landing page in a Next.js application using Cloudinary and Uniform.

Personalize Images on Landing Page Using Next.js

When you're about to watch a YouTube video on a mobile device, at first, the video is on mute. Then you'd see a button at the top left corner for unmuting the video.

This article will walk you through implementing that feature using video events in Next.js.

Youtube-like "Click to Unmute" Feature in NextJS

Creating an SVG from scratch can be tricky, but in this tutorial, you will learn how to generate SVG images and code from any image.
You will implement Cloudinary’s vectorize effect to create the SVG image and take advantage of Nuxt’s APIs to upload, get, and convert your SVG images to code.

How to Upload and Convert Images To SVG in Nuxt.js

This article discusses 3 ways to add carousels to a svelte application. It implements the use of svelte-carousel, siema carousel, and svelte-transition.

How to Create a Carousel in 3 Ways in Svelte

Learn how to transform Word documents to images into a Next.js application using Cloudinary and Aspose.

Transform Documents into Images using Next.js APIs

In this article, we’ll learn how to use Gatsby Functions to make API calls and get a response in our Gatsby App.

Fetch and Update any Company Logo in Gatsby

Learn how to deliver composable commerce images in a Next.js application using Cloudinary, BigCommerce, and Uniform.

Composable Images with Cloudinary and BigCommerce

This post describes how to create an Avatar service, managing an image upload to Cloudinary.

Build a Gravatar Service in Next.js 

Accessibility is one of the most prominent concerns in modern web development. The need to optimise websites for screen readers and cater for the needs of the visually impaired cannot be overemphasized

Improve Image Accessibility with Cloudinary 

In this article, we will learn how to add videos in a Blitz app using Cloudinary's Shoppable Video and Video Player.

Create Shoppable Videos in Blitz.js

A watermark is a logo, text, or pattern intentionally put onto another image to prevent images from being copied or used without permission.

In this article, we will learn how to add watermarks to our images using Cloudinary in our Next.js apps.

Automatically Watermark an Image Gallery on Upload

Crafting excellent resumes for your different job interests can be a daunting task without some extra help or automation. And even then, how are you sure you’re doing the right thing. In this post, we’ll walk through the process of generating a stellar resume on-demand (PDF) with Cloudinary by supplying only the necessary details via a Next.js form.

Generate Resumes with Cloudinary & NextJS

XR stands for Extended Reality. WebXR Device API provides access to input and output capabilities commonly associated with Virtual Reality (VR) and Augmented Reality (AR) devices. It allows you develop and host VR and AR experiences on the web.
In this post, we will be learning about WebXR, how it works on the browser, and how to build our first VR application with React and WebXR.

An Introductory Guide to WebXR

Learn how to use the Dolby API to produce high-quality media by uploading video to Cloudinary, enhancing the audio on Dolby, and then re-uploading the enhanced video to Cloudindary.


Enhance Videos' Audio Quality in NuxtJS

Essentially, if you wanted to embed sound on a web page, or stream audio using the MediaStream API; the HTML5 audio tag could handle that. However, as technology keeps advancing and the demand for web browsers and applications to handle more complex functionalities, the audio tag is very limited. Hence, the Web Audio API.

Audio Streaming with Web Audio API and Cloudinary

[Remix](https://remix.run/) is the newest trending JavaScript framework in the ecosystem right now. It is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.

How to Upload Images to Cloudinary with Remix App

The MediaStream Recording API  makes it possible to capture data generated by a `[MediaStream](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream)` or `[HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement)` object for analysis, processing, or saving to disk.

Record Videos with MediaStream Recording API

The Media Sessions API provides a way to customize media notifications. Let’s imagine this scenario. You have multiple tabs opened with audio and videos playing on each of them and let’s say you want to pause the tab playing “N.Y State of Mind by Nas”, and you don’t want to go to that specific tab to pause the audio. You wished you had a way to control media playback right? That’s where Media Sessions API come in.

Modify Media Notifications with Media Sessions API

WebRTC (stands for Web Real Time Connection) is a technology that that allows you to create peer to peer connections using real time communications without needing a server. It supports video, voice, and generic data to be sent between peers, allowing developers to build powerful voice- and video-communication solutions. 

Stream Videos with WebRTC API and React

Learn how to send Slack messages via API when images are uploaded.

Send Slack Notifications After Media Upload

Accessibility is one of the most important parts of the modern web. Transcriptions allows us to deliver more accessible video content to the web as it caters to the challenges of a wide variety of users. In this post, we'll look at a few ways to add transcriptions to videos rendered in a Next.js application with Cloudinary video transcriptions.

Video Transcription Using Cloudinary

In this post, we'll learn how to zoom and rotate the image with React-image-zoom package, Cloudinary, and React.js.

Zoom and Rotate Image in ReactJS

In this article, we’ll discuss syntax, FormData API methods, usage, and some examples.

How the FormData Browser API works

In this article, we will take a look at the Cloudinary Node.js SDK and the various functions it provides us with to handle file uploads.

Media Uploads with Cloudinary’s Upload Functions

In this tutorial, we will be showing how to convert a video into an GIF with React.

Video to GIF Converter with React

Building a static media site filled with gallery images from Notion is a way to present to users dynamically generated images from the stored data in Notion and serve the data to the client-side of a Next.js application

Build a Static Page Media Site with the Notion API

In this guide, we’ll use lazy loading which is better and more friendly than using the conventional custom loading with hooks, and then we will use the user-friendly substitute for pagination, infinite scroll, to solve this challenge.

How to Implement Lazy Loading with Infinite Scroll

In this tutorial, we will solve that challenge by implementing a simple React app where users can select multiple images.

How to Upload Multiple Images at Once in React

Learn how to create an infinite scroll image gallery using the intersection observer web API.

Infinite scroll images with Intersection Observer

Learn how to create a concert ticket generator in Nuxt.Js Using Cloudinary images and transformations.

Create Custom Summer Concert Tickets in NuxtJS

In this tutorial, we will build the gallery management feature for an e-commerce web application. Using the application, you can upload images and videos of a product. Upon successful upload, you can view the items rendered using the Cloudinary product gallery widget

Interactive Product Gallery with Cloudinary

This tutorial will show you how to build a pannable image animation using Cloudinary

Pan-Able Image Gallery in Cloudinary and Next.js

Modern web and mobile applications allow users to upload images to be used for their profiles. Using Cloudinary we will upload, transform and optimize the image uploaded and return a profile image that is optimized and consistent throughout the web application.

 Automated Profile Avatar Creation with Laravel

The canvas element allows you to add more interactivity to your web pages because now you can control the graphics, images, and text dynamically with a scripting language. This article shows how drawn canvas can be manipulated to form a single video object.

Generate Video from JavaScript Canvas

In this post, we will build a simple app for trimming videos using ffmpeg.wasm, a WEBAssembly / JavaScript port of the popular FFmpeg library that allows us to use its rich media manipulation tools within the browser.

Create a Video Trimming App Using ffmpeg.wasm

Video optimization is essential in today’s media, as it helps reduce file sizes and loading times before reaching users’ devices. You don’t want a high bounce rate when users visit your platform if the video size is heavy and takes too much time to load.

Add Optimized Video to Documentation in VuePress

Physical events are often packed with several brand activation activities and photo booths are always a must. We can make our space exciting and engaging to our audience by creating a photo booth. The virtual photo booth will take user images apply cool effect transformations and display them in a gallery.

Creating a Virtual Photo Booth Gallery

In this post we will be building a contact form directory using React, Cloudinary tags and Chakra UI. 

Build a Contact Form Directory with User Avatars

JavaScript frameworks can be used to move a number of DOM elements, or any other HTML element) around the page according to some sort of pattern determined by a logical equation or function. In this article, we demonstrate how to implement such a function

Animate an Object Movement with HTML/CSS/JS

Create an E-Commerce Product Gallery in Remix

Product Packaging is the first thing a customer sees when looking at a product. In this article, we will use Cloudinary to create engaging and compelling product packaging embedded with QR codes that will provide additional product details.

Laravel Engaging Product Packaging QR Codes

In this post, we discussed how to build a photo gallery with infinite scroll implemented using the **react-infinite-scroll component** and Pixabay APIs in Remix.

Create Infinite Scroll Images in Remix

This article demonstrates how to generate user reviews from feedback forms triggered by video events in Next.js.

Feedback Form Trigger from Video Events in Next.js

This tutorial will explore how to create a secured upload component with Cloudinary, and enhance the power of serverless in your Jamstack application.

Building Serverless Upload For Images

Docusaurus is a static site generator that provides various features for creating and maintaining documentation.
In this article, you will learn how to spin up a Docusaurus project and add an optimized image to your documentation through Cloudinary.

Adding Optimized Images to Docs in Docusaurus

Open Graph images utilize metadata from websites to display the webpage content, where the site's URL is shared.

Manage Open Graph Images in Remix

One of the ways to present your work is to create a portfolio. In this article, we will create a PDF portfolio with your branding from photos you upload to Cloudinary with a specific tag for instance "Wedding".

Generate a Watermarked Multi-Paged PDF

In this post, we'll create a simple app that illustrates how to extract advanced facial attributes from an image, crop, and add an image overlay based on the extracted data.

Facial Attributes Detection Using Cloudinary

This post demonstrated how to manage image animations in Nuxt.js.

Manage Image Animations in NuxtJS

3 Ways to Implement a Carousel in Nextjs

How to Rearrange Gallery Images Using React DnD

In this post, we will build a demo application that shows how to use Cloudinary's Media Editor widget to perform image editing actions like cropping and resizing images, adding image and text overlay, e.t.c.

Add a Media Editor to Your Web App with Cloudinary

This post discusses how to censor images with Remix and Cloudinary AI

Censor Images in Remix Using AI

Learn how to detect and extract text from images using Cloudinary’s OCR add-on in NuxtJS

Handle Quick AI Text Detection in Image in NuxtJS

Manually transforming a large number of animated GIFs can be tasking and time-consuming. As a result, Cloudinary extends its image and video transformation prowess to work seamlessly with animated GIFs. In this article, we'll look at some of the animated GIFs transformation and optimization methods and build a basic Next.js application to see the effects and changes.

Transform Animated GIFs Using Cloudinary

Live events are a great way to pass information in real time. This article discusses how to simulate live events in Nuxt.

Simulate a Streaming Event in NuxtJS

This article will look at how to fetch, transform, and optimize hosted images in Nuxt.js using cloudinary

Optimize and Deliver Hosted Images in NuxtJS

In this article, we will explore how we can build a dynamic favicon with JavaScript.

 Build Dynamic Favicon with JavaScript

We're going to build an image carousel with Svelte to see how this framework is different from the other popular front-end JavaScript frameworks.

Implement an Image Carousel in Svelte

Slideshows are the perfect addition to your media collection. They make your social media content engaging, fun, and memorable and are great for business promotional purposes. In this article, we will create a video slideshow using Laravel and Cloudinary.

Video Slideshows with Cloudinary & Laravel

This is an article about using Next.js next/image component and Cloudinary as a custom loader to optimize images.

Optimize Images in a Next.js Using Custom Loaders

Resize an Image in React.js Using Cloudinary

Video moderation helps you share highly engaging and effective video content while protecting your brand, customers, and profits. We will create a simple automated video moderation platform that will help us filter out offensive videos.

Video Moderation with Cloudinary

In this article, we will look at how to save uploaded images into a PDF file, making it easier to share multiple images without spamming the recipient while taking up less memory. This feature can be used in an application that generates photo albums or brochures for users on the fly.

Convert Images to PDF Files with React-To-PDF

Learn how to automatically generate blog post OG images and thumbnails from Cloudinary by supplying the post title and description to a Netlify function.

Dynamic Blog Thumbnails with Netlify and Cloudinary

Learn how to use Cloudinary transformations to automatically generate conference tags on user registration

Auto Generate Conference Tags with Cloudinary

In this post, we'll go over a common form implementation in Next to make a cartoon avatar generator. You'll see one of the ways you can dynamically update a component based on users playing around with inputs.

Generate Cartoon Avatars in NextJS

You can do a lot of interesting animations in the browser and still have a performant app. There are plenty of libraries that help you handle this and we're going to look at one called anime.js.

Create a Fireworks Animation in React

In this article, we’ll explore the ways you can build a simple Cloudinary Watermark API using Laravel. The API will allow you to add a watermark to an image using Cloudinary's powerful transformational API. We’ll be using Laravel 8, and all of the code is available for reference on GitHub.

Watermarking Images using Laravel & Cloudinary

Learn how we were able to build an audio hub for Twitter spaces using Cloudinary and a host of other technologies.

Audio Platform for Managing Twitter Spaces

Images make up a large portion of the overall web traffic. On Instagram alone, over 95 million photos are shared daily. Delivery images in a fast and efficient way can improve the overall performance of a web application. In this article, we will cover some techniques that can be used with Cloudinary to make this seamless. We will demonstrate how one can use Cloudinary to speed up their web apps. At the end of this article, we will have a web application that loads faster retain more users, and provides a better user experience.


Laravel Image Optimization Using Cloudinary

Sometimes you might wonder what it's like to build an app without any frameworks. There aren't a lot of use cases for this these days, but the few that do come up are usually pretty complex and very performance-focused. That's why we're going to explore web components in this post.

Build an Image Library Using Web Components

Facial Recognition is one of AI’s front-runner apps. This article demonstrates how to javascript can be used to create an app capable of biometric authentication to identify well-known people.

Cloudinary Celebrity Detector

In this article, we will implement Cloudinary’s Content-Aware Crop API to automatically crop and scale our media files to perfectly fit any layout and device using PHP's Laravel framework.

Laravel Content Aware Media Crop Platform

Avatars create a digital representation of a user and are usually used in web profiles. Most of the time a user is required to upload an image and then used it as the profile. An example of this is Google Mail Services. When a user does not upload a profile image an avatar is generated using his/her initials. Are you curious about how this magic happens? Don’t worry I’ve got you covered.
In this article, we are going to explore how we can generate avatars based on user initials.

Generate Image Avatars with Initials in JavaScript

In this article, we'll take a look at the process of uploading images from a Next.js application to Cloudinary using Vercel's Serverless Functions.

Upload Images with Vercel Serverless Functions

Being able to create custom business cards on demand is something nice to have. You can update the information people walk away with so that they know exactly what the conversation was about. That's why we're going to generate custom business card QR codes so that we can do all of this in real-time and impress everyone with our tech skills.

Create a Business Card QR Code in React

There are numerous PDF readers, and applications accessible for free on the internet that can help you open and view PDF document files. But, to really make changes to a PDF, you need something more advanced. This article demonstrates a PDF converter tool to convert PDF to image and how Cloudinary can be vital to achieving such a process.

PDF to Image Conversion Using PHP

Screenshots let you capture exactly what you're seeing on your screen to share with others or reference later. This article will demonstrate how much can be achieved using PHP and also manipulate Cloudinary services with such a service

Capture Any Website Screenshot Using PHP

An animation timeline allows a user to create chronological order of movement and position of objects on a webpage. It's also simple since its build is similar to CSS animation and it supports both JavaScript and CSS play methods. Well, be able to caption any point of the animation for Cloudinary upload.

Timeline Animations Using Javascript

WebGL is an underlying technology for a lot of high-performance graphics and animations on the web. Probably the most famous library built on it is three.js. We're going to dive into the inner workings of WebGL just a bit to see what's happening under the hood.

Create 3D Models with WebGL

Image lazy loading is a method of identifying resources (images) as non-critical until they’re needed. For example, a page wouldn’t load an image if it is not in the user’s viewport. The image will get loaded only when a user scrolls to it. Lazy loading does not reduce the image quality but improves the page load time by rendering resources only when needed.

How to Lazy Load Images in Plain HTML

Images draw attention, trigger emotions, and improve the user experience of your website. Image compression involves the reduction of the size of your image so that it takes less space on the hard drive and for better search engine optimization when it comes to websites e.g., 2MB to 440kbs. The image still retains its physical properties. We are going to use React to compress our images.

Image Compression Using React.js

Animations are necessary to create models that are essential for research and study. We’ll use css and js framework to show an example of how a loader can be animated and captions uploaded where necessary. We design the loader components using css and animate them through Nextjs and animejs library.

CSS Loader Animation Effect

We'll see how to use the react-responsive-carousel package to add a responsive and customizable slider to a react app. We will create a simple image gallery and some customizations to it. 

Add a Responsive Image Carousel to Your React App

This article will show how to create a bar chart in NuxtJS

Create a Bar Chart in NuxtJS

In this article, we'll learn how to create a product review application with Next.js and Cloudinary's Upload widget.

Create Product Reviews with Images in Next.js

This article is a walkthrough of how to make images on your webpage responsive using only HTML. This can be done using the SRCSET and <picture> methods.

Create Responsive Images in Plain HTML

Encode Google Calendar Invites in Next.js

Creating a Video Thumbnail Previews in GatsbyJS

Create a Bar Chart in Next.js

When displaying video on your site, adding your logo to the video makes the content look branded and more polished. In this tutorial, we’ll look at how we can automatically add our logo to a video using Cloudinary, and display it in a React component.


Add a Branding Watermark to Video With React

Learn to simulate a live event using recorded video.

Build a Live Event Simulator with Recorded Video

This article shows how to create a screen recording software that turns screen output to video that is stored and retrievable from Cloudinary. The videos can be used to teach an application or to promote a product by demonstrating its features.

Discover Jams

Featured Tags

Set up an account to unlock more learning resources!

Latest Jams