Add image thumbnail teks to head

This commit is contained in:
Cédric FAMIBELLE-PRONZOLA
2021-05-28 18:29:15 +02:00
parent 313ad6fe74
commit 427f629e5c
2 changed files with 23 additions and 7 deletions
+16 -6
View File
@@ -4,9 +4,13 @@ import Head from 'next/head'
import Navigasyon from './navigasyon'
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
export default function HeadLayout({
children,
imageUrl,
imageWidth,
imageHeight,
title,
tab,
slug
@@ -24,7 +28,7 @@ export default function HeadLayout({
<meta name='twitter:url' content={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
<meta name='twitter:title' content={`#OKi | ${title ? title : 'Organisation KA Internationale'}`} />
<meta name='twitter:description' content='Organisation KA Internationale' />
<meta name='twitter:image' content='https://o-k-i.net/logo-192x192.png' />
<meta name='twitter:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-192x192.png`}`} />
<meta name='twitter:creator' content='@oki_972' />
<meta name='twitter:site' content='@oki_972' />
<meta name='theme-color' content='#303030' />
@@ -39,12 +43,12 @@ export default function HeadLayout({
<meta property='og:title' content={`#OKi | ${title ? title : 'Organisation KA Internationale'}`} />
<meta property='og:description' content='#OKi (Organisation KA Internationale) a pour but de promouvoir les langues et les productions afro-diasporiques.' />
<meta property='og:locale' content='fr_FR' />
<meta property='og:image' content='http://o-k-i.net/logo-72x72.png' />
<meta property='og:image:secure_url' content='https://o-k-i.net/logo-72x72.png' />
<meta property='og:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-72x72.png`}`} />
<meta property='og:image:secure_url' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-72x72.png`}`} />
<meta property='og:image:type' content='image/png' />
<meta property='og:image:width' content='72' />
<meta property='og:image:height' content='72' />
<meta property='og:image:alt' content='Logo #OKi | Organisation KA Internationale' />
<meta property='og:image:width' content={imageWidth ? imageWidth : '72'} />
<meta property='og:image:height' content={imageHeight ? imageHeight : '72'} />
<meta property='og:image:alt' content={`${title && imageUrl ? title : '#OKi Logo'} | Organisation KA Internationale`} />
</Head>
<Navigasyon selectedTab={tab} />
{children}
@@ -54,12 +58,18 @@ export default function HeadLayout({
HeadLayout.propTypes = {
children: PropTypes.node.isRequired,
imageUrl: PropTypes.string,
imageWidth: PropTypes.number,
imageHeight: PropTypes.number,
title: PropTypes.string,
tab: PropTypes.number.isRequired,
slug: PropTypes.string
}
HeadLayout.defaultProps = {
imageUrl: null,
imageWidth: null,
imageHeight: null,
title: null,
slug: null
}
+7 -1
View File
@@ -11,9 +11,15 @@ const jwennAwtis = awtis => {
export default function SlugTeks({teks, anTeks, slug}) {
const awtis = anTeks.awtis.length === 1 ? anTeks.awtis[0].alias : jwennAwtis(anTeks.awtis)
const {kouveti} = anTeks
return (
<HeadLayout title={`${awtis} - ${anTeks.tit}`} tab={2} slug={`teks/${slug}`}>
<HeadLayout
imageWidth={kouveti ? kouveti.formats.thumbnail.width : null}
imageHeight={kouveti ? kouveti.formats.thumbnail.height : null}
imageUrl={kouveti ? kouveti.formats.thumbnail.url : null}
title={`${awtis} - ${anTeks.tit}`} tab={2} slug={`teks/${slug}`}
>
<TeksDrawer teks={teks} anTeks={anTeks} />
</HeadLayout>
)