From 788f5bf285686c196ac8c263987d871686f11154 Mon Sep 17 00:00:00 2001
From: emeryro <emery.romain@gmail.com>
Date: Thu, 30 Mar 2023 08:04:09 +0200
Subject: [PATCH 1/6] use picture

---
 .../twig/components/page-header/README.md     | 10 +++--
 .../page-header/ec-page-header.story.js       |  4 +-
 .../page-header/eu-page-header.story.js       |  4 +-
 .../page-header/page-header.html.twig         | 42 +++++++++++++------
 .../page-header/page-header.test.js           | 14 +++++++
 src/specs/components/page-header/demo/data.js |  8 ++--
 6 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/src/implementations/twig/components/page-header/README.md b/src/implementations/twig/components/page-header/README.md
index 83b97601fc7..63e46da3b2c 100644
--- a/src/implementations/twig/components/page-header/README.md
+++ b/src/implementations/twig/components/page-header/README.md
@@ -12,9 +12,7 @@ npm install --save @ecl/twig-component-page-header
 - **"title"** (string) (default: '') Title of header
 - **"hide_title"** (boolean) (default: false) Hide the h1 title, for screen reader only
 - **"description"** (string) (default: '') Description of header
-- **"thumbnail"** (associative array) (default: {}) Thumbnail dipslayed alongside the description
-  - "alt" (string) Alternative text
-  - "src" (string) Image path
+- **"picture"** (associative array) (default: {}): Image for thumbnail, following ECL Picture structure
 - **"meta"** (array) (default: []) Meta of header
 - **"breadcrumb"** (associative array) (default: '') Predefined structure for the ECL Breadcrumb
 - **"background_image_url"** (string) (default: '') Background image url
@@ -23,6 +21,12 @@ npm install --save @ecl/twig-component-page-header
   - "name" (string) Attribute name, eg. 'data-test'
   - "value" (string) Attribute value, eg: 'data-test-1'
 
+Deprecated
+
+- **"thumbnail"** (associative array) (default: {}) Thumbnail dipslayed alongside the description
+  - "alt" (string) Alternative text
+  - "src" (string) Image path
+
 ### Example :
 
 <!-- prettier-ignore -->
diff --git a/src/implementations/twig/components/page-header/ec-page-header.story.js b/src/implementations/twig/components/page-header/ec-page-header.story.js
index 79282ef446f..6674bd6a26c 100644
--- a/src/implementations/twig/components/page-header/ec-page-header.story.js
+++ b/src/implementations/twig/components/page-header/ec-page-header.story.js
@@ -152,9 +152,9 @@ const prepareData = (data, args) => {
     });
   }
   if (!args.show_thumbnail) {
-    delete data.thumbnail;
+    delete data.picture;
   } else if (args.show_thumbnail && !data.show_thumbnail) {
-    data.thumbnail = demoContent.thumbnail;
+    data.picture = demoContent.picture;
   }
 
   data.title = args.title;
diff --git a/src/implementations/twig/components/page-header/eu-page-header.story.js b/src/implementations/twig/components/page-header/eu-page-header.story.js
index 4f518ad728a..0ca3dc0d50a 100644
--- a/src/implementations/twig/components/page-header/eu-page-header.story.js
+++ b/src/implementations/twig/components/page-header/eu-page-header.story.js
@@ -143,9 +143,9 @@ const prepareData = (data, args) => {
     data.breadcrumb = { ...demoBreadcrumbLongEC };
   }
   if (!args.show_thumbnail) {
-    delete data.thumbnail;
+    delete data.picture;
   } else if (args.show_thumbnail && !data.show_thumbnail) {
-    data.thumbnail = demoContent.thumbnail;
+    data.picture = demoContent.picture;
   }
 
   data.title = args.title;
diff --git a/src/implementations/twig/components/page-header/page-header.html.twig b/src/implementations/twig/components/page-header/page-header.html.twig
index 1bed54a23f6..c1f28ae53a3 100644
--- a/src/implementations/twig/components/page-header/page-header.html.twig
+++ b/src/implementations/twig/components/page-header/page-header.html.twig
@@ -5,11 +5,7 @@
     - "title" (string) (default: '') Title of header
     - "hide_title" (boolean) (default: false) Hide the h1 title, for screen reader only
     - "description" (string) (default: '') Description of header
-    - "thumbnail" (associative array) (default: {}) Thumbnail dipslayed alongside the description:
-      {
-        "alt" (string) Alternative text
-        "src" (string) Image path
-      }
+    - "picture" (associative array) (default: {}): Image for thumbnail, following ECL Picture structure
     - "meta" (array) (default: []) Meta of header
     - "breadcrumb" (associative array) (default: '') Predefined structure compatible with EC Breadcrumb
     - "background_image_url (string) (default: '') Background image url
@@ -22,15 +18,24 @@
           "value" (optional) (string)
         ...
       ],
+
+  Deprecated:
+    - "thumbnail" (associative array) (default: {}) Thumbnail dipslayed alongside the description:
+      {
+        "alt" (string) Alternative text
+        "src" (string) Image path
+      }
 #}
 
-{# variables #}
+{# Internal properties #}
+
 {% set _variant = variant|default('') %}
 {% set _title = title|default('') %}
 {% set _hide_title = hide_title|default(false) %}
 {% set _meta = meta|default([]) %}
 {% set _description = description|default('') %}
 {% set _thumbnail = thumbnail|default({}) %}
+{% set _picture = picture|default({}) %}
 {% set _breadcrumb = breadcrumb|default({}) %}
 {% set _css_class = 'ecl-page-header' %}
 {% set _background_image_url = background_image_url|default('') %}
@@ -65,6 +70,17 @@
   {% endfor %}
 {% endif %}
 
+{# Backward compatibility #}
+
+{% if _picture.img is empty and _thumbnail.src is not empty %}
+  {% set _picture = {
+    'img': {
+      'src': _thumbnail.src|default(''),
+      'alt': _thumbnail.alt|default('')
+    }
+  } %}
+{% endif %}
+
 {# Print the result #}
 
 <div class="{{ _css_class }}" {{ _extra_attributes|raw }}>
@@ -99,14 +115,14 @@
     {% endif %}
   {% endif %}
 
-  {% if _description is not empty or _thumbnail is not empty %}
+  {% if _description is not empty or _picture.img is not empty %}
     <div class="ecl-page-header__description-container">
-    {% if _thumbnail is not empty %}
-      <img 
-        class="ecl-page-header__description-thumbnail" 
-        src="{{ _thumbnail.src|default('') }}"
-        alt="{{ _thumbnail.alt|default('') }}"
-      />
+    {% if _picture.img is not empty %}
+      {% include '@ecl/picture/picture.html.twig' with {
+        picture: _picture,
+        extra_classes: "ecl-page-header__picture",
+        extra_image_classes: "ecl-page-header__description-thumbnail",
+      } only %}
     {% endif %}
     {% if _description is not empty %}
       <p class="ecl-page-header__description">{{ _description }}</p>
diff --git a/src/implementations/twig/components/page-header/page-header.test.js b/src/implementations/twig/components/page-header/page-header.test.js
index 8c89480e928..9533abb7dd8 100644
--- a/src/implementations/twig/components/page-header/page-header.test.js
+++ b/src/implementations/twig/components/page-header/page-header.test.js
@@ -61,4 +61,18 @@ describe('Page Header Standardised', () => {
       return expect(render(demoDefault)).resolves.toMatchSnapshot();
     });
   });
+
+  describe('with deprectated data', () => {
+    test('renders correctly', () => {
+      expect.assertions(1);
+
+      demoDefault.thumbnail = {
+        alt: 'Europe map',
+        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg',
+      };
+      demoDefault.picture = {};
+
+      return expect(render(demoDefault)).resolves.toMatchSnapshot();
+    });
+  });
 });
diff --git a/src/specs/components/page-header/demo/data.js b/src/specs/components/page-header/demo/data.js
index e61c90b9cff..a559166b93a 100644
--- a/src/specs/components/page-header/demo/data.js
+++ b/src/specs/components/page-header/demo/data.js
@@ -5,9 +5,11 @@ module.exports = {
   title: 'Page title',
   description: `Lorem ipsum dolor sit amet, <a href="${exampleLink}">consectetur adipiscing elit</a>. Quisque nec ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, <a class="ecl-link" href="${exampleLink}">eget dictum elit</a>. Vestibulum gravida tincidunt venenatis.`,
   meta: ['Meta info', 'DD Month YYYY'],
-  thumbnail: {
-    alt: 'Europe map',
-    src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg',
+  picture: {
+    img: {
+      src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg',
+      alt: 'Europe map',
+    },
   },
   background_image_url:
     'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg',

From 6bb7111945a1cf5bc21a5f47a98c718d5233e210 Mon Sep 17 00:00:00 2001
From: emeryro <emery.romain@gmail.com>
Date: Thu, 30 Mar 2023 08:17:28 +0200
Subject: [PATCH 2/6] update test

---
 .../__snapshots__/page-header.test.js.snap    | 253 ++++++++++++++++--
 1 file changed, 233 insertions(+), 20 deletions(-)

diff --git a/src/implementations/twig/components/page-header/__snapshots__/page-header.test.js.snap b/src/implementations/twig/components/page-header/__snapshots__/page-header.test.js.snap
index 977104abdcf..cc83abbbf6c 100644
--- a/src/implementations/twig/components/page-header/__snapshots__/page-header.test.js.snap
+++ b/src/implementations/twig/components/page-header/__snapshots__/page-header.test.js.snap
@@ -164,11 +164,15 @@ exports[`Page Header Standardised Background image - renders correctly 1`] = `
       <div
         class="ecl-page-header__description-container"
       >
-        <img
-          alt="Europe map"
-          class="ecl-page-header__description-thumbnail"
-          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
-        />
+        <picture
+          class="ecl-picture ecl-page-header__picture"
+        >
+          <img
+            alt="Europe map"
+            class="ecl-page-header__description-thumbnail"
+            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
+          />
+        </picture>
         <p
           class="ecl-page-header__description"
         >
@@ -352,11 +356,15 @@ exports[`Page Header Standardised Default - renders correctly 1`] = `
       <div
         class="ecl-page-header__description-container"
       >
-        <img
-          alt="Europe map"
-          class="ecl-page-header__description-thumbnail"
-          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
-        />
+        <picture
+          class="ecl-picture ecl-page-header__picture"
+        >
+          <img
+            alt="Europe map"
+            class="ecl-page-header__description-thumbnail"
+            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
+          />
+        </picture>
         <p
           class="ecl-page-header__description"
         >
@@ -542,11 +550,15 @@ exports[`Page Header Standardised Default renders correctly with extra attribute
       <div
         class="ecl-page-header__description-container"
       >
-        <img
-          alt="Europe map"
-          class="ecl-page-header__description-thumbnail"
-          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
-        />
+        <picture
+          class="ecl-picture ecl-page-header__picture"
+        >
+          <img
+            alt="Europe map"
+            class="ecl-page-header__description-thumbnail"
+            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
+          />
+        </picture>
         <p
           class="ecl-page-header__description"
         >
@@ -730,11 +742,212 @@ exports[`Page Header Standardised Default renders correctly with extra class nam
       <div
         class="ecl-page-header__description-container"
       >
-        <img
-          alt="Europe map"
-          class="ecl-page-header__description-thumbnail"
-          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
-        />
+        <picture
+          class="ecl-picture ecl-page-header__picture"
+        >
+          <img
+            alt="Europe map"
+            class="ecl-page-header__description-thumbnail"
+            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
+          />
+        </picture>
+        <p
+          class="ecl-page-header__description"
+        >
+          Lorem ipsum dolor sit amet, 
+          <a
+            href="/example"
+          >
+            consectetur adipiscing elit
+          </a>
+          . Quisque nec ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, 
+          <a
+            class="ecl-link"
+            href="/example"
+          >
+            eget dictum elit
+          </a>
+          . Vestibulum gravida tincidunt venenatis.
+        </p>
+      </div>
+    </div>
+  </div>
+</jest>
+`;
+
+exports[`Page Header Standardised with deprectated data renders correctly 1`] = `
+<jest>
+  <div
+    class="ecl-page-header ecl-page-header--image"
+  >
+    <div
+      aria-hidden="true"
+      class="ecl-page-header__background"
+      style="background-image: url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
+    />
+    <div
+      class="ecl-container"
+    >
+      <nav
+        aria-label="You are here:"
+        class="ecl-breadcrumb ecl-page-header__breadcrumb"
+        data-ecl-auto-init="Breadcrumb"
+        data-ecl-breadcrumb="true"
+      >
+        <ol
+          class="ecl-breadcrumb__container"
+        >
+          <li
+            class="ecl-breadcrumb__segment"
+            data-ecl-breadcrumb-item="static"
+          >
+            <a
+              class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link"
+              href="/example"
+            >
+              Home
+            </a>
+            <svg
+              aria-hidden="true"
+              class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
+              focusable="false"
+              role="presentation"
+            >
+              <use
+                xlink:href="/icons.svg#corner-arrow"
+              />
+            </svg>
+          </li>
+          <li
+            class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis"
+            data-ecl-breadcrumb-ellipsis=""
+          >
+            <button
+              aria-label="Click to expand"
+              class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis"
+              data-ecl-breadcrumb-ellipsis-button=""
+              type="button"
+            >
+              …
+            </button>
+            <svg
+              aria-hidden="true"
+              class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
+              focusable="false"
+              role="presentation"
+            >
+              <use
+                xlink:href="/icons.svg#corner-arrow"
+              />
+            </svg>
+          </li>
+          <li
+            class="ecl-breadcrumb__segment"
+            data-ecl-breadcrumb-item="expandable"
+          >
+            <a
+              class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link"
+              href="/example"
+            >
+              About the European Commission
+            </a>
+            <svg
+              aria-hidden="true"
+              class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
+              focusable="false"
+              role="presentation"
+            >
+              <use
+                xlink:href="/icons.svg#corner-arrow"
+              />
+            </svg>
+          </li>
+          <li
+            class="ecl-breadcrumb__segment"
+            data-ecl-breadcrumb-item="expandable"
+          >
+            <a
+              class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link"
+              href="/example"
+            >
+              Organisational structure
+            </a>
+            <svg
+              aria-hidden="true"
+              class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
+              focusable="false"
+              role="presentation"
+            >
+              <use
+                xlink:href="/icons.svg#corner-arrow"
+              />
+            </svg>
+          </li>
+          <li
+            class="ecl-breadcrumb__segment"
+            data-ecl-breadcrumb-item="static"
+          >
+            <a
+              class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link"
+              href="/example"
+            >
+              How the Commission is organised
+            </a>
+            <svg
+              aria-hidden="true"
+              class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb__icon"
+              focusable="false"
+              role="presentation"
+            >
+              <use
+                xlink:href="/icons.svg#corner-arrow"
+              />
+            </svg>
+          </li>
+          <li
+            aria-current="page"
+            class="ecl-breadcrumb__segment ecl-breadcrumb__current-page"
+            data-ecl-breadcrumb-item="static"
+          >
+            News
+          </li>
+        </ol>
+      </nav>
+      <div
+        class="ecl-page-header__meta"
+      >
+        <span
+          class="ecl-page-header__meta-item"
+        >
+          Meta info
+        </span>
+        <span
+          class="ecl-page-header__meta-item"
+        >
+          DD Month YYYY
+        </span>
+      </div>
+      <div
+        class="ecl-page-header__title-container"
+      >
+        <h1
+          class="ecl-page-header__title"
+        >
+          Page title
+        </h1>
+      </div>
+      <div
+        class="ecl-page-header__description-container"
+      >
+        <picture
+          class="ecl-picture ecl-page-header__picture"
+        >
+          <img
+            alt="Europe map"
+            class="ecl-page-header__description-thumbnail"
+            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
+          />
+        </picture>
         <p
           class="ecl-page-header__description"
         >

From ea00e2846e4863b68756ddcaeb743692b877d6ef Mon Sep 17 00:00:00 2001
From: emeryro <emery.romain@gmail.com>
Date: Thu, 30 Mar 2023 12:52:34 +0200
Subject: [PATCH 3/6] improve twig

---
 .../twig/components/page-header/page-header.html.twig        | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/implementations/twig/components/page-header/page-header.html.twig b/src/implementations/twig/components/page-header/page-header.html.twig
index c1f28ae53a3..04f511dd3a4 100644
--- a/src/implementations/twig/components/page-header/page-header.html.twig
+++ b/src/implementations/twig/components/page-header/page-header.html.twig
@@ -74,10 +74,7 @@
 
 {% if _picture.img is empty and _thumbnail.src is not empty %}
   {% set _picture = {
-    'img': {
-      'src': _thumbnail.src|default(''),
-      'alt': _thumbnail.alt|default('')
-    }
+    'img': _thumbnail,
   } %}
 {% endif %}
 

From 4b54b8a8a2d56446f9bbb8608aeb19983f654592 Mon Sep 17 00:00:00 2001
From: emeryro <emery.romain@gmail.com>
Date: Thu, 30 Mar 2023 15:15:37 +0200
Subject: [PATCH 4/6] background image

---
 .../twig/components/page-header/README.md     |  5 +-
 .../page-header/ec-page-header.story.js       | 52 +++++++++++-------
 .../page-header/eu-page-header.story.js       | 48 ++++++++++------
 .../page-header/page-header.html.twig         | 55 ++++++++++++-------
 .../page-header/page-header.test.js           |  5 +-
 .../page-header/page-header-ec.scss           | 13 +++--
 .../page-header/page-header-eu.scss           |  8 +--
 .../page-header/page-header-print.scss        |  6 ++
 src/specs/components/page-header/demo/data.js | 10 +++-
 9 files changed, 128 insertions(+), 74 deletions(-)

diff --git a/src/implementations/twig/components/page-header/README.md b/src/implementations/twig/components/page-header/README.md
index 63e46da3b2c..da69bcfed2a 100644
--- a/src/implementations/twig/components/page-header/README.md
+++ b/src/implementations/twig/components/page-header/README.md
@@ -12,10 +12,10 @@ npm install --save @ecl/twig-component-page-header
 - **"title"** (string) (default: '') Title of header
 - **"hide_title"** (boolean) (default: false) Hide the h1 title, for screen reader only
 - **"description"** (string) (default: '') Description of header
-- **"picture"** (associative array) (default: {}): Image for thumbnail, following ECL Picture structure
+- **"picture_thumbnail"** (associative array) (default: {}): Image for thumbnail, following ECL Picture structure
+- **"picture_background"** (associative array) (default: {}): Image for background, following ECL Picture structure
 - **"meta"** (array) (default: []) Meta of header
 - **"breadcrumb"** (associative array) (default: '') Predefined structure for the ECL Breadcrumb
-- **"background_image_url"** (string) (default: '') Background image url
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
 - **"extra_attributes"** (optional) (array) (default: []) Extra attributes
   - "name" (string) Attribute name, eg. 'data-test'
@@ -23,6 +23,7 @@ npm install --save @ecl/twig-component-page-header
 
 Deprecated
 
+- **"background_image_url"** (string) (default: '') Background image url
 - **"thumbnail"** (associative array) (default: {}) Thumbnail dipslayed alongside the description
   - "alt" (string) Alternative text
   - "src" (string) Image path
diff --git a/src/implementations/twig/components/page-header/ec-page-header.story.js b/src/implementations/twig/components/page-header/ec-page-header.story.js
index 6674bd6a26c..7818086cd59 100644
--- a/src/implementations/twig/components/page-header/ec-page-header.story.js
+++ b/src/implementations/twig/components/page-header/ec-page-header.story.js
@@ -35,8 +35,8 @@ const getArgs = (data) => {
   if (data.description) {
     args.description = data.description;
   }
-  if (data.background_image_url) {
-    args.background_image_url = data.background_image_url;
+  if (data.picture_background.img.src) {
+    args.background_image_url = data.picture_background.img.src;
   }
 
   return args;
@@ -112,7 +112,7 @@ const getArgTypes = (data) => {
     };
   }
 
-  if (data.background_image_url) {
+  if (data.picture_background.img.src) {
     argTypes.background_image_url = {
       name: 'background image',
       type: 'string',
@@ -125,7 +125,7 @@ const getArgTypes = (data) => {
     };
   }
 
-  if (data.background_image_url) {
+  if (data.picture_background.img.src) {
     argTypes.overlay = {
       name: 'image overlay',
       type: 'select',
@@ -143,35 +143,47 @@ const getArgTypes = (data) => {
 };
 
 const prepareData = (data, args) => {
+  const clone = JSON.parse(JSON.stringify(data));
+
   if (!args.show_breadcrumb) {
-    delete data.breadcrumb;
+    delete clone.breadcrumb;
   } else if (args.show_breadcrumb) {
-    data.breadcrumb = { ...demoBreadcrumbLongEC };
-    data.breadcrumb.links.forEach((item) => {
-      item.negative = data.variant === 'negative';
+    clone.breadcrumb = { ...demoBreadcrumbLongEC };
+    clone.breadcrumb.links.forEach((item) => {
+      item.negative = clone.variant === 'negative';
     });
   }
   if (!args.show_thumbnail) {
-    delete data.picture;
-  } else if (args.show_thumbnail && !data.show_thumbnail) {
-    data.picture = demoContent.picture;
+    delete clone.picture_thumbnail;
+  } else if (args.show_thumbnail && !clone.show_thumbnail) {
+    clone.picture_thumbnail = demoContent.picture_thumbnail;
   }
 
-  data.title = args.title;
-  data.hide_title = args.hide_title;
-  data.description = args.description;
-  data.meta = args.meta;
-  data.background_image_url = args.background_image_url;
+  clone.title = args.title;
+  clone.hide_title = args.hide_title;
+  clone.description = args.description;
+  clone.meta = args.meta;
+
+  if (args.background_image_url) {
+    clone.picture_background = {
+      img: {
+        src: args.background_image_url,
+        alt: clone.picture_background.img.alt || '',
+      },
+    };
+  } else {
+    clone.picture_background = {};
+  }
 
   if (args.overlay === 'none') {
-    delete data.overlay;
+    delete clone.overlay;
   } else {
-    data.overlay = args.overlay;
+    clone.overlay = args.overlay;
   }
 
-  correctPaths(data);
+  correctPaths(clone);
 
-  return data;
+  return clone;
 };
 
 export default {
diff --git a/src/implementations/twig/components/page-header/eu-page-header.story.js b/src/implementations/twig/components/page-header/eu-page-header.story.js
index 0ca3dc0d50a..7eb538fbb87 100644
--- a/src/implementations/twig/components/page-header/eu-page-header.story.js
+++ b/src/implementations/twig/components/page-header/eu-page-header.story.js
@@ -29,8 +29,8 @@ const getArgs = (data) => {
   if (data.description) {
     args.description = data.description;
   }
-  if (data.background_image_url) {
-    args.background_image_url = data.background_image_url;
+  if (data.picture_background.img.src) {
+    args.background_image_url = data.picture_background.img.src;
   }
 
   return args;
@@ -106,7 +106,7 @@ const getArgTypes = (data) => {
     };
   }
 
-  if (data.background_image_url) {
+  if (data.picture_background.img.src) {
     argTypes.background_image_url = {
       name: 'background image',
       type: 'string',
@@ -119,7 +119,7 @@ const getArgTypes = (data) => {
     };
   }
 
-  if (data.background_image_url) {
+  if (data.picture_background.img.src) {
     argTypes.overlay = {
       name: 'image overlay',
       type: 'select',
@@ -137,32 +137,44 @@ const getArgTypes = (data) => {
 };
 
 const prepareData = (data, args) => {
+  const clone = JSON.parse(JSON.stringify(data));
+
   if (!args.show_breadcrumb) {
-    delete data.breadcrumb;
+    delete clone.breadcrumb;
   } else if (args.show_breadcrumb) {
-    data.breadcrumb = { ...demoBreadcrumbLongEC };
+    clone.breadcrumb = { ...demoBreadcrumbLongEC };
   }
   if (!args.show_thumbnail) {
-    delete data.picture;
-  } else if (args.show_thumbnail && !data.show_thumbnail) {
-    data.picture = demoContent.picture;
+    delete clone.picture_thumbnail;
+  } else if (args.show_thumbnail && !clone.show_thumbnail) {
+    clone.picture_thumbnail = demoContent.picture_thumbnail;
   }
 
-  data.title = args.title;
-  data.hide_title = args.hide_title;
-  data.description = args.description;
-  data.meta = args.meta;
-  data.background_image_url = args.background_image_url;
+  clone.title = args.title;
+  clone.hide_title = args.hide_title;
+  clone.description = args.description;
+  clone.meta = args.meta;
+
+  if (args.background_image_url) {
+    clone.picture_background = {
+      img: {
+        src: args.background_image_url,
+        alt: clone.picture_background.img.alt || '',
+      },
+    };
+  } else {
+    clone.picture_background = {};
+  }
 
   if (args.overlay === 'none') {
-    delete data.overlay;
+    delete clone.overlay;
   } else {
-    data.overlay = args.overlay;
+    clone.overlay = args.overlay;
   }
 
-  correctPaths(data);
+  correctPaths(clone);
 
-  return data;
+  return clone;
 };
 
 export default {
diff --git a/src/implementations/twig/components/page-header/page-header.html.twig b/src/implementations/twig/components/page-header/page-header.html.twig
index 04f511dd3a4..ac425317254 100644
--- a/src/implementations/twig/components/page-header/page-header.html.twig
+++ b/src/implementations/twig/components/page-header/page-header.html.twig
@@ -5,10 +5,10 @@
     - "title" (string) (default: '') Title of header
     - "hide_title" (boolean) (default: false) Hide the h1 title, for screen reader only
     - "description" (string) (default: '') Description of header
-    - "picture" (associative array) (default: {}): Image for thumbnail, following ECL Picture structure
+    - "picture_thumbnail" (associative array) (default: {}): Image for thumbnail, following ECL Picture structure
+    - "picture_background" (associative array) (default: {}): Image for background, following ECL Picture structure
     - "meta" (array) (default: []) Meta of header
     - "breadcrumb" (associative array) (default: '') Predefined structure compatible with EC Breadcrumb
-    - "background_image_url (string) (default: '') Background image url
     - "overlay" (string) (default: '') Optional overlay on top of background image (can be 'light', 'dark')
     - "negative" (boolean) (default: false) apply negative style with a darker background (only for EC)
     - "extra_classes" (string) (default: '')
@@ -20,6 +20,7 @@
       ],
 
   Deprecated:
+    - "background_image_url (string) (default: '') Background image url
     - "thumbnail" (associative array) (default: {}) Thumbnail dipslayed alongside the description:
       {
         "alt" (string) Alternative text
@@ -35,20 +36,37 @@
 {% set _meta = meta|default([]) %}
 {% set _description = description|default('') %}
 {% set _thumbnail = thumbnail|default({}) %}
-{% set _picture = picture|default({}) %}
+{% set _picture_thumbnail = picture_thumbnail|default({}) %}
+{% set _picture_background = picture_background|default({}) %}
 {% set _breadcrumb = breadcrumb|default({}) %}
 {% set _css_class = 'ecl-page-header' %}
 {% set _background_image_url = background_image_url|default('') %}
 {% set _overlay = overlay|default('') %}
 {% set _extra_attributes = '' %}
 
+{# Backward compatibility #}
+
+{% if _picture_thumbnail.img is empty and _thumbnail.src is not empty %}
+  {% set _picture_thumbnail = {
+    'img': _thumbnail,
+  } %}
+{% endif %}
+
+{% if _picture_background.img is empty and _background_image_url is not empty %}
+  {% set _picture_background = {
+    'img': {
+      'src': _background_image_url,
+    },
+  } %}
+{% endif %}
+
 {# Internal logic - Process properties #}
 
 {% if _variant is not empty and _variant == 'negative' %}
   {% set _css_class = _css_class ~ ' ecl-page-header--negative' %}
 {% endif %}
 
-{% if _background_image_url and _background_image_url is not empty %}
+{% if _picture_background.img is not empty %}
   {% set _css_class = _css_class ~ ' ecl-page-header--image' %}
 
   {% if _overlay is not empty %}
@@ -70,21 +88,18 @@
   {% endfor %}
 {% endif %}
 
-{# Backward compatibility #}
-
-{% if _picture.img is empty and _thumbnail.src is not empty %}
-  {% set _picture = {
-    'img': _thumbnail,
-  } %}
-{% endif %}
-
 {# Print the result #}
 
 <div class="{{ _css_class }}" {{ _extra_attributes|raw }}>
-{% if _background_image_url and _background_image_url is not empty %}
-  {% set _image_attributes = 'style="background-image: url(' ~ _background_image_url ~ ')"' %}
-  <div class="ecl-page-header__background" {{ _image_attributes|raw }} aria-hidden="true"></div>
-{% endif %}
+  {% if _picture_background.img is not empty %}
+    <div class="ecl-page-header__background-container" aria-hidden="true">
+      {% include '@ecl/picture/picture.html.twig' with {
+        picture: _picture_background,
+        extra_classes: "ecl-page-header__picture-background",
+        extra_image_classes: "ecl-page-header__background",
+      } only %}
+    </div>
+  {% endif %}
 
   <div class="ecl-container">
   {% if _breadcrumb is not empty %}
@@ -112,12 +127,12 @@
     {% endif %}
   {% endif %}
 
-  {% if _description is not empty or _picture.img is not empty %}
+  {% if _description is not empty or _picture_thumbnail.img is not empty %}
     <div class="ecl-page-header__description-container">
-    {% if _picture.img is not empty %}
+    {% if _picture_thumbnail.img is not empty %}
       {% include '@ecl/picture/picture.html.twig' with {
-        picture: _picture,
-        extra_classes: "ecl-page-header__picture",
+        picture: _picture_thumbnail,
+        extra_classes: "ecl-page-header__picture-thumbnail",
         extra_image_classes: "ecl-page-header__description-thumbnail",
       } only %}
     {% endif %}
diff --git a/src/implementations/twig/components/page-header/page-header.test.js b/src/implementations/twig/components/page-header/page-header.test.js
index 9533abb7dd8..7fce5ca64cf 100644
--- a/src/implementations/twig/components/page-header/page-header.test.js
+++ b/src/implementations/twig/components/page-header/page-header.test.js
@@ -70,7 +70,10 @@ describe('Page Header Standardised', () => {
         alt: 'Europe map',
         src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg',
       };
-      demoDefault.picture = {};
+      demoDefault.picture_thumbnail = {};
+      demoDefault.background_image_url =
+        'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg';
+      demoDefault.picture_background = {};
 
       return expect(render(demoDefault)).resolves.toMatchSnapshot();
     });
diff --git a/src/implementations/vanilla/components/page-header/page-header-ec.scss b/src/implementations/vanilla/components/page-header/page-header-ec.scss
index f2567f77027..a52bf6c5c05 100644
--- a/src/implementations/vanilla/components/page-header/page-header-ec.scss
+++ b/src/implementations/vanilla/components/page-header/page-header-ec.scss
@@ -138,14 +138,15 @@
  * background image variant
  */
 .ecl-page-header--image {
-  position: relative;
+  .ecl-page-header__background-container {
+    position: relative;
+  }
 
   .ecl-page-header__background {
-    background-position: 50% 0;
-    background-size: cover;
     display: block;
     height: 10.875rem;
-    position: relative;
+    object-fit: cover;
+    object-position: 50% 0;
     width: 100%;
   }
 
@@ -169,7 +170,7 @@
 }
 
 .ecl-page-header--overlay-dark {
-  .ecl-page-header__background::before {
+  .ecl-page-header__background-container::before {
     background-color: rgba(map.get(theme.$color, 'black'), 0.5);
     content: '';
     height: 100%;
@@ -179,7 +180,7 @@
 }
 
 .ecl-page-header--overlay-light {
-  .ecl-page-header__background::before {
+  .ecl-page-header__background-container::before {
     background-color: rgba(map.get(theme.$color, 'black'), 0.3);
     content: '';
     height: 100%;
diff --git a/src/implementations/vanilla/components/page-header/page-header-eu.scss b/src/implementations/vanilla/components/page-header/page-header-eu.scss
index 03ad9a6015a..72d21f335ed 100644
--- a/src/implementations/vanilla/components/page-header/page-header-eu.scss
+++ b/src/implementations/vanilla/components/page-header/page-header-eu.scss
@@ -102,10 +102,10 @@
   position: relative;
 
   .ecl-page-header__background {
-    background-position: 50% 0;
-    background-size: cover;
     display: block;
     height: 10.875rem;
+    object-fit: cover;
+    object-position: 50% 0;
     position: relative;
     width: 100%;
   }
@@ -129,7 +129,7 @@
 }
 
 .ecl-page-header--overlay-dark {
-  .ecl-page-header__background::before {
+  .ecl-page-header__background-container::before {
     background-color: rgba(map.get(theme.$color, 'black'), 0.5);
     content: '';
     height: 100%;
@@ -139,7 +139,7 @@
 }
 
 .ecl-page-header--overlay-light {
-  .ecl-page-header__background::before {
+  .ecl-page-header__background-container::before {
     background-color: rgba(map.get(theme.$color, 'black'), 0.3);
     content: '';
     height: 100%;
diff --git a/src/implementations/vanilla/components/page-header/page-header-print.scss b/src/implementations/vanilla/components/page-header/page-header-print.scss
index 79739ef45ac..f7b7ff4a121 100644
--- a/src/implementations/vanilla/components/page-header/page-header-print.scss
+++ b/src/implementations/vanilla/components/page-header/page-header-print.scss
@@ -47,3 +47,9 @@
   margin-bottom: 0;
   margin-top: map.get(theme.$spacing-print, 'm');
 }
+
+.ecl-page-header--image {
+  .ecl-page-header__background {
+    display: none;
+  }
+}
diff --git a/src/specs/components/page-header/demo/data.js b/src/specs/components/page-header/demo/data.js
index a559166b93a..6324aaee5bd 100644
--- a/src/specs/components/page-header/demo/data.js
+++ b/src/specs/components/page-header/demo/data.js
@@ -5,12 +5,16 @@ module.exports = {
   title: 'Page title',
   description: `Lorem ipsum dolor sit amet, <a href="${exampleLink}">consectetur adipiscing elit</a>. Quisque nec ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, <a class="ecl-link" href="${exampleLink}">eget dictum elit</a>. Vestibulum gravida tincidunt venenatis.`,
   meta: ['Meta info', 'DD Month YYYY'],
-  picture: {
+  picture_thumbnail: {
+    img: {
+      src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg',
+      alt: 'Europe map',
+    },
+  },
+  picture_background: {
     img: {
       src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg',
       alt: 'Europe map',
     },
   },
-  background_image_url:
-    'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg',
 };

From 95ec5fd14fba2d33efd01b30fe510a330bf073c4 Mon Sep 17 00:00:00 2001
From: emeryro <emery.romain@gmail.com>
Date: Thu, 30 Mar 2023 15:37:59 +0200
Subject: [PATCH 5/6] fix test

---
 .../__snapshots__/page-header.test.js.snap    | 60 ++++++++-----------
 .../page-header/ec-page-header.story.js       |  4 +-
 .../page-header/page-header.test.js           |  4 +-
 3 files changed, 29 insertions(+), 39 deletions(-)

diff --git a/src/implementations/twig/components/page-header/__snapshots__/page-header.test.js.snap b/src/implementations/twig/components/page-header/__snapshots__/page-header.test.js.snap
index cc83abbbf6c..aae1130020b 100644
--- a/src/implementations/twig/components/page-header/__snapshots__/page-header.test.js.snap
+++ b/src/implementations/twig/components/page-header/__snapshots__/page-header.test.js.snap
@@ -7,9 +7,18 @@ exports[`Page Header Standardised Background image - renders correctly 1`] = `
   >
     <div
       aria-hidden="true"
-      class="ecl-page-header__background"
-      style="background-image: url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
-    />
+      class="ecl-page-header__background-container"
+    >
+      <picture
+        class="ecl-picture ecl-page-header__picture-background"
+      >
+        <img
+          alt="Europe map"
+          class="ecl-page-header__background"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
+        />
+      </picture>
+    </div>
     <div
       class="ecl-container"
     >
@@ -165,7 +174,7 @@ exports[`Page Header Standardised Background image - renders correctly 1`] = `
         class="ecl-page-header__description-container"
       >
         <picture
-          class="ecl-picture ecl-page-header__picture"
+          class="ecl-picture ecl-page-header__picture-thumbnail"
         >
           <img
             alt="Europe map"
@@ -356,15 +365,6 @@ exports[`Page Header Standardised Default - renders correctly 1`] = `
       <div
         class="ecl-page-header__description-container"
       >
-        <picture
-          class="ecl-picture ecl-page-header__picture"
-        >
-          <img
-            alt="Europe map"
-            class="ecl-page-header__description-thumbnail"
-            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
-          />
-        </picture>
         <p
           class="ecl-page-header__description"
         >
@@ -550,15 +550,6 @@ exports[`Page Header Standardised Default renders correctly with extra attribute
       <div
         class="ecl-page-header__description-container"
       >
-        <picture
-          class="ecl-picture ecl-page-header__picture"
-        >
-          <img
-            alt="Europe map"
-            class="ecl-page-header__description-thumbnail"
-            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
-          />
-        </picture>
         <p
           class="ecl-page-header__description"
         >
@@ -742,15 +733,6 @@ exports[`Page Header Standardised Default renders correctly with extra class nam
       <div
         class="ecl-page-header__description-container"
       >
-        <picture
-          class="ecl-picture ecl-page-header__picture"
-        >
-          <img
-            alt="Europe map"
-            class="ecl-page-header__description-thumbnail"
-            src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
-          />
-        </picture>
         <p
           class="ecl-page-header__description"
         >
@@ -782,9 +764,17 @@ exports[`Page Header Standardised with deprectated data renders correctly 1`] =
   >
     <div
       aria-hidden="true"
-      class="ecl-page-header__background"
-      style="background-image: url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
-    />
+      class="ecl-page-header__background-container"
+    >
+      <picture
+        class="ecl-picture ecl-page-header__picture-background"
+      >
+        <img
+          class="ecl-page-header__background"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
+        />
+      </picture>
+    </div>
     <div
       class="ecl-container"
     >
@@ -940,7 +930,7 @@ exports[`Page Header Standardised with deprectated data renders correctly 1`] =
         class="ecl-page-header__description-container"
       >
         <picture
-          class="ecl-picture ecl-page-header__picture"
+          class="ecl-picture ecl-page-header__picture-thumbnail"
         >
           <img
             alt="Europe map"
diff --git a/src/implementations/twig/components/page-header/ec-page-header.story.js b/src/implementations/twig/components/page-header/ec-page-header.story.js
index 7818086cd59..fac7d41e3ba 100644
--- a/src/implementations/twig/components/page-header/ec-page-header.story.js
+++ b/src/implementations/twig/components/page-header/ec-page-header.story.js
@@ -11,8 +11,8 @@ import notes from './README.md';
 const dataCore = { ...demoContent, variant: 'negative' };
 
 const dataHarmonised = { ...demoContent };
-delete dataHarmonised.thumbnails;
-delete dataHarmonised.background_image_url;
+delete dataHarmonised.picture_thumbnail;
+delete dataHarmonised.picture_thumbnail;
 
 const dataStandardised = { ...demoContent };
 
diff --git a/src/implementations/twig/components/page-header/page-header.test.js b/src/implementations/twig/components/page-header/page-header.test.js
index 7fce5ca64cf..a90c405006a 100644
--- a/src/implementations/twig/components/page-header/page-header.test.js
+++ b/src/implementations/twig/components/page-header/page-header.test.js
@@ -12,8 +12,8 @@ expect.extend(toHaveNoViolations);
 demoDefault.breadcrumb = dataBreadcrumbSimple;
 
 const demoSimple = { ...demoDefault };
-delete demoSimple.thumbnails;
-delete demoSimple.background_image_url;
+delete demoSimple.picture_background;
+delete demoSimple.picture_thumbnail;
 
 describe('Page Header Standardised', () => {
   const template = '@ecl/page-header/page-header.html.twig';

From c1fd1916425fc15074186c996a0fbaa78f2d64f2 Mon Sep 17 00:00:00 2001
From: emeryro <emery.romain@gmail.com>
Date: Mon, 3 Apr 2023 11:37:15 +0200
Subject: [PATCH 6/6] fix print

---
 .../vanilla/components/page-header/page-header-print.scss   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/implementations/vanilla/components/page-header/page-header-print.scss b/src/implementations/vanilla/components/page-header/page-header-print.scss
index f7b7ff4a121..e1a04e64a3c 100644
--- a/src/implementations/vanilla/components/page-header/page-header-print.scss
+++ b/src/implementations/vanilla/components/page-header/page-header-print.scss
@@ -50,6 +50,10 @@
 
 .ecl-page-header--image {
   .ecl-page-header__background {
-    display: none;
+    display: block;
+    height: 10.875rem;
+    object-fit: cover;
+    object-position: 50% 0;
+    width: 100%;
   }
 }