{"pageProps":{"title":"Mudando o layout do template da imagem","description":"Vou ensinar como alterar o template das imagens geradas","thumbnailUrl":"https://blogdomat.vercel.app/api/thumbnail.png?title=Mudando o layout do template da imagem&icon=https://cdn.worldvectorlogo.com/logos/html5-2.svg","slug":"3-mudar-o-template-das-imagens","content":"

Alterar o template das imagens geradas

\n

Tendo em mente que a thumbnail é gerada a partir de uma página HTML/CSS, você precisa criar o design da página, como você desejar.

\n

src/pages/api/_lib/thumbTemplate.ts, esse é o arquivo que contém a página que gera a thumbnail.

\n

Primeiro acesse o arquivo src/pages/api/thumbnail.ts

\n
[...]\n# PRODUCTION\nconst file = await getScreenshot(html, isDev, 1200, 630)\n\nres.setHeader('Content-Type', 'image/png')\nres.setHeader(\n  'Cache-control',\n  'public, immutable, no-transform, s-maxage=31536000, max-age=31536000'\n)\n\nreturn res.end(file)\n\n# DEVELOPMENT\n# res.setHeader('Content-Type', 'text/html')\n# return res.end(html)\n[...]
\n

Você deverá alterar como o exemplo a seguir, isso fará que o acesso retorne o HTML e não a imagem.

\n
[...]\n// PRODUCTION\n//const file = await getScreenshot(html, isDev, 1200, 630)\n\n//res.setHeader('Content-Type', 'image/png')\n//res.setHeader(\n//  'Cache-control',\n//  'public, immutable, no-transform, s-maxage=31536000, max-age=31536000'\n//)\n\n//return res.end(file)\n\n// DEVELOPMENT\nres.setHeader('Content-Type', 'text/html')\nreturn res.end(html)\n[...]
\n

Execute o servidor usando o comando vercel dev.

\n

Agora acesse a url localhost:3000/api/thumbnail.png?title=exemplo de título

\n

Será retornado uma página HMTL.

\n

Faça as alterações necessárias, como cores as fontes, etc (necessário ter o conhecimento básico de HTML/CSS).\nLembre-se de alterar de volta para produção la no arquivo src/pages/api/thumbnail.ts

\n

Até mais!

\n"},"__N_SSG":true}