Refactor Open Graph image

.eleventy.js

@@ -15,7 +15,7 @@ module.exports = function (eleventyConfig) {
       shortcut: 'https://raw.githubusercontent.com/x-govuk/logo/main/images/x-govuk-favicon.ico',
       touch: 'https://raw.githubusercontent.com/x-govuk/logo/main/images/x-govuk-apple-touch-icon.png'
     },
-    ogImage: '/assets/opengraph-image.png',
+    opengraphImageUrl: 'https://x-govuk.github.io/govuk-eleventy-plugin/assets/opengraph-image.png',
     homeKey: 'GOV.UK Eleventy Plugin',
     parentSite: {
       url: 'https://x-govuk.github.io/#shared-projects',

docs/includes/front-matter-options.md

@@ -7,9 +7,9 @@ Use these options to customise the appearance, content and behaviour of any layo
 | **order** | number | Ranking of page in navigation. Lower numbers appear before pages with a higher number. |
 | **title** | string | Page title. |
 | **description** | string | Page description. |
-| **ogImage** | object | Open Graph image that appears on social media networks. |
-| **ogImage.src** | string | Path to Open Graph image. Can be a relative or absolute URL. |
-| **ogImage.alt** | string | Alternative text for Open Graph image. |
+| **opengraphImage** | object | Open Graph image that appears on social media networks. |
+| **opengraphImage.src** | string | Path to Open Graph image. Can be a relative or absolute URL. This value overrides `opengraphImageUrl` in plugin options. |
+| **opengraphImage.alt** | string | Alternative text for Open Graph image. |
 | **aside** | object | Small portion of content that is indirectly related to the main content. |
 | **aside.title** | string | Title for aside. |
 | **aside.content** | string | Content for aside. Accepts Markdown. |

docs/index.md

@@ -10,8 +10,6 @@ startButton:
   href: /get-started
 eleventyComputed:
   title: "{{ pkg.description }}"
-  ogImage:
-    alt: "{{ options.homeKey }}"
 ---
 <div class="govuk-grid-row">
 {% for item in collections["homepage"] %}

docs/layouts/post.md

@@ -91,4 +91,4 @@ In addition to the common front matter options, this layout also accepts the fol
 | **image.src** | string | Path to post image. |
 | **image.alt** | string | Alternative text for post image. |
 | **image.caption** | string | Caption shown below post image. |
-| **image.ogImage** | boolean | Whether image should also be used as the page’s Open Graph share image. |
+| **image.opengraphImage** | boolean | Whether image should also be used as the page’s Open Graph share image. |

docs/options.md

@@ -32,7 +32,7 @@ module.exports = function(eleventyConfig) {
 | **icons.mask** | string | Override the default GOV.UK SVG mask icon. | `false` |
 | **icons.shortcut** | string | Override the default GOV.UK favicon. | `false` |
 | **icons.touch** | string | Override the default GOV.UK touch icon. | `false` |
-| **ogImage** | string | Override the default GOV.UK Open Graph share image. | `false` |
+| **opengraphImageUrl** | string | URL for default Open Graph share image. | `false` |
 | **themeColour** | string | Browser theme colour. Must be a hex value. | `#0b0c0c` |
 | **headingPermalinks** | boolean | Add links to headings, making it easier to share sections of a page. | `false` |
 | **homeKey** | string | Label to use for first item in pagination and key to use when referring to the home page for [`eleventyNavigation.parent`](https://www.11ty.dev/docs/plugins/navigation/). | `'Home'` |

index.js

@@ -41,9 +41,6 @@ module.exports = function (eleventyConfig, pluginOptions = {}) {
   eleventyConfig.addPlugin(require('@11ty/eleventy-navigation'))
   eleventyConfig.addPlugin(require('@11ty/eleventy-plugin-rss'))
 
-  // Transforms
-  eleventyConfig.addTransform('replaceGovukOpenGraphImage', require('./lib/transforms/replace-govuk-open-graph-image.js')(options))
-
   // Events
   eleventyConfig.on('eleventy.after', async () => {
     require('./lib/events/generate-govuk-assets.js')(eleventyConfig, options)

layouts/base.njk

@@ -4,6 +4,10 @@
 {% set htmlClasses = "no-js" %}
 {% set themeColor = options.themeColour %}
 
+{# Only show default Open Graph image if document does not provide its own #}
+{% set opengraphImage = image if image.opengraphImage else opengraphImage %}
+{% set opengraphImageUrl = options.opengraphImageUrl if not opengraphImage %}
+
 {# Pagination #}
 {% set pageNumber = pagination.pageNumber + 1 %}
 {% set pageCount = pagination.pages | length %}
@@ -46,10 +50,9 @@
   <meta property="og:url" content="{{ options.url | url | absoluteUrl(options.url) }}">
   <meta property="og:title" content="{{ title }}">
   {% if description %}<meta property="og:description" name="description" content="{{ description | markdown("inline") | striptags(true) }}">{% endif %}
-  {% set ogImage = image if image.ogImage else ogImage %}
-  {% if ogImage %}<meta name="twitter:card" content="summary_large_image">{% endif %}
-  {% if ogImage.src %}<meta property="og:image" content="{{ ogImage.src | url | absoluteUrl(options.url) }}">{% endif %}
-  {% if ogImage.alt %}<meta property="og:image:alt" content="{{ ogImage.alt }}">{% endif %}
+  {% if opengraphImage %}<meta name="twitter:card" content="summary_large_image">{% endif %}
+  {% if opengraphImage.src %}<meta property="og:image" content="{{ opengraphImage.src | url | absoluteUrl(options.url) }}">{% endif %}
+  {% if opengraphImage.alt %}<meta property="og:image:alt" content="{{ opengraphImage.alt }}">{% endif %}
 {% endblock %}
 
 {% block pageTitle %}

package.json

@@ -48,7 +48,7 @@
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.1.1",
     "deepmerge": "^4.2.2",
-    "govuk-frontend": "^4.2.0",
+    "govuk-frontend": "^4.3.0",
     "govuk-prototype-components": "^0.6.0",
     "luxon": "^3.0.1",
     "markdown-it-abbr": "^1.0.4",