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

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

The question is, of course, how can we obtain the image data? There are various ways that we can utilise. For this project, a serverless function was deployed to Vercel which uses the Cloudinary Search API to return 20 images from a pre-defined folder. Calling this API returns resource JSON objects from Cloudinary which contains all the data that we need.

Image Gallery React

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

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

This post discusses how to lazy-load videos on Gatsby.js pages for improved web performance.

 Lazy-loading Videos in Gatsby.js Pages

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

Video Streaming the Jamstack way

In this media jam, we will see how to build an Image Gallery with Next.js using Cloudinary. We will also see how to use Adobe Photoshop Lightroom add-on with Cloudinary to transform the images.


How to use Lightroom with Next.js

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

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

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.

How To Convert Video to GIF in Next.js

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 

How to change SVG color on interaction with LitElement

In this media jam series, we will build a clone of Product Hunt, a website to share and discover new products with Next.js. In addition, we will use Auth0 for authentication, Airtable for storing product data, and Cloudinary for storing product images.

How to build a Product Hunt Clone with Next.js - Part 2 of 2

An events poster generator using Next.js, Cloudinary & Faunadb as the database.

Automatic Poster Generator With Next.js & Faunadb

Learn to utilize a robust video uploader in a Gatsby.js application

Handling Robust Video Uploads in Gatsby.js

Learn how to build a responsive image carousel using the Next.js  and Cloudinary.

Animating Next.js Images With Framer Motion 

You can create your own custom video slideshows with images you already have quickly using Cloudinary. In this article, we'll set up a few different slideshows showing you how to create your own videos.

Video Slideshow Generation with Cloudinary

Learn how to optimize and transform videos using the Cloudinary video player.

Utilizing Product Videos in Gatsby.js Commerce

Serverless Image Storage & Manipulation Using React, Airtable and Netlify functions


Serverless Image Storage & Manipulation

How to build a Product Hunt Clone with Next.js - Part 1 of 2

According to Stack Overflow 2020 survey, Vue.js was one of the Most Loved Web frameworks of the developers. In this media jam, we will see how to upload an image to Cloudinary with a drag and drop operation.

How to Upload Images in Vue.js with Drag N Drop

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

The Automatic Image Optimization in Next.js allows for resizing, optimizing, and serving images in modern formats. This avoids shipping large images to devices with a smaller viewport. By setting up a next.js config file one time with a cloud provider, you can can ensure that this happens by default, and that you get all of the benefits without all of the pain of loading multiple image source sets.

Options For Next.js Image Providers

How to add a YouTube Video Player in Angular

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

Sometimes you need to handle and manage images linked to information that is stored in the database of your web application. We can improve and simplify both image management, and data storage, using two helpful products: Prisma and Cloudinary.

Upload and display images using Prisma

Handling image files in a JAMStack application can be tricky. You have to decide whether you want to upload them to your own database, use a third party, or store them in another way. This article will go over how you can upload images to a PostgreSQL database using the RedwoodJS JAMStack framework.

Handling image uploads with PostgreSQL in RedwoodJS

Learn to trigger UI interactions using Video events with videos from Cloudinary on a Next.js page

Video events trigger on a Next.js Page

In this Media Jam you will learn how to create a native web component that replaces the default YouTube iframe embed. 

Create a performant YouTube embed with a native web component

In this jam, we discussed how to use remote images from Cloudinary in a Gatsby project using gatsby-image and without the need for Grapql image queries.

Serving Remote Images in Gatsby.js using Gatsby-image w/o GraphQL

In this Media Jam, we learn how to build a Video Gallery using Next.js and Cloudinary. We also look at how to integrate the 'react-awesome-slider' library with your Video Gallery. 

How to build a Video Gallery with Next.js

Custom bumpers at the beginning of videos can create a consistent experience that makes your content feel more professional and branded. In this tutorial, we’ll learn how to use Cloudinary to insert a bumper into any video. Then, we'll display the generated video in a React component.


Add a Video Bumper with React & Cloudinary

In this jam, we discuss how to utilize optimized remote images in a Gatsby.js project while utilizing gatsby-image's performance benefits.

Serving Remote Optimized Images w/ gatsby-image

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

In this Media Jam, we will build an Image Gallery and use the Next.js Image component to optimize the images fetched from the Pexels API. 

This gallery will show the list of curated photos by the Pexels team and has a dynamic route to them. The users will also be able to search for images using this gallery.

Build an Image Gallery with Next.js

Use product Images to create a video slideshow 

Showcase Images In Video-slideshow using Next.js

In this Media Jam you will learn how to create a video player with custom controls and event handling in Vue.js.

Creating a Custom Video Player in Vue.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 Media Jam, we will discuss how to build an Image Gallery in Sapper with Cloudinary and upload images to Cloudinary with drag and drop operation.

How To Upload Images in Sapper With Drag and Drop

Track analytics on your video content on Gatsby.js sites using Google analytics on the Cloudinary video player

Capture Video Analytics in Gatsby.js Sites

Learn to autoplay a video when scrolled into view on a Next.js landing page

Autoplay a Video on a Next.js Landing page

In this jam, we discuss how to make a Gatsby.js app into a progressive web app and implement dark mode using Chakra-ui

Gatsby-image w/ PWA and Dark Mode Support 

How to set a favicon in your website in just 5 steps

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

MDX, the powerful authoring format that lets you write JSX content inside of your markdown content, is an amazing tool to deliver interactive experiences to your readers. 

There are a few problems that you can encounter when using Gatsby and MDX, however. For example, if you want to use Gatsby image preprocessing capabilities with a featured image from your `frontmatter`, you need to tap into the Gatsby build system through the `gatsby-node.js` file to retrieve the image and create the corresponding Node. But what if you want to use the filesystem routing API from Gatsby instead?


Learn Media

for apps

What are Media Jams?

Bite-size Tutorials

Run & Play Sandboxes

Authored by Experts

Tech Stack Mashups

Practical Use-Cases

Program with Media

Jam Authors

As a free member...

Featured Jams