With more and more success stories emerging daily, content creation has more than proven itself as a viable means of revenue generation. This is mainly due to YouTube’s vast viewership of 300 million daily active users (Q3 2021). A key factor in taking advantage of this audience is a captivating thumbnail that attracts the potential viewer’s attention. YouTube has the following recommendations regarding thumbnails.
An ideal thumbnail should:
- Have a resolution of 1280×720 (with a minimum width of 640 pixels).
- Be uploaded in image formats such as JPG, GIF, or PNG.
- Remain under the 2MB limit.
- Try to use a 16:9 aspect ratio as it’s the most used in YouTube players and previews.
In this article, we will take advantage of Cloudinary to automatically generate simple thumbnails that meet YouTube’s recommendations. By taking advantage of the Transformation URL API, we can specify a URL containing parameters that Cloudinary uses to perform on-the-fly transformations. This provides massive savings as we don’t have to write any code for image manipulation, yet we get a seamless experience that allows us to generate a compliant thumbnail in seconds. You will need a Cloudinary account for this tutorial. If you don’t already have one, create one here.
For UI components in our application, we will use antd while axios will be used to upload our videos to our Cloudinary store.
Our application will take the video title and an image for the thumbnail in a form. On form submission, the image will be uploaded to Cloudinary via an unsigned POST request. From the response, the application will retrieve the stored version and public ID with which it will build a URL and download the image returned by the URL.
Here is a link to the demo on CodeSandbox.
Create a new React app using the following command:
npx create-react-app youtube-thumbnail-generator
Next, add the project dependencies using the following command:
npm install antd @ant-design/icons axios
Code language: CSS (css)Next, we need to import the antd CSS. To do this, open src/App.css and edit its content to match the following:
@import '~antd/dist/antd.css';
Code language: CSS (css)Next, we need to create some environment variables to hold our Cloudinary details. For this tutorial, we will be sending images to Cloudinary via unsigned POST requests. To do this, we need our account cloud name and an unsigned upload preset. At the root of the project, create a new file called .env and add the following to it:
REACT_APP_CLOUD_NAME = 'ADD YOUR CLOUD NAME HERE'
REACT_APP_UPLOAD_PRESET = 'ADD YOUR UNSIGNED UPLOAD PRESET KEY HERE'
Code language: JavaScript (javascript)This will be used as a default when the project is set up on another system. To update your local environment, create a copy of the .env file using the following command:
cp .env .env.local
Code language: CSS (css)By default, this local file is added to .gitignore and mitigates the security risk of inadvertently exposing secret credentials to the public. You can update .env.local with your Cloudinary cloud name and the generated upload preset.
Create a new folder named utility in the project’s src directory. This folder will hold all the helper classes we need in our components. In the utility folder, create a file called cloudinaryConfig.js. This file will give access to the environment variables and prevent repeated process.env. calls throughout the project. Add the following to the cloudinaryConfig.js file:
export const cloudName = process.env.REACT_APP_CLOUD_NAME;
export const uploadPreset = process.env.REACT_APP_UPLOAD_PRESET;
Code language: JavaScript (javascript)We need to make two requests for this application – one to upload a new image to Cloudinary and the other to download the image from a URL our application will build. In the utility folder, create a new file named api.js and add the following code to it.
import axios from 'axios';
import { cloudName, uploadPreset } from './cloudinaryConfig';
export const uploadImage = ({ file, successCallback }) => {
const url = `https://api.cloudinary.com/v1_1/${cloudName}/image/upload`;
const data = new FormData();
data.append('file', file);
data.append('upload_preset', uploadPreset);
axios
.post(url, data, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((response) => successCallback(response.data));
};
export const downloadImage = (imageUrl) => {
fetch(imageUrl)
.then((response) => response.blob())
.then((blob) => {
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'youtube_thumbnail';
link.click();
});
};
Code language: JavaScript (javascript)The uploadVideo function takes a file and a callback function that will be executed when the request is handled successfully. The file and upload preset are passed in a formData request to Cloudinary. The provided success callback is used to trigger further action in the component once a successful response is received. In our case, this will be to download the image from a URL. The downloadImage function takes the image URL and downloads the image from the URL using the Fetch API. We exported both functions to be used in other parts of our application.
The last utility helper we need is to build an image URL with the relevant parameters for our image transformation. In the utility folder, create a new file named urlBuilder.js and add the following code to it:
import { cloudName } from './cloudinaryConfig';
const baseUrl = `https://res.cloudinary.com/${cloudName}/image/upload`;
const size = 'c_scale,w_1280,h_720,ar_16:9,e_sharpen';
const titleOverlay = (title) =>
`b_rgb:9994,co_white,l_text:Helvetica_100:${title}`;
const titleLocation = 'fl_layer_apply,g_south';
const format = 'jpg';
export const buildThumbnailUrl = ({ publicId, version, title }) =>
`${baseUrl}/${size}/${titleOverlay(
title
)}/${titleLocation}/v${version}/${publicId}.${format}`;
Code language: JavaScript (javascript)The default Cloudinary asset delivery URL has the following structure:
https://res.cloudinary.com/<cloud_name>/<asset_type>/<delivery_type>/<transformations>/<version>/<public_id_full_path>.<extension>
Since we’re dealing with images, <asset_type> is image and <delivery_type> is upload since we’re working with uploaded images. This is how the baseUrl is generated.
Next, we define the size transformation. Using c_scale, we scale the image to match the new height and width we specify instead of stretching in one direction. Additionally, we set the width and height using the w_ and h parameters accordingly. Finally, we use the e_ parameter to apply a sharpen effect on the image.
Next, we define the text overlay transformation. We want the video’s title to be on the image in our generated thumbnail. We start by adding a transparent background using the b_rgb parameter – the first three digits for the rgb specification of the color and the last digit for the alpha (transparency) value. Next, we specify the color of the text using the co_ parameter. Finally, we specify the font using the l_text parameter. For the font, we can either specify the name of any universally available font or a custom font set as the public ID of a raw, authenticated font in your account. You can get more details on custom fonts here.
To ensure that our title doesn’t exceed the width of the image (which will cause Cloudinary to stretch the image and add a white background to the extra space), we also scale the text overlay to have a relative width of 80% to the generated image.
Next, we specify the location of the text in the title location transformation by using the fl_layer_apply and [g_](https://cloudinary.com/documentation/transformation_reference#g_gravity) parameters. Finally, we specify the format. For this tutorial, we use jpg, but as we saw earlier, it could also be png or gif, and Cloudinary would still be able to provide the image in that format.
We put everything together in the buildThumbnailUrl function, which takes the public id and version of the asset along with the video’s title and returns a string corresponding to a Cloudinary transformation URL.
Before we create our components, let’s create a hook to provide helpful functionality for the form we will create.
In the src directory of the project, create a folder named hooks, and inside it, create a file called useFormHelper.js and add the following the following to it:
import { uploadImage, downloadImage } from '../utility/api';
import { buildThumbnailUrl } from '../utility/urlBuilder';
import { message } from 'antd';
const useFormHelper = ({ image, setIsUploading }) => {
const formItemLayout = {
labelCol: {
sm: { span: 4 },
},
wrapperCol: {
sm: { span: 18 },
},
};
const onFailedSubmission = (errorInfo) => {
console.log('Failed:', errorInfo);
};
const onFinish = (values) => {
if (image === null) {
message.error('You need to upload an image first');
} else {
setIsUploading(true);
uploadImage({
file: image,
successCallback: (data) => {
setIsUploading(false);
const { title } = values;
const { public_id: publicId, version } = data;
const url = buildThumbnailUrl({ publicId, version, title });
downloadImage(url);
},
});
}
};
return [formItemLayout, onFailedSubmission, onFinish];
};
export default useFormHelper;
Code language: JavaScript (javascript)Our hook takes two parameters – image and setIsUploading. When the form is submitted, these parameters are used to update the form UI and pass the uploaded image to Cloudinary.
The formItemLayout is an object which contains the size specifications for the label columns in the form to be created.
The onFailedSubmission function will be triggered if the validation of the submitted form fails. We log the errors to the console and display a warning message to the user.
The onFinish function is called when the form is submitted with valid data. If no image is selected, an error message is shown. If an image is selected, the image is uploaded to Cloudinary using the uploadImage function. If the request was handled successfully, we retrieve the public id and version from the response and pass them to the buildThumbnailUrl function along with the submitted image title. Finally, we use the downloadImage function to download the image from the URL.
In the src folder, create a new folder called components. In the src/components directory, create a new file called ImageSelector.js and add the following to it:
import { Button, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
const ImageSelector = ({ setImage }) => {
const props = {
name: 'file',
onRemove: () => {
setImage(null);
},
beforeUpload: (selectedImage) => {
setImage(selectedImage);
return false;
},
showUploadList: false,
maxCount: 1,
};
return (
<Upload {...props}>
<Button icon={<UploadOutlined />}>Select Image</Button>
</Upload>
);
};
export default ImageSelector;
Code language: JavaScript (javascript)The ImageSelector component takes one prop – setImage, a callback function that will be used to update the application state with the latest uploaded image by the user.
By returning false in the beforeUpload key of props, we disable the Upload component’s default behavior, which is to upload the selected file to a provided URL. We also restrict the maximum number of files to 1.
Update your src/App.js file to match the following:
import './App.css';
import { Button, Card, Col, Form, Input } from 'antd';
import { useState } from 'react';
import ImageSelector from './components/ImageSelector';
import useFormHelper from './hooks/useFormHelper';
function App() {
const [image, setImage] = useState(null);
const [isUploading, setIsUploading] = useState(false);
const [formItemLayout, onFailedSubmission, onFinish] = useFormHelper({
image,
setIsUploading,
});
return (
<div style={{ margin: '1%' }}>
<Card style={{ margin: 'auto', width: '50%' }}>
<Form
{...formItemLayout}
onFinish={onFinish}
onFinishFailed={onFailedSubmission}
autoComplete="off"
>
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
message: 'Please provide a title for the thumbnail',
},
]}
>
<Input />
</Form.Item>
<Col span={8} offset={9} style={{ marginBottom: '10px' }}>
<ImageSelector setImage={setImage} />
</Col>
<Form.Item wrapperCol={{ offset: 10, span: 16 }}>
<Button type="primary" htmlType="submit" loading={isUploading}>
Submit
</Button>
</Form.Item>
</Form>
</Card>
</div>
);
}
export default App;
Code language: JavaScript (javascript)In this component, we declared two state variables – one for the uploaded image and the other for whether or not the image is being uploaded. Next, we use our useFormHelper hook to get the functionality for the form, passing it the image value in state and the setIsUploading function, which updates the value of the isUploading state variable.
Next, we render the form, and it has a single field for the video’s title. The ImageSelector component is rendered to allow the user to select the thumbnail image. Once the form is filled and an image is selected, the image is uploaded to Cloudinary then a popup is shown, prompting the user to save the downloaded image.
Run your application using the following command:
npm start
By default, the application will be available at http://localhost:3000/. The final result will look like the gif shown below.
Find the complete project here on GitHub.
In this article, to use Cloudinary to generate thumbnails for YouTube videos. Additionally, we looked at how Cloudinary can be used to handle the upload and storage of media and the dynamic transformation and rendering of images in a developer-friendly manner. Finally, using antd, we generated a clean and intuitive user interface with minimal code and styling. Taking advantage of the benefits Cloudinary offers makes for optimized images generated in real-time without hassle.
Resources you may find helpful:
