Generating Social Media Cards
You can use Next Cloudinary to easily generate dynamic social media cards for your Next.js app.
Example
CldOgImage does not render an
<img>tag, meaning it can't be visually embedded on a page. The following examples make use of the<CldImage>tag to showcase what's possible.
import { getCldOgImageUrl } from 'next-cloudinary';
getCldOgImageUrl({
src: '<Your Public ID>',
overlays: [
{
publicId: '<Your Public ID>',
position: {
x: 0,
y: 0,
gravity: 'north_east',
},
effects: [
{
crop: 'fill',
gravity: 'auto',
width: '0.33',
height: '1.0'
}
],
flags: ['relative']
},
{
width: 700,
crop: 'fit',
text: {
color: 'black',
fontFamily: 'Source Sans Pro',
fontSize: 80,
fontWeight: 'bold',
text: '<Your Text>'
},
position: {
x: 50,
y: -50,
gravity: 'west',
},
},
{
width: 700,
crop: 'fit',
text: {
color: 'black',
fontFamily: 'Source Sans Pro',
fontSize: 40,
text: '<Your Text>'
},
position: {
x: 50,
y: 50,
gravity: 'west',
},
},
]
});