v0.1.18

CHANGELOG.md

@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.17...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.18...HEAD)
 
 ### Added
 ### Changed
@@ -14,6 +14,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 ### Security
 
+## [0.1.18](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.17...v0.1.18) - 2024-03-14
+
+### Changed
+
+- Upgraded TNA Frontend to `v0.1.43`
+
+### Fixed
+
+- Base template now matches fixture of `layouts/_generic.njk` template from TNA Frontend
+
 ## [0.1.17](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.16...v0.1.17) - 2024-03-11
 
 ### Changed

README.md

@@ -52,6 +52,7 @@ We test each component against its published [component fixtures](https://github
 
 | TNA Frontend Jinja    | Compatible TNA Frontend versions           |
 | --------------------- | ------------------------------------------ |
+| `0.1.18`              | `v0.1.44`                                  |
 | `0.1.17`              | `v0.1.43`                                  |
 | `0.1.16`              | `v0.1.42`                                  |
 | `0.1.15`              | `v0.1.42`                                  |

package.json

@@ -3,7 +3,7 @@
     "prettier": "prettier --write '*.{mjs,json}'"
   },
   "dependencies": {
-    "@nationalarchives/frontend": "0.1.43",
+    "@nationalarchives/frontend": "0.1.44",
     "diff": "^5.1.0",
     "glob": "^10.2.7",
     "js-beautify": "^1.14.8",

setup.py

@@ -5,7 +5,7 @@
 
 setuptools.setup(
     name="tna-frontend-jinja",
-    version="0.1.17",
+    version="0.1.18",
     author="Andrew Hosgood",
     author_email="[email protected]",
     description="TNA Frontend Jinja templates",

test-fixtures.mjs

@@ -35,7 +35,7 @@ const components = globSync(`${fixturesDirectory}*/fixtures.json`)
       .replace(new RegExp(/\/fixtures.json$/), "");
     return {
       name,
-      testUrl: `${testEndpoint}${name}`,
+      testUrl: `${testEndpoint}components/${name}`,
       fixtures: [],
     };
   })
@@ -106,3 +106,51 @@ for (let i = 0; i < components.length; i++) {
     }
   }
 }
+
+
+
+const templatesDirectory = `${tnaFrontendDirectory}/nationalarchives/templates/`;
+  const { fixtures } = JSON.parse(
+    fs.readFileSync(`${templatesDirectory}fixtures.json`,
+      "utf8",
+    ),
+  );
+  const genericFixture = fixtures.find(fixture => fixture.name==="generic")
+const testUrl = `${testEndpoint}templates/base`
+console.log("\nTemplates");
+    const response = await fetch(testUrl)
+      .then((response) => {
+        if (response.status >= 400 && response.status < 600) {
+          fail(`${genericFixture.name}\n`);
+          throw new Error("Bad response from server");
+        }
+        return response;
+      })
+      .catch((e) => {
+        fail(`${genericFixture.name}\n`);
+        console.error(e, testUrl);
+      });
+    const body = await response.text();
+    const bodyPretty = standardiseHtml(body);
+    const fixturePretty = standardiseHtml(genericFixture.html);
+    const mismatch = bodyPretty !== fixturePretty;
+    if (mismatch) {
+      fail(`${genericFixture.name}\n`);
+      console.error(testUrl);
+      const diff = diffChars(bodyPretty, fixturePretty)
+        .map(
+          (part) =>
+            `${
+              part.added ? "\x1b[32m" : part.removed ? "\x1b[31m" : "\x1b[0m"
+            }${part.value === " " ? "█" : part.value}`,
+        )
+        .join("");
+      console.log(diff);
+      console.log("\n");
+      console.log("GREEN text shows expected content that wasn't rendered");
+      console.log("RED text shows rendered content that wasn't expected");
+      process.exitCode = 1;
+      throw new Error("Fixtures tests failed");
+    } else {
+      pass(genericFixture.name);
+    }

test/app/__init__.py

@@ -5,9 +5,9 @@ def create_app():
     app = Flask(__name__, template_folder="../../tna_frontend_jinja/templates")
 
     from .components import bp as components_bp
-    from .layouts import bp as layouts_bp
+    from .templates import bp as templates_bp
 
