Programmable Media

AI generative fill in Next.js (video tutorial)

Last updated: Sep-12-2024

Overview

This video tutorial shows you how to extend your images to different aspect ratios, automatically filling in the extra space using generative AI.

Video tutorial


View the code
You can find the code from this tutorial in GitHub.

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

Jump to this spot in the video  0:00 See how easy it is to extend images with generative fill using the Cloudinary Next.js library.

Display an image

Jump to this spot in the video  0:47 Start off in the pages folder of your Next.js app, importing CldImage from next-cloudinary, and displaying an image from Cloudinary:

Use generative fill on the image

Jump to this spot in the video  1:01 To use generative fill on the image, add the fillBackground prop to the CldImage component and change the aspect ratio of the image, for example by swapping the width and height.

Create a banner with a text overlay

Jump to this spot in the video  2:05 To create a banner, leaving room for a text overlay on the right, you can extend an image to the right, keeping the original focal point on the left. To do this, add a custom object to the fillBackground property, setting gravity to west:

Reuse the template for any image

Jump to this spot in the video  3:10 You can use the same template on any image, giving you the ability to extend images automatically, and at scale.

Keep learning

Related topics

If you like this, you might also like...

Using the Next.js Image Component
Deliver images using the Next.js Image component
Optimize Videos in Next.js
Optimize delivery of videos in a Next.js app
Create Social Media Cards in Next.js
Dynamically create social media image cards using Next.js

 

Cloudinary Academy

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

 

✔️ Feedback sent!

Rate this page: