How to Auto-Generate Custom Pinterest Images for Your Website Using Bannerbear
Already generating Open Graph images automatically? Now do the same for Pinterest — without building a separate template. Thanks to Bannerbear's adaptive sizing feature, you can reuse your existing OG image template and request a Pinterest-optimized size (1000×1500) directly through the API.
In this tutorial, you'll learn how to generate Pinterest Pin images automatically inside a Next.js generateMetadata function, so Pinterest picks up the perfect image every time — no manual resizing, cropping, or export needed.
What you'll learn:
• How adaptive templates work in Bannerbear and how to configure them
• How to get your template ID and API key
• How to implement a generatePinterestImagefunction in Next.js
• How to embed the generated image URL into Open Graph metadata for Pinterest
• How Pinterest automatically reads and uses the image when a URL is pinned
What you'll need:
• A Bannerbear account with an adaptive template
• A Next.js project with a generateMetadata function
• A Bannerbear API key
🔔 Subscribe for more Bannerbear and Next.js tutorials 💬 What would you use adaptive templates for? Let us know in the comments!
Video Transcription
[00:00:00] Hey, welcome back. In a previous tutorial, we showed you how to use Bannerbear to auto-generate dynamic open graph images for every blog post on your next.js site, pulling in the post title, author, and cover photo to produce a branded social card automatically. Today, we're going to do the same thing but for Pinterest pin images.
And with Bannerbear's new adaptive sizing feature, we don't need to build a separate design template. We can take an open graph image template that we already have and request a different size for Pinterest pin using the API. Let's get started. Before we jump into the editor, let me quickly explain what adaptive templates are.
Different from normal templates that generate images in only one
[00:01:00] size, adaptive templates let you assign rules that control how each layer repositions and resizes when you request a different size using the API. Here's a simple open graph image template. You can see it's a standard horizontal layout with a background image, a title, and an author name.
To make it render images in different sizes, you need to configure the adaptive settings for every layer. Let's start with the background image. Click on it and scroll down to the bottom of the right panel. You'll see the adaptive settings section with multiple controls. For this layer, we have the position and size set to scale and aspect ratio set to free.
This modifies the position and size by multiplying the original values by the canvas ratio when a
[00:02:00] different size is requested. You can see how each setting and value works here- And click on Open Adaptive Preview to see how it looks in different sizes. Configure the adaptive settings for other layers.
Then save the template and exit the editor. Now that the template is ready, we need its ID and an API key to call Bannerbear's API. The template ID can be found on the top right corner of your template page. As for the API key, head over to Developers, API keys, and create a new API key there. Copy and store both in your project's .env file or secret manager Now, let's wire this into a Next.js project.
We're going to generate the Pinterest image
[00:03:00] URL right inside the generateMetadata function. That way, the image is embedded directly to the page's Open Graph metadata, and Pinterest will automatically pick it up. In this page, .tsx file, we already have a generateMetadata function that defines and builds the metadata tags for our pages.
We're calling generatePinterestImage with the post title, author, and cover image to generate an image for Pinterest, and the image URL will be returned. Then, in the generateMetadata function's return object, we add a new entry to the openGraph.images array with the Pinterest image URL and width and height at one thousand and one
[00:04:00] thousand five hundred respectively.
Next.js will render it into the page's header as og:image meta tag, and Pinterest will automatically pick it up. Now, let's look at what the generatePinterestImage function is actually doing. It's an exported async function that takes title, author, and cover image as arguments, make a POST request to Bannerbear to generate an image in the specified dimension and data, and returns the URL of the generated image.
The best part about using Bannerbear to automatically generate a pin image and embed it in the metadata tag is you don't have to create a new pin image manually. Pinterest reads the metadata automatically, finds the image, and uses it as the pin.
[00:05:00] Let me show you what that actually looks like. Open the browser, navigate to the deployed Next.js blog post.
Here's the live blog post page. If we look at the page source, you can see the Open Graph image tags in the header that is Pinterest optimized at one thousand by one thousand five hundred. Now, let's go to Pinterest. When you create a new pin and paste in the blog post URL, Pinterest crawls the page and shows all the images it found, including our Pinterest optimized image in the metadata tag.
There's no need for resizing, cropping, or manual export. It's generated automatically
That's it. The new adaptive sizing feature changes how you can generate images programmatically, and
[00:06:00] it's not just for Pinterest. Every platform has its own dimensions, and adaptive templates let you serve all of them from a single design. And if you're building a SaaS product that generates images for your users, whether it's banners, reports, or personalized cards, you're not locked into one fixed size.
What would you use it for? Let us know in the comments, and I'll see you in the next one.
