feat: configure fallback social image (#95)

src/_includes/layouts/base.njk

@@ -19,7 +19,7 @@
       </div>
       {% if bannerImage %}
       <div class="banner__image">
-        <img src="{{ bannerImage }}" alt="{{ bannerImageAltText }}" />
+        <img src="{{ bannerImage }}" alt="{{ bannerImageAlt }}" />
       </div>
       {% endif %}
     </div>

src/_includes/partials/global/meta.njk

@@ -7,3 +7,5 @@
 <meta name="og:description" property="og:description" content="{{ metaExcerpt if metaExcerpt else site[lang].description }}">
 <meta property="og:title" content="{{ title }}">
 <meta property="og:url" content="{{ page.url }}">
+<meta property="og:image" content="{{ socialImage if socialImage else 'https://standards.inclusivedesign.ca/assets/images/social-' + lang + '.png' }}">
+<meta property="og:image:alt" content="{{ socialImageAlt if socialImageAlt else site[lang].title }}">

src/admin/config.yml

@@ -91,7 +91,22 @@ collections:
         }
       - {
           label: Banner Image Alt Text,
-          name: bannerImageAltText,
+          name: bannerImageAlt,
+          widget: string,
+          i18n: true,
+          required: false,
+        }
+      - {
+          label: "Social Image",
+          name: metaImage,
+          widget: image,
+          i18n: duplicate,
+          required: false,
+          hint: "This image should be 1200 by 630 pixels and will be used as a preview image when this page is shared on social media.",
+        }
+      - {
+          label: Social Image Alt Text,
+          name: socialImageAlt,
           widget: string,
           i18n: true,
           required: false,
@@ -145,6 +160,21 @@ collections:
           i18n: true,
           required: false,
         }
+      - {
+          label: "Social Image",
+          name: metaImage,
+          widget: image,
+          i18n: duplicate,
+          required: false,
+          hint: "This image should be 1200 by 630 pixels and will be used as a preview image when this page is shared on social media.",
+        }
+      - {
+          label: Social Image Alt Text,
+          name: socialImageAlt,
+          widget: string,
+          i18n: true,
+          required: false,
+        }
       - {
           label: "Description",
           name: desc,

src/collections/pages/en/index.md

@@ -3,7 +3,7 @@ title: Inclusive Standards
 order: 0
 hasBanner: true
 bannerImage: /assets/uploads/homeBanner.png
-bannerImageAltText: Three individuals with different needs are moving together
+bannerImageAlt: Three individuals with different needs are moving together
 bannerBgColor: indigo-700
 bannerTitle: '**Inclusive** Standards'
 bannerBody: Inclusive Standards is a project hub of the Inclusive Design Research Centre (IDRC). Here, we gather all our efforts related to inclusive standards development. Our work ranges from conducting research with the disability community to inform standards development, drafting seed standards, and actively participating in standards development committees.

src/collections/pages/fr/index.md

@@ -3,7 +3,7 @@ title: Normes inclusives
 order: 0
 hasBanner: true
 bannerImage: /assets/uploads/homeBanner.png
-bannerImageAltText: Three individuals with different needs are moving together
+bannerImageAlt: Trois personnes ayant des besoins différents se déplacent ensemble
 bannerBgColor: indigo-700
 bannerTitle: Normes **inclusives**
 bannerBody: Normes inclusives est un centre de projet du Centre de recherche sur la conception inclusive (IDRC). Ici, nous rassemblons tous nos efforts liés au développement de normes inclusives. Notre travail consiste à mener des recherches auprès de la communauté des personnes handicapées pour éclairer l’élaboration de normes, à rédiger des normes de base et à participer activement aux comités d’élaboration de normes.