-    app.register_blueprint(components_bp)
-    app.register_blueprint(layouts_bp)
+    app.register_blueprint(components_bp, url_prefix="/components")
+    app.register_blueprint(templates_bp, url_prefix="/templates")
 
     return app

test/app/templates/__init__.py

@@ -0,0 +1,5 @@
+from flask import Blueprint
+
+bp = Blueprint("templates", __name__, template_folder="../templates")
+
+from test.app.templates import routes  # noqa: E402,F401

test/app/templates/routes.py

@@ -0,0 +1,11 @@
+import json
+from test.app.templates import bp
+
+from flask import render_template, request
+
+
+@bp.route("/base")
+def base():
+    params = request.args.get("params")
+    context = json.loads(params) if params else {}
+    return render_template("layouts/base.html", context=context)

tna_frontend_jinja/templates/components/card/macro.html

@@ -82,12 +82,7 @@
   {%- if params.actions %}
     <div class="tna-card__actions">
     {%- for item in params.actions %}
-      <a href="{{ item.href }}" class="tna-card__action{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-        {%- if item.brandIcon %}
-        <i class="fa-brands fa-fw fa-{{ item.brandIcon }}" aria-hidden="true"></i>
-        {%- elif item.icon %}
-        <i class="fa-solid fa-fw fa-{{ item.icon }}" aria-hidden="true"></i>
-        {%- endif %}
+      <a href="{{ item.href }}" class="tna-card__action{% if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}>
         {{ item.text }}
       </a>
     {%- endfor %}

tna_frontend_jinja/templates/components/footer/macro.html

@@ -23,7 +23,7 @@ <h2 class="tna-heading-m tna-footer__title">The National Archives</h2>
       {%- endif -%}
       {%- if params.social -%}
         <h3 class="tna-!--visually-hidden">Follow us</h3>
-        <nav class="tna-footer__social" role="navigation" aria-label="Social links">
+        <nav class="tna-footer__social" role="navigation" aria-label="Social">
           <menu class="tna-ul tna-ul--plain tna-footer__social-items">
           {%- for item in params.social -%}
             <li class="tna-footer__social-item">
@@ -42,6 +42,8 @@ <h3 class="tna-!--visually-hidden">Follow us</h3>
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
                 {%- elif item.icon == 'github' %}
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+                {%- elif item.icon == 'tiktok' %}
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"/></svg>
                 {%- endif %}
                 <span class="tna-footer__social-item-link-text tna-!--visually-hidden">
                   {{ item.title }}
@@ -93,7 +95,7 @@ <h3 class="tna-footer__navigation-block-heading tna-heading-m">
   </div>
   <div class="tna-container">
     {%- if params.legal -%}
-    <nav class="tna-footer__legal tna-column tna-column--full" role="navigation" aria-label="General site links">
+    <nav class="tna-footer__legal tna-column tna-column--full" role="navigation" aria-label="Legal">
       <menu class="tna-footer__legal-items tna-ul tna-ul--plain">
         {%- for item in params.legal -%}
         <li class="tna-footer__legal-item">

tna_frontend_jinja/templates/components/global-header/macro.html

@@ -37,7 +37,7 @@
       </button>
     </div>
     {%- if params.navigation %}
-    <nav class="tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper" id="{{ 'tna-header__navigation' or params.navigationId }}" aria-label="Main site navigation">
+    <nav class="tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper" id="{{ 'tna-header__navigation' or params.navigationId }}" aria-label="Primary">
       <menu class="tna-global-header__navigation">
         {%- for item in params.navigation %}
         <li class="tna-global-header__navigation-item">
@@ -48,7 +48,7 @@
     </nav>
     {%- endif %}
     {%- if params.topNavigation %}
-    <nav class="tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper" id="{{ 'tna-header__top-navigation' or params.topNavigationId }}" aria-label="Secondary site navigation">
+    <nav class="tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper" id="{{ 'tna-header__top-navigation' or params.topNavigationId }}" aria-label="Secondary">
       <menu class="tna-global-header__top-navigation">
         {%- for item in params.topNavigation %}
         <li class="tna-global-header__top-navigation-item">

tna_frontend_jinja/templates/components/header/macro.html

@@ -17,7 +17,7 @@
   {%- endif -%}
   <div class="tna-container tna-header__contents">
     <div class="tna-column tna-header__logo">
-      <{%- if params.logo.href -%}a href="{{ params.logo.href }}" class="tna-header__logo-link tna-header__logo-link--href" title="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}"{%- else -%}span class="tna-header__logo-link"{%- endif -%}>
+      <{%- if params.logo and params.logo.href -%}a href="{{ params.logo.href }}" class="tna-header__logo-link tna-header__logo-link--href" title="{%- if params.logo and params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo and params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}"{%- else -%}span class="tna-header__logo-link"{%- endif -%}>
         <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" style="enable-background:new 0 0 160 160" viewBox="0 0 160 160" width="96" height="96">
           <title>The National Archives</title>
           <path fill="transparent" d="M0 0h160v160H0z" class="tna-logo__background"/>
@@ -26,10 +26,10 @@
             <path d="M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z"/>
           </g>
         </svg>
-        {%- if params.logo.strapline -%}
+        {%- if params.logo and params.logo.strapline -%}
         <span class="tna-header__logo-strapline">{{ params.logo.strapline }}</span>
         {%- endif -%}
-      </{%- if params.logo.href -%}a{%- else -%}span{%- endif -%}>
+      </{%- if params.logo and params.logo.href -%}a{%- else -%}span{%- endif -%}>
     </div>
     {%- if params.navigation or params.topNavigation -%}
     <div class="tna-column tna-header__navigation-toggle">
@@ -38,7 +38,7 @@
         <span class="tna-header__hamburger"></span>
       </button>
     </div>
-    <nav class="tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-header__navigation" id="{{ 'tna-header__navigation' or params.navigationId }}" aria-label="Main site navigation">
+    <nav class="tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-header__navigation" id="{{ 'tna-header__navigation' or params.navigationId }}" aria-label="Primary">
       {%- if params.navigation -%}
       <menu class="tna-header__navigation-items">
         {%- for item in params.navigation -%}

tna_frontend_jinja/templates/components/index-grid/macro.html

@@ -48,16 +48,17 @@
     {%- for item in params['items'] -%}
     <li class="{{ ' '.join(itemClasses) }}">
       <a href="{{ item.href }}" class="tna-index-grid__item" title="{{ item.title }}">
-        <img src="{{ item.src }}" class="tna-index-grid__item-image" width="{{ item.width }}" height="{{ item.height }}" alt="{{ item.alt }}" />
+        <img src="{{ item.src }}" class="tna-index-grid__item-image" width="{{ item.width }}" height="{{ item.height }}" alt="{{ item.alt }}">
         <span class="tna-index-grid__item-content">
           <span class="tna-index-grid__item-title">{{ item.title }}</span>
           {%- if item.label -%}
           <span class="tna-chip tna-index-grid__item-label">{{ item.label }}<span class="tna-!--visually-hidden">:</span></span>
           {%- endif -%}
-          {%- if item.subtitle -%}
+          {%- if item.subtitle %}
           <br>
-          <span class="tna-index-grid__item-subtitle">{{ item.subtitle }}</span>
-          {%- endif -%}
+          <span class="tna-index-grid__item-subtitle">
+            <span class="tna-visually-hidden">(</span>{{ item.subtitle }}<span class="tna-visually-hidden">)</span></span>
+          {%- endif %}
         </span>
       </a>
     </li>

tna_frontend_jinja/templates/components/pagination/macro.html

@@ -5,7 +5,7 @@
 {%- if params.spaced -%}
   {%- set containerClasses = containerClasses + ['tna-pagination--spaced'] -%}
 {%- endif -%}
-<nav class="tna-pagination {{ ' '.join(containerClasses) }}" role="navigation" aria-label="{{ params.landmarkLabel if params.landmarkLabel else 'Pagination' }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+<nav class="tna-pagination {{ ' '.join(containerClasses) }}" aria-label="{{ params.landmarkLabel if params.landmarkLabel else 'Pagination' }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
   {% if params.previous -%}
   <div class="tna-pagination__prev">
     {{ tnaButton({

tna_frontend_jinja/templates/components/sensitive-image/macro.html

@@ -5,7 +5,7 @@
   <details class="tna-sensitive-image__details">
     <summary class="tna-sensitive-image__show" data-action="{{ params.action }}">{{ params.action }}</summary>
     <div class="tna-sensitive-image__container">
-      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-sensitive-image__image" />
+      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-sensitive-image__image">
     </div>
   </details>
 </div>