[SDPA-3087] Provide fallback images for social media. (#520)

* [SDPA-3087] Provide fallback images for social media. * Featured Image > Section Default > Primary Default > None. * [SDPA-3087] Hard-coded fallback image. * Provide fallback image in /img/ folder. * Fix issue with og:url not displaying a proper url.
dpc-sdp · Sep 6, 2019 · 7afa853 · 7afa853
1 parent e170516
commit 7afa853
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/examples/vic-gov-au/static/img/social-media-image.jpg b/examples/vic-gov-au/static/img/social-media-image.jpg
diff --git a/packages/ripple-nuxt-tide/lib/config/tide.config.js b/packages/ripple-nuxt-tide/lib/config/tide.config.js
@@ -4,6 +4,8 @@ const tideConfig = {
     sdpPageBase: [
       'field_node_site',
       'field_node_site.field_site_main_menu',
+      'field_node_site.field_site_og_image',
+      'field_node_site.field_site_og_image.field_media_image',
       'field_featured_image',
       'field_featured_image.field_media_image',
       'field_tags',

diff --git a/packages/ripple-nuxt-tide/lib/core/middleware.js b/packages/ripple-nuxt-tide/lib/core/middleware.js
@@ -326,12 +326,16 @@ export default async function (context, pageData) {
     // Set details.
     const title = pageData.tidePage.appMetatag.title || pageData.tidePage.appPageTitle || 'Page not found'
     const description = pageData.tidePage.appMetatag.description || pageData.tidePage.field_news_intro_text || pageData.tidePage.field_landing_page_intro_text || pageData.tidePage.field_page_intro_text || pageData.tidePage.field_landing_page_summary || ''
-    const url = context.store.state.absoluteUrl || ''
+    const url = context.store.state.tide.currentUrl || ''
+    const siteSection = pageData.tidePage.section && pageData.tidePage.field_node_site && pageData.tidePage.field_node_site.find(site => site.drupal_internal__tid === parseInt(pageData.tidePage.section, 10))
+
     // Set image.
-    const mediaImage = pageData.tidePage.field_featured_image ? pageData.tidePage.field_featured_image.field_media_image : null
-    const image = mediaImage ? mediaImage.url : ''
+    const featuredImage = pageData.tidePage.field_featured_image ? pageData.tidePage.field_featured_image.field_media_image : null
+    const sectionImage = siteSection.field_site_og_image ? siteSection.field_site_og_image.field_media_image : null
+    const primaryImage = pageData.tidePage.field_node_primary_site.field_site_og_image ? pageData.tidePage.field_node_primary_site.field_site_og_image.field_media_image : null
+    const mediaImage = (featuredImage || sectionImage || primaryImage || null)
+    const image = mediaImage ? mediaImage.url : `${context.store.state.tide.protocol + '//' + context.store.state.tide.host}/img/social-media-image.jpg`
     const imageAlt = mediaImage ? mediaImage.meta.alt : ''
-    const siteSection = pageData.tidePage.field_node_site && pageData.tidePage.field_node_site.find(site => site.drupal_internal__tid === parseInt(pageData.tidePage.section, 10))
 
     pageData.tidePage.head = {
       htmlAttrs: {