Last updated: Aug-06-2025
OverviewThis video tutorial shows you how to extend your images to different aspect ratios, automatically filling in the extra space using generative AI.
Video tutorialYou can find the code from this tutorial in
GitHub.
Tutorial contentsThis tutorial presents the following topics. Click a timestamp to jump to that part of the video.
Introduction Display an image   0:47 Start off in the pages folder of your Next.js app, importingCldImage from next-cloudinary, and displaying an image from Cloudinary: Use generative fill on the image   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   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   3:10 You can use the same template on any image, giving you the ability to extend images automatically, and at scale. Keep learning If you like this, you might also like...
Â
Â
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!
âï¸Â  ErrorUnfortunately there's been an error sending your feedback.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4