@eeacms/volto-clms-theme 1.1.42 → 1.1.43

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.1.43](https://github.com/eea/volto-clms-theme/compare/1.1.42...1.1.43) - 19 September 2023
+
+#### :rocket: New Features
+
+- feat: add lazy loading option to the HomeUsersBlock schema [Ion Lizarazu - [`f5e7882`](https://github.com/eea/volto-clms-theme/commit/f5e7882ff2e986706e26c41f824892964bd79ad9)]
+- feat: header and footer img width and height [Ion Lizarazu - [`0742d37`](https://github.com/eea/volto-clms-theme/commit/0742d3701ea479c6be00013c3b42e12cad50c0e0)]
+
+#### :bug: Bug Fixes
+
+- fix: convert to publicUrl Home image urls [Ion Lizarazu - [`28b7759`](https://github.com/eea/volto-clms-theme/commit/28b77591813cdd9ebd7f2895fe508352b4b44d4a)]
+
+#### :hammer_and_wrench: Others
+
+- code refactor [Ion Lizarazu - [`17bba57`](https://github.com/eea/volto-clms-theme/commit/17bba5706f7007199983190a747bf567f682554b)]
 ### [1.1.42](https://github.com/eea/volto-clms-theme/compare/1.1.41...1.1.42) - 18 September 2023
 
 #### :bug: Bug Fixes
@@ -44,7 +58,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - fix cart items concat function [Ion Lizarazu - [`4b72249`](https://github.com/eea/volto-clms-theme/commit/4b72249ef17a0cda22661809fce5be7c2d1f6649)]
 - revert Jenkinsfile [Ion Lizarazu - [`64f6cd0`](https://github.com/eea/volto-clms-theme/commit/64f6cd08100357843b507c00d3286d7debe0ef04)]
-- yarn.lock file [Ion Lizarazu - [`8444ad1`](https://github.com/eea/volto-clms-theme/commit/8444ad1606b3939e4609bdd186e5ace2252588a8)]
 - packages.json versions order [Ion Lizarazu - [`4fd7a86`](https://github.com/eea/volto-clms-theme/commit/4fd7a86ab43238841b421e1ed10ebd52ab420a15)]
 - downloadablefilestablewidget param modification [Ion Lizarazu - [`5dd794a`](https://github.com/eea/volto-clms-theme/commit/5dd794a33a8eddd042a753b7ab47e7d2a323b011)]
 - add technical_documents_accordion_text field to the dataset view [Ion Lizarazu - [`96ed1e5`](https://github.com/eea/volto-clms-theme/commit/96ed1e5e2c2b501bd303bc76b333a70ad1614c16)]
@@ -169,7 +182,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - remove NUTS text for area naming in the cart [ionlizarazu - [`062e0a3`](https://github.com/eea/volto-clms-theme/commit/062e0a375f5352bc13c18ff7ec33fad4bcc59f2f)]
 - dependencies [ionlizarazu - [`405ef96`](https://github.com/eea/volto-clms-theme/commit/405ef96090fe7bd4af73a49d3285a92fad712e3b)]
-- yarn.lock [ionlizarazu - [`7132119`](https://github.com/eea/volto-clms-theme/commit/71321195c4dd4fceed67f2f0872f3e24bba61c17)]
 - volto-blocks-grid module mapping [ionlizarazu - [`4fec3ca`](https://github.com/eea/volto-clms-theme/commit/4fec3cabc437322ad92ed90d682250bd123ccaaf)]
 - volto-blocks-grid v7.0.2 [ionlizarazu - [`2557e60`](https://github.com/eea/volto-clms-theme/commit/2557e6039d3cea33ca0bd11a0a3ef4764c611f78)]
 - remove styling from teaser block [ionlizarazu - [`879e684`](https://github.com/eea/volto-clms-theme/commit/879e684057c88f52f60f0fa54cbaa155c7d14688)]
@@ -257,7 +269,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`b4cbf65`](https://github.com/eea/volto-clms-theme/commit/b4cbf6557fbc67f7fc4cea5aa2cb19804f3d7e3c)]
 
 #### :hammer_and_wrench: Others
 
@@ -1456,7 +1467,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - related products and datasets added to news and meeting views and login-plone route created [Unai - [`5704a1a`](https://github.com/eea/volto-clms-theme/commit/5704a1a766148746162b60efaf232ea90dc20cf4)]
-- Revert "[JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967" [Mikel Larreategi - [`46eb694`](https://github.com/eea/volto-clms-theme/commit/46eb69415280a3c982405299135027ae4221426a)]
 - sort items according to the lowercased label and put those with special meaning at the end [Mikel Larreategi - [`6410abe`](https://github.com/eea/volto-clms-theme/commit/6410abe096f60dcad54dced2026c9df9b7946d68)]
 - lint fix [Unai - [`1264a7a`](https://github.com/eea/volto-clms-theme/commit/1264a7adfe8d679fea1bd821ad087add20f4271d)]
 - footer newsletter subscription change, global search maxLength change from 8000 to 200 and /login design change [Unai - [`a09d24a`](https://github.com/eea/volto-clms-theme/commit/a09d24adbb6fa053fb2a2cc0071506b906593b42)]
@@ -1607,7 +1617,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - search block new features [ionlizarazu - [`8e814cb`](https://github.com/eea/volto-clms-theme/commit/8e814cbd359782540c21fe37b37ef146d331f0d6)]
 - language selector cookie management [ionlizarazu - [`1385ac9`](https://github.com/eea/volto-clms-theme/commit/1385ac95795702206d3623ba6e780faa43a89e0a)]
 - toolbar cookie management [ionlizarazu - [`5c23200`](https://github.com/eea/volto-clms-theme/commit/5c23200790b20e1d4f1bc966463c37bf4c808f47)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`0316a0d`](https://github.com/eea/volto-clms-theme/commit/0316a0d8b6fb0fa14af13002415f3c95d9f8ede3)]
 ### [1.0.84](https://github.com/eea/volto-clms-theme/compare/1.0.83...1.0.84) - 18 March 2022
 
 #### :hammer_and_wrench: Others
@@ -2512,13 +2521,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - replace @collective/volto-dropdownmenu with volto-dropdownmenu [ionlizarazu - [`07f004f`](https://github.com/eea/volto-clms-theme/commit/07f004fe0219e403fb51bc045c83d34f3b981f76)]
-- yarn.lock [ionlizarazu - [`fe1ca04`](https://github.com/eea/volto-clms-theme/commit/fe1ca04889d29fe7b653db4c69af2751b84b8a1a)]
 - add NODE_ENV parameter [ionlizarazu - [`101f27c`](https://github.com/eea/volto-clms-theme/commit/101f27c25b8fbd192e1b11865e95cf5ffee08c1b)]
 - upgrade volto-dropdownmenu version [ionlizarazu - [`2081855`](https://github.com/eea/volto-clms-theme/commit/2081855301f4c708776e0dbab39db143cee00dbc)]
 - HomeSearch block missing url behaviour [ionlizarazu - [`d20a378`](https://github.com/eea/volto-clms-theme/commit/d20a378ce3f254b8343692348f314bf281974542)]
 - babel configuration [ionlizarazu - [`203ea2d`](https://github.com/eea/volto-clms-theme/commit/203ea2de07f99ca3403e4ca220ca74d7ce69b61d)]
 - prettier [ionlizarazu - [`e79e26b`](https://github.com/eea/volto-clms-theme/commit/e79e26bf2fa40ba7b4eb53a24dabd87928221c28)]
-- add yarn lock [ionlizarazu - [`e1ab28b`](https://github.com/eea/volto-clms-theme/commit/e1ab28b060d5a74431c368b0de82a68dabce1eab)]
 - Jenkinsfile cypress test [ionlizarazu - [`b385d65`](https://github.com/eea/volto-clms-theme/commit/b385d65986f717c60f8c434a08fc11b829d08eb4)]
 - cypress [ionlizarazu - [`a243cf0`](https://github.com/eea/volto-clms-theme/commit/a243cf0182fa3dd113c16ff495c71e310252d83b)]
 - some fixes [ionlizarazu - [`046279b`](https://github.com/eea/volto-clms-theme/commit/046279b9d05bea8a64eca03eed493e02621534c9)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.42",
+  "version": "1.1.43",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CclHomeBgImageBlock/CclGreenBgView.jsx

@@ -1,29 +1,17 @@
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 import CclHomeImageEditor from './CclHomeImageEditor';
 import React from 'react';
+import { toPublicURL } from '@plone/volto/helpers';
+import { HomeBgImg } from './HomeBgImg';
 
 const CclGreenBgView = (props) => {
   const { data, isEditMode } = props;
   const { showInfo, setShowInfo } = props?.content || {};
+  const image_url = data?.image?.url ? toPublicURL(data.image.url) : '';
   return (
     <div className="ccl-banner-top-container">
       <div className="ccl-banner-top-main">
-        <img
-          src={
-            `${data?.image?.url}/@@images/image/huge` ||
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-          }
-          srcSet={`${data?.image?.url}/@@images/image/huge4000 4000w,
-          ${data?.image?.url}/@@images/image/huge3000 3000w,
-          ${data?.image?.url}/@@images/image/huge2400 2400w,
-          ${data?.image?.url}/@@images/image/huge 1600w,
-          ${data?.image?.url}/@@images/image/great 1200w,
-          ${data?.image?.url}/@@images/image/larger 1000w,
-          ${data?.image?.url}/@@images/image/large 800w,
-          ${data?.image?.url}/@@images/image/teaser 600w,
-          `}
-          alt={data.image.alt}
-        />
+        {image_url && <HomeBgImg url={image_url} alt={data?.image?.alt} />}
         {isEditMode && <CclHomeImageEditor {...props} />}
         <div className="ccl-container">
           <div className="ccl-banner-top-main-block-title">

package/src/components/Blocks/CclHomeBgImageBlock/CclWhiteBgView.jsx

@@ -1,28 +1,16 @@
 import React from 'react';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 import CclHomeImageEditor from './CclHomeImageEditor';
+import { toPublicURL } from '@plone/volto/helpers';
+import { HomeBgImg } from './HomeBgImg';
 
 const CclWhiteBgView = (props) => {
   const { data, isEditMode } = props;
+  const image_url = data?.image?.url ? toPublicURL(data.image.url) : '';
 
   return (
     <div className="home-map-container">
-      <img
-        src={
-          `${data?.image?.url}/@@images/image/huge` ||
-          'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-        }
-        srcSet={`${data?.image?.url}/@@images/image/huge4000 4000w,
-          ${data?.image?.url}/@@images/image/huge3000 3000w,
-          ${data?.image?.url}/@@images/image/huge2400 2400w,
-          ${data?.image?.url}/@@images/image/huge 1600w,
-          ${data?.image?.url}/@@images/image/great 1200w,
-          ${data?.image?.url}/@@images/image/larger 1000w,
-          ${data?.image?.url}/@@images/image/large 800w,
-          ${data?.image?.url}/@@images/image/teaser 600w,
-          `}
-        alt={data.image.alt}
-      />
+      {image_url && <HomeBgImg url={image_url} alt={data?.image?.alt} />}
       {isEditMode && <CclHomeImageEditor {...props} />}
       <div className="ccl-container">
         <div className="home-map-banner">

package/src/components/Blocks/CclHomeBgImageBlock/HomeBgImg.jsx

@@ -0,0 +1,23 @@
+export const HomeBgImg = ({ url, alt }) => {
+  return (
+    <img
+      src={
+        `${url}/@@images/image/huge` ||
+        'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+      }
+      srcSet={`${url}/@@images/image/huge4000 4000w,
+                ${url}/@@images/image/huge3000 3000w,
+                ${url}/@@images/image/huge2400 2400w,
+                ${url}/@@images/image/huge 1600w,
+                ${url}/@@images/image/great 1200w,
+                ${url}/@@images/image/larger 1000w,
+                ${url}/@@images/image/large 800w,
+                ${url}/@@images/image/teaser 600w,
+                `}
+      alt={alt}
+      width={'100%'}
+      height={349}
+      fetchpriority="high"
+    />
+  );
+};

package/src/components/Blocks/CclHomeUsersBlock/CclHomeUsersBlockView.jsx

@@ -47,59 +47,65 @@ const CclHomeUsersBlockView = (props) => {
       <div className="ccl-container">
         <h3>{data.title}</h3>
         <Slider className="ccl-list-carousel ccl-list-items" {...settings}>
-          {cards.map((card, index) => (
-            <div index={index} key={index}>
-              <div className="ccl-list-item ">
-                <div className="ccl-list-item-image">
-                  {card?.image?.url ? (
-                    <img
-                      src={`${card.image.url}/@@images/image`}
-                      alt={card.image.alt}
-                    />
-                  ) : card.productUrl &&
-                    card.productUrl.length > 0 &&
-                    card.productUrl[0].image_field ? (
-                    <img
-                      src={`${card.productUrl[0]['@id']}/@@images/${card.productUrl[0].image_field}/preview`}
-                      alt={card?.productUrl[0].title || 'Placeholder'}
-                    />
-                  ) : (
-                    <img
-                      src={
-                        'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-                      }
-                      alt={'placeholder'}
-                    />
-                  )}
+          {cards.map((card, index) => {
+            const loading = card.lazyLoad ? { loading: 'lazy' } : {};
+            return (
+              <div index={index} key={index}>
+                <div className="ccl-list-item ">
+                  <div className="ccl-list-item-image">
+                    {card?.image?.url ? (
+                      <img
+                        src={`${card.image.url}/@@images/image/teaser`}
+                        alt={card.image.alt}
+                        {...loading}
+                      />
+                    ) : card.productUrl &&
+                      card.productUrl.length > 0 &&
+                      card.productUrl[0].image_field ? (
+                      <img
+                        src={`${card.productUrl[0]['@id']}/@@images/${card.productUrl[0].image_field}/preview`}
+                        alt={card?.productUrl[0].title || 'Placeholder'}
+                        {...loading}
+                      />
+                    ) : (
+                      <img
+                        src={
+                          'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+                        }
+                        alt={'placeholder'}
+                        {...loading}
+                      />
+                    )}
+                  </div>
+                  <ConditionalLink
+                    condition={card.productUrl && card.productUrl.length > 0}
+                    item={
+                      card.productUrl && card.productUrl.length > 0
+                        ? card.productUrl[0]
+                        : {}
+                    }
+                  >
+                    <h4>
+                      {card.title
+                        ? card.title
+                        : card.productUrl &&
+                          card.productUrl.length > 0 &&
+                          card.productUrl[0]['@id'].indexOf('http') !== 0
+                        ? card.productUrl[0].title
+                        : card.title}
+                    </h4>
+                  </ConditionalLink>
+                  <p>
+                    {card.description
+                      ? card.description
+                      : card.productUrl && card.productUrl.length > 0
+                      ? card.productUrl[0].description
+                      : card.description}
+                  </p>
                 </div>
-                <ConditionalLink
-                  condition={card.productUrl && card.productUrl.length > 0}
-                  item={
-                    card.productUrl && card.productUrl.length > 0
-                      ? card.productUrl[0]
-                      : {}
-                  }
-                >
-                  <h4>
-                    {card.title
-                      ? card.title
-                      : card.productUrl &&
-                        card.productUrl.length > 0 &&
-                        card.productUrl[0]['@id'].indexOf('http') !== 0
-                      ? card.productUrl[0].title
-                      : card.title}
-                  </h4>
-                </ConditionalLink>
-                <p>
-                  {card.description
-                    ? card.description
-                    : card.productUrl && card.productUrl.length > 0
-                    ? card.productUrl[0].description
-                    : card.description}
-                </p>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </Slider>
         {data.moreLinkUrl && data.moreLinkText && (
           <CclButton url={data.moreLinkUrl[0]['@id']}>

package/src/components/Blocks/CclHomeUsersBlock/HomeUsersSchema.js

@@ -40,7 +40,7 @@ export const CardBlockSchema = () => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['title', 'description', 'productUrl'],
+      fields: ['title', 'description', 'productUrl', 'lazyLoad'],
     },
   ],
   properties: {
@@ -61,6 +61,13 @@ export const CardBlockSchema = () => ({
       selectedItemAttrs: ['description', 'image_field'],
       allowExternals: true,
     },
+    lazyLoad: {
+      title: 'Lazy load',
+      description:
+        'Check it ONLY if the image is not going to be shown in the first load',
+      type: 'boolean',
+      default: false,
+    },
   },
   required: ['product'],
 });

package/src/customizations/volto/components/theme/Footer/Footer.jsx

@@ -257,6 +257,8 @@ class Footer extends Component {
                 className="ccl-footer-logo-img"
                 src={CopernicusImage}
                 alt={'Copernicus'}
+                width={290}
+                height={70}
               />
             </a>
           </div>

package/src/customizations/volto/components/theme/Logo/Logo.jsx

@@ -56,6 +56,7 @@ const Logo = () => {
             alt={intl.formatMessage(messages.copernicuslogo)}
             title={intl.formatMessage(messages.copernicuslogo)}
             height={44}
+            width={212}
           />
         </a>
         <Link
@@ -68,6 +69,7 @@ const Logo = () => {
             alt={intl.formatMessage(messages.plonesite)}
             title={intl.formatMessage(messages.plonesite)}
             height={44}
+            width={215}
           />
         </Link>
       </div>