API
One of the coolest features, in our opinion, is the ability to link your opengraph images and dynamically change the destination based on the latest render data. When leveraging a clientside framework like React
, Vue.js
, Svelte
, or Ember.js
for compositing images you often need to wait for elements to finish loading. To support this, we provide an API via the __og
global variable to defer the render completion until you are absolutley ready. All renders are limited to a maximum of 5 seconds
before it will be timed out and the default image is returned.
Adding the __og
global variable requires you to push the ['ready']
helper or promise onto the stack telling the image renderer your content is ready for capture.
If you are not using the __og
global variable, the renderer will wait for all fonts and images on the page to load.
Promises
You can also use a promise to delay the render. Promises will be times out after 5 seconds and your default image will be returned.
window.__og = [
async () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
link: 'https://www.example.com?utm_source=',
clip: {
x: 0,
y: 0,
width: 1200,
height: 600,
},
metadata: {
id: 1,
name: 'Jill Gamer',
},
});
}, 1000);
});
};
];
Helpers
We’ve built in some common helpers to assist with your integration.
window.__og = [
['preload', 'fonts', 'https://images.unsplash.com/photo-1636333825251-d921e6ff88e4'],
['link', 'https://www.example.com?utm_source='],
['clip', 0, 0, 1200, 600],
['metadata', {
id: 1,
name: 'Jill Gamer'
}],
['ready'],
];
[‘ready’]
This is required (unless you are using a promise) to signal the the image renderer that your content is ready for capture.
[‘preload’, …args]
Arguments
- ‘fonts’ - Waits for all the fonts to load before rendering
image url
- Waits for the image to load before rendering
[‘clip’, x, y, width, height]
Allows you to return a clipped portion of the image. Clipping requires the Professional Plan.
[’link’, url]
Sets the url to redirect the user when using link.opengraphimage.com
[‘metadata’, data]
Sets the x-ogi-meta
header when “Send Metadata Header” is checked in your origin config.