Filtr asynchroniczny, który zwraca adres obrazka w szablonie.
Eleventy obsługuje filtry asynchroniczne, więc adres obrazka możesz pobrać wprost w szablonie. Wbudowany cache wtyczki `eleventy-fetch` sprawia, że przy kolejnym buildzie nie ruszasz API w ogóle.
.eleventy.js
const EleventyFetch = require('@11ty/eleventy-fetch');
module.exports = function (eleventyConfig) {
eleventyConfig.addAsyncFilter('ogImage', async (title, author) => {
const response = await EleventyFetch('https://imageapi.dev/v1/images?wait=true', {
duration: '1y', // same post = same image
type: 'json',
fetchOptions: {
method: 'POST',
headers: {
Authorization: `Bearer ${process.env.IMAGE_API_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
template: 'blog-og',
modifications: { title, author, site: 'yourblog.com' },
}),
},
});
return response.url;
});
};
// In the template:
// <meta property="og:image" content="{{ title | ogImage(author) }}">`eleventy-fetch` cache’uje po adresie URL, a nie po treści żądania. Przy metodzie POST dołóż tytuł do klucza cache (np. w parametrze zapytania), inaczej wszystkie wpisy dostaną ten sam obrazek.
Z ?wait=true czekasz na gotowy obrazek w tym samym połączeniu — zwykle około sekundy.
{
"id": "img_01m08s3ez1zcv28h335g9923bw",
"status": "completed",
"url": "https://cdn.imageapi.dev/renders/img_01m08s3ez1zcv28h335g9923bw.png",
"duration_ms": 912
}Sto obrazków miesięcznie za darmo, potem $9 za dwa tysiące. Ten sam wpis wyrenderowany drugi raz zwraca istniejący adres i nie zużywa limitu — więc przebudowanie strony nic nie kosztuje.