Media
Posts
How to Generate Video Thumbnails On-the-Fly & Add Hover Preview Effects with Cloudinary
By Colby Fayock
Building engaging experiences on the web means building excitement and adding interactions with ways to delight your visitors. Thumbnails with hover effects are one way to help give sneak peaks for videos, but you need to have all of those assets for your video. How can we auto generate these effects on the fly with...
How to Create an Image Placeholder Service API with Cloudinary & Netlify Functions
Building the web is hard. The web revolves around content, but when building things, we might not have the content yet! To solve this, let’s build a custom image placeholder service with serverless APIs so we can carefully craft our experiences while waiting for our content to be delivered. What is an Image Placeholder Service?...
How to Generate BlurHash Placeholders with Cloudinary Custom Functions & Netlify
Images help create visual experiences, but loading that media can slow page loads due to high file sizes. Instead we can take advantage of placeholder images like BlurHashed images to still deliver a great experience while deferring the loading of the full source. We’ll see how we can add custom processing to Cloudinary using BlurHash...
How to Automatically Optimize Headless WordPress Images and Videos with the Cloudinary Plugin
Media optimization is a critical part of delivering performant apps, but when dealing with a headless CMS like WordPress, at what point do you integrate for a great developer experience? We can use the Cloudinary WordPress plugin to easily provide blanket optimization of any type of WordPress site, headless or not. Note: if you’re currently...
How to Add Webcam Photo Filters & Effects in React with Cloudinary
Apps like Instagram, Snapchat, and TikTok made adding fun filters to your photos easy. But what if you wanted filters in your own app? We can use Cloudinary with pre-built and custom filters on top of using existing device’s webcams to liven up the experience for our customers. What are photo filters? If you’ve used...
How to Automatically Tag & Categorize Images Using AI with Google Vision & Cloudinary
Images and video are a great way to create visual experiences, but when dealing with large amounts, it can be difficult to manage without tools to provide things like searchability. To help, we can use the power of AI, to categorize and label our media as we import them into our project with tools like...
How to Generate Personalized Social Media Cards for Landing Pages with Next.js & Cloudinary
You’ve likely seen conference websites or other apps that dynamically create images and social cards based on your registration. It’s a great way to personalize an experience for an individual, especially when sharing online. What’s behind the magic of the dynamic social cards and how can we build landing pages with our own dynamic images...
How to List & Display Cloudinary Image Resources in a Gallery with Next.js & React
There are variety of services that let us upload an image and see the result, but what if we want to view all of the images we’ve uploaded over time or provide a custom dashboard for managing those the images? Managing images on the web Whether you’re a developer uploading images for your website or...
How to Optimize Images on Netlify with the Cloudinary Build Plugin
Netlify makes building and deploying Jamstack apps super easy, but without additional tools, your images are going to get deployed “as is”, leaving lots of potential room for saving precious bytes. Instead, we can use the Cloudinary Netlify Plugin and get automatic optimization and modern formatting to make sure we’re delivering as great and lean...
How to Programmatically Upload Images to Cloudinary in React & Next.js
Image and asset managers like Cloudinary give you a lot of power in being able to automatically optimize and transform images, but when building an app, you can’t expect each user to upload manually in your dashboard. How can you share that power and give your visitors the ability to upload their own images from...