Promoting your content on social media is an important part of the publishing process, but as anyone who has attempted to share their work online knows, social media is a black hole of content. It's really easy to publish, and then see your work lost in the endless stream of tweets and posts. But by sharing images or "Open Graph Images" for your content, you can stand out more!

Automatically Generate Social Sharing Images

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

A video streaming application that leverages Cloudinary for video and image manipulation and storage, Next.js and Airtables

Video Streaming the Jamstack way

There are many scenarios in which you want to present website screenshots in a neat manner. This can be when displaying your portfolio as a consultant or consulting company to when you want to show your company’s platform on a pitch deck. In this article, we review how we can achieve this in a Nuxt.Js app.

Website screenshot framing in Nuxt.Js

Converting video formats can be quite a difficult process requiring purchasing licensed software. In this tutorial, we review how we can convert a video into many common video formats without the additional cost or complexity. We will do this programmatically using Nuxt.Js enabling you to do this at scale.

Nuxtjs video format converter

In this Mediajam, we are going to see how we can use Chart.js to create visualization graphs from data and combine different visualizations into one image using Cloudinary.

Data visualization using Chart.js, and Next.js 

With virtual and physical events happening every weekend, the need to have interactive features such as dynamic tag generators has increased.
In this tutorial, we learn how we can generate virtual tags/badges dynamically. This tutorial is fully inspired by [Jamstack Conf](https://jamstackconf.com/badge/make/)'s badge maker. The resources and the designs are obtained from their website. Feel free to register as well ;-D

Virtual event badge using Cloudinary and Nuxt.js

Video subtitles provide a better viewing experience and also improve accessibility for persons with disabilities. Manually adding subtitles to videos, however, proves to be repetitive, boring, and a lot of work. Luckily, there’s a way we can automate this. In this tutorial, we’ll take a look at how to automatically add subtitles to videos using Google video intelligence, Cloudinary, and Next.js.

Subtitling videos using Google Video Intelligence

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

Build a Gravatar Service in Next.js - Image Upload

Have you ever watched one of those programming videos where the person's face is overlayed over their computer screen? That's made possible using green screens. They're widely used especially in the media and filming industries. Even though green screens are preferred more, you can achieve the same using any solid color. I won't go over why green is more suitable compared to say blue or some other color. There are tons of youtube videos explaining that. You can check out this video or this one. That said, even though the title of this tutorial focuses on green screens, you can do the same for any video with a contrasting solid background color. In this tutorial, we'll be using Cloudinary and SvelteKit. SvelteKit is to Svelte.js just as Next.js is to React.js or Nuxt.js to Vue.js.

Edit green screen videos using  Sveltekit

Media transformations have been at the edge of the new wave of social media apps. Allowing our users to do a lot with their images improves the user experience of our applications. Let us explore how we can enable our users to Cartoonify their images easily.

Cartoonifying images using Nuxt.Js

Trimming videos can be challenging especially if we want to do it programmatically. Using server-side tools can be too heavy for simple JAMStack applications. In this tutorial, we learn how we can trim videos easily programmatically.


Video trimming using Nuxt.Js

Getting profile images seems like a simple task until we realize that most users just have normal solo photos of themselves. This means that they are not just headshots and the user’s face can be anywhere in the image. We thus need a smart way to obtain the headshots from user uploads. Let us learn how we can build this into our applications.


Nuxtjs Profile Picture Generator

One of the best features of modern video streaming is adaptive streaming. The video automatically adjusts quality based on the quality of your network connection. Let us learn how we can implement this in our own applications.

Adaptive bitrate video streaming using Nuxt.Js

Extracting the audio track from existing videos can be very useful. This is for example when we want to make our video playlists accessible on the go in audio format. Without any server-side code, let’s explore how we can easily get audio tracks from videos.

Nuxtjs Video To Audio Converter

When testing webpages, you may need to take a screenshot of that particular site programmatically. You can then use these screenshots to detect layout shifts, test different viewports, and more. In this brief tutorial, let's take a look at how we can achieve this using Puppeteer, Cloudinary) and Next.js.

Screenshot  websites using puppeteer, next.js 

Working with map data can lead to some interesting projects. Whether you want to pinpoint locations for users to visit or you want to show where equipment is located for a manufacturing company, maps can lead to unexpected insights. In this tutorial, we'll take a look some basics of working with a map.

Make A Custom Map App with Redwood

There are a lot of cool uses for blockchain. So let's take a look at what tracking videos might look like.

Making a User Interface for DApps

Create an instagram stories clone with a countdown using Next.js and remote images.

Build an Instagram Stories UI in Next.js

Build the familiar image zoom lens in ecommerce products using React image magnify and Next.js

Build a Product Image Zoom Lens in Next.js

Create a holiday card generator using Nuxt.js and Cloudinary

Create a holiday card generator in Nuxt.js

Most of the time the only media types that get attention in web development are videos and images. We're going to make a small app that will let users work with audio in the browser and make their own beats!

Building a Virtual Beat Box in Redwood

Getting started with blockchain and smart contract development can seem like a lot of new things to learn. When you start by building simple apps, it makes it easier to learn the core concepts. In this tutorial, we'll learn how to write smart contracts and a Dapp to handle user profiles using a few different tools.

Working with User Profiles on a Blockchain

Learning how to work with smart contracts using tech stacks that you already know is a great way to get started. As long as you're familiar with the concepts of front-end development and how API work, you can pick up the specifics of working with the blockchain. In this tutorial, we'll walk through making a distributed app that lets users pay for orders with one request to the blockchain.

Handling Orders using Web3 and Ethereum

This second part of a two-part post discusses how to apply transformations to an uploaded image, making it into an avatar.

Build a Gravatar Service in Next.js

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras est quam, fermentum sed varius vitae, consectetur sed nunc. Integer sed libero pellentesque, finibus arcu eget, interdum odio. Morbi in pretium dui, ut vehicula orci. Donec bibendum vulputate est sit amet scelerisque. Vestibulum ac rutrum metus. Integer placerat odio massa, finibus. 

Browser Compression


In this post, we will explore how to use some of the advanced features of the Cloudinary-React library to build and apply various transformations to our React image component.

Create a Responsive React Image Component

In this Mediajam, we will learn how to automatically generate promotional posters/discount posters for shops/supermarkets, etc using Cloudinary and Next.js


Generate promotional posters using Next.js

In this tutorial, we learn how we can easily and dynamically change the audio track on a video file. This is useful when rendering the same content to an audience of multiple languages


Audio track Changer with Nuxt.js

We need to consider accessibility when giving our users content at all times. In this tutorial, we learn how to automatically generate transcripts for our videos

Video Transcription In Nuxtjs

Video aspect ratio editor using Nuxt.Js

The [Jamstack Conference 2021](https://jamstackconf.com), is right around the corner. Those who wish to attend the virtual conference can generate an amazing-looking badge on the [website](https://jamstackconf.com/#/). I thought that this was super cool and wanted to make an attempt at it using [Cloudinary's](https://cloudinary.com/?ap=em) chained transformations and [Next.js](https://nextjs.org/).

Virtual event badge using Cloudinary and Next.js

VR is a relatively new area of tech and now's a good time to learn about how to make AR apps with JavaScript. This tutorial will take you through everything you need to get started with VR in Redwood.

Creating a VR App with Redwood

When you're building components to use in an app, it helps to work with them in isolation. With Storybook, you can test and create components in isolation from the entire app. In this tutorial, we'll go over writing stories for components in Redwood.

Making Better Components With Storybook

Sometimes you need to display your images in a format that allows people to visualize what a product would look like when they purchase it. Creating 3D canvases out of images can help give your customers a better experience when considering buying things from you. In this article, you'll learn how to generate 3D canvases of any size using Cloudinary transformations.

Transforming Images in Cloudinary to 3D Canvases

Having a customizable media library can help you keep track of relevant content and manage settings around it. In this post, we'll create a media library that can be extended to cover a lot of different needs.

Making a Media Library with Redwood

Dashboards are a common part of many apps, but they are so complex with the amount of data they handle. We're going to use Redwood to make a user dashboard with a database, back-end, and front-end all connected.

Building a User Dashboard with Redwood

Making sure your users have a good video experience is important for any media-based product. In this tutorial, we'll create a quick full-stack custom video player using Redwood. We'll set up a Postgres database using Prisma, create a back-end with GraphQL, and finish the front-end with React.

How To Make A Custom Video Player in Redwood

Users expect to be able to see their data in a format that's easy for them to read. When you allow them to download custom reports as PDFs, it gives them something they can use to see their data quickly. In this tutorial, we'll make a new Redwood app that stores user data and generates reports for them.

Creating Custom User Reports with Redwood

You might end up working on a project with multiple users who want different layouts for their dashboards. Users typically like to have some level of customization over the applications they use and we're going to cover how to do that with Redwood.

Adding Custom Branding to a Redwood App

Going back to the drawing board is more fun when you're the one that made the board. In this tutorial, we'll use Redwood to make a drawing board that we can save the drawing of.

Building a Drawing Board with Redwood

This article will show how we can resize and crop images to the specified dimensions using different scaling and cropping methods Cloudinary provides.

Fix Mismatched Aspect Ratio with Cloudinary


In this article, we'll learn how to create an application that allows us to take pictures using a webcam and then use Cloudinary's image transformation features to add filters to our pictures.

React Selfie App with Cloudinary

In this jam, we'll look at how to upload images to Cloudinary using Netlify's serverless functions.

Upload Images to Cloudinary with Netlify Functions

Working with WebRTC has gained more use as we've all turned to online video calls. It's one of the things that's good to have in your toolbox as a JavaScript developer. In this tutorial, we'll make a quick photo booth to allow user's to take and store images from their camera.

Build A Virtual Photo Booth with Redwood

Everybody has at least one meme that they like, it's really hard not too. But what if you could make the next big meme? Or even better, the next big meme generation app? The entertainment could be endless. That's why we're making a meme generator in this tutorial!

Creating a Meme Generator with Redwood

E-commerce sites are popping up every day and maybe you might want to make one. In this tutorial, you'll learn how to make a basic shopping cart and checkout flow using Stripe. This can be extended to work with more complex functionality as you need.

 Building a Shopping Cart with Redwood

Feeding yourself as an adult is hard sometimes. There are times it's too hard to make a choice on what to eat because there are too many options. That's why we're going to make an app to pick a meal for us!

Making a Meal Picker with Redwood

In this Mediajam we will learn how to read text from cloudinary images using an open-source solution called Tesseract OCR. 


Extract text from images using tesseract.js

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.

Screen recorder with next js

Insert video Ads in between videos, store the videos in cloudinary, and offer the user a skip ad button while the Ad is playing.


Insert Ads in between videos  using Next.js

Learn how to use Google’s video intelligence to detect explicit content, then use cloudinary to store the videos and blur explicit video frames.

Blur explicit content in videos 

MDsveX is the answer from the Svelte world to the need of authoring rich media content using a powerful media like Markdown. This is a markdown pre-processor for Svelte components, this preprocessor allows you to use Svelte components in your markdown, or vice versa. It supports all Svelte syntax and almost all Markdown

Embed media components using MDX and SvelteKit

In this blog post, we learn how to use cloudinary to transform videos to boomerang style gifs


Convert Video to Boomerang Using Next.js

Sometimes you need to make custom graphics to show complex data. In this tutorial, you'll learn how to do that with D3js and then upload snapshots to Cloudinary!

Data Visualizations with D3.js and Redwood

Google Cloud’s Vision API allows us to derive insights from our images in the cloud. We will use this API to tag and classify our images in Nuxt.Js and Cloudinary.


Tag and classify images using Google's Vision API 

For any product manager or app developer, it is very easy to record the screen of your latest release. It is also very easy to record yourself as you walk through the application. It is however not easy to combine these two videos together let alone in a presentable manner.
In this tutorial, we demonstrate how to create a demo walkthrough generator for easy updates of your product walkthroughs.

Mobile app demo walkthrough generator

Implement product customizations as seen on e-commerce stores using Next.js

E-commerce Product Variant Customization in Next.js

Many organizations and groups are now building custom learning management systems, but many are designed for textual content. This article teaches how to build a simple video course platform using Nuxt.js, Cloudinary, and Forestry.io.


Building a video course platform with Nuxt.js

Extract prominent colors from cloudinary images and generate a color palette that can be used to style elements surrounding the image.


Image Color Palette Generator

Use google video intelligence to analyze cloudinary videos and draw boxes over any identified faces in the video.

Use face tracking to analyze videos and draw boxes

Upload and combine multiple video files to form one single stored and retrievable through Cloudinary's transformation API.

Combine multiple videos snippets into one video

Do you have an extensive wedding invite list and need an easy way to invite everyone? Are you an event organizer who regularly needs to send out invitations to your attendees? In this article, we review how we can dynamically create invitations and send them out in Nuxt.Js.

Wedding invitation app in Nuxt.Js and Nodemailer

In this tutorial, the first part of a 2-part series, learn how to handle audio and video uploads while building a video skit maker. 

Video Skit Maker in Next.js - Video and Audio Upload

In this tutorial, the second part of a 2-part series, learn how to handle video transformations while building a video skit maker. 

Video Skit Maker in Next.js - Video Transformations

Learn to replicate the CTA options shown at the end of youtube videos

Building a Youtube-Style Post-Video Overlay CTA

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

Build serverless upload with Cloudinary

Netflix uses optimized transitions to autoplay a movie when it's highlighted. Learn how to do this in React.js.

Creating Netflix Style Overlay Transitions

Learn to build a video blog in Next.js using Markdown and Cloudinary

Creating a Video Blog in Next.js

Boost e-commerce conversion using shoppable videos. Learn to utilize a shoppable video in Next.js

Using Shoppable Video in Next.js


In this Mediajam, we will learn how we can leverage Google's Dialogflow to analyze voice commands and use these commands to control video playback. We will look at how to create Dialogflow intents that translate to basic video commands such as play, pause, stop and seek video forwards or backward.

Control video playback with voice using Dialogflow

Whenever we need to deliver image content to our users, depending on business requirements and the user’s device configurations, we may need to switch formats. This is especially true for image/PDF formats. In this article, we review how we can easily achieve this.

Nuxt.js Image to Pdf Converter

Setup a Developer Blog with Social Images using SvelteKit

In this media jam, you will create a Discord Bot to send memes to the discord channel. You will select a random image from your Cloudinary account, add the meme or the text message by the user to it and send it to the discord channel.

How to build a Discord Meme Bot with Cloudinary

In this media jam, we will build a discord bot to send GIFs with Node.js.

How to build Discord GIF Bot with Nodejs

Every business always has a change in staff on an annual basis. Contacting the graphic designer for new designs and new cards is always a hustle. In this article, we review how we can develop a digital business card generator to remove the hustle from this process.


Digital business card generator using Nuxt.Js

In this Mediajam, we shall create an eCommerce sample application and add stripe integration to it. Once the transaction is successful an email containing the transaction receipt and the product images will be sent to a user's email as proof of purchase.  


Stripe-Cloudinary Transaction Receipts Generator

Hosting an event with cool merch? Running a printing business? In this article, we review how we can create a t-shirt design visualizer with some dynamic features such as color options.


Clothing design visualizer with Nuxt .Js

A meme generator is a video or image maker that allows you to add custom resizable text to images. In this Mediajam we shall build one using Next.js and Cloudinary.

Meme generator using Next.js Images and videos

In this Mediajam we will learn how to use Tagged Markers in navigating specific sections in videos using Cloudinary and the different addons they provide. We'll use the Next.js framework to build the application.

Navigating Real-Estate Videos With Tagged Markers 

In this Mediajam, we’ll explore a simple way to receive and display the tweets in real-time as they are sent using Pusher, Zapier, and Cloudinary.


Realtime tweets visualizer with Pusher and Zappier

Build an image gallery with remote optimized images sourced from Cloudinary in a Gatsby.js site.

Create an Image Gallery with Remote Images in Gatsby.js

Users like it when they have access to customization for their videos so it's important that we give them things that make their experience better.

Making User Generated Video Slideshows in Redwood with Cloudinary

How to upload images in Angular with a Drag & Drop component - Part II

How to serve responsive images more easily using Eleventy shortcodes and  Cloudinary.

Responsive Images using Eleventy Shortcodes

In this article, we will see how to create a web app that generates social images automatically. The service will generate HTML content dynamically, based on a request, generate a "snapshot" of the content, and return it to the requester as an image.

Automate Social Images with Next.js and Puppeteer

Generating thumbnails for a photo gallery can feel tedious if you have to do it all by hand. With Cloudinary, we can automatically generate thumbnails from our full-size images that focus in on faces. In this tutorial, we’ll learn how to automatically generate both full-sized and thumbnail images for a React-powered photo gallery.

Photo Gallery With Automatic Thumbnails Using React & Cloudinary

Signed Image Uploading to Cloudinary with Angular and NestJS

For added cohesion and professionalism in videos, adding transitions goes a long way. In this tutorial, we’ll first look at how Cloudinary allows us to concatenate two videos together with a custom transition between them. Then, we'll learn how to display it all together in a React component.

Add Custom Video Transitions with React

In this post, we discussed how to trigger a form display once a vidnce a video is done playing.la eois done yping

Feedback Form Trigger from Video Events in Gatsby.js

Navigating Videos With Auto Tagged Markers Using Next.js, Cloudinary, and Google's Video Intelligence Api

Navigating Videos With Googles Video Intelligence 

How to use virtual scrolling to load images in Angular

In this media jam, we will discuss how to build an ecommerce app in React using Airtable, Cloudinary, and Snipcart. 

We will use Airtable to store product data and use Cloudinary's Product Gallery to showcase different product images. In this tutorial, we will build an ecommerce site for a cake shop named Sweet Tooth and use various cakes as products.

How To Build an Ecommerce App With React

Learn to create a blog with Gatsby.js and interactive content including Video with MDX

Dynamic Video blogs with Gatsby.js and MDX

In this media jam, we will build a Gatsby Theme for an Image Gallery. The images will be stored and fetched from Cloudinary. We will conclude this jam by publishing our theme to the npm registry.

How to build a Gatsby Image Gallery Theme

This post discussed how to lazy-load videos in Next.js pages for improved web performance.

Lazy-load Videos in Next.js Pages

This article explains how to use Nuxt.js to lazy-load videos for better web performance.

lazy loading videos in nuxt.js

In this post, we explore how to transform image IDs in a blog post frontmatter into gatsby-image compatible fluid or fixed image objects.

Using Remote Image specified in a Blog Post’s Markdown Frontmatter

In this media jam, we will discuss how to build a Video to GIF converter in Next.js using Cloudinary. We will use Next.js API routes to upload the video to Cloudinary and then fetch the converted GIF. We will also see how to build a download button to download the GIF and a clear button to delete the video from Cloudinary.

Learn Media for Apps