@eeacms/volto-n2k 1.2.2 → 1.2.3

package/CHANGELOG.md

@@ -4,12 +4,31 @@ 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.2.3](https://github.com/eea/volto-n2k/compare/1.2.2...1.2.3) - 26 March 2026
+
+#### :rocket: New Features
+
+- feat(tilesImages): add Data connected Images variation [nileshgulia1 - [`1c92f16`](https://github.com/eea/volto-n2k/commit/1c92f167e1960b548ecbae908ab25ec0ce9042bf)]
+- feat(): add red habitat banner listing variation for habitat banner refs#301670 [nileshgulia1 - [`2fa0b3a`](https://github.com/eea/volto-n2k/commit/2fa0b3ac0f585c022eb30e5e0c638903dc6b4135)]
+
+#### :bug: Bug Fixes
+
+- fix: images rendering [nileshgulia1 - [`d1e22b0`](https://github.com/eea/volto-n2k/commit/d1e22b007f0f42c0913b2f8359bfe672ac253651)]
+- fix: remove unused imports [nileshgulia1 - [`df7de96`](https://github.com/eea/volto-n2k/commit/df7de96eecbf40ad3b095628172b391223393ce2)]
+
+#### :house: Internal changes
+
+
+#### :hammer_and_wrench: Others
+
+- remove: habitats variation for Habitats Banner [nileshgulia1 - [`d160a38`](https://github.com/eea/volto-n2k/commit/d160a3806d3b68507d15c77054f764a2f3ce1962)]
+- move arrows to left [nileshgulia1 - [`781c07d`](https://github.com/eea/volto-n2k/commit/781c07d384ea0e6060df124bb0412c724d651e40)]
+- eslint . [nileshgulia1 - [`516da36`](https://github.com/eea/volto-n2k/commit/516da36ce3a95ee2f8cc9b3e630ddc2875034745)]
 ### [1.2.2](https://github.com/eea/volto-n2k/compare/1.2.1...1.2.2) - 23 February 2026
 
 #### :house: Internal changes
 
 - style: Automated code fix [eea-jenkins - [`dd7eb96`](https://github.com/eea/volto-n2k/commit/dd7eb969dbf212e8cc0e49d76dff0cedfcc26e53)]
-- chore: [JENKINSFILE] use sonarqube branches [EEA Jenkins - [`0e3a176`](https://github.com/eea/volto-n2k/commit/0e3a176b5013e874fd769549c7c43dacdfee07d2)]
 
 #### :hammer_and_wrench: Others
 
@@ -167,7 +186,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`e4f9fc8`](https://github.com/eea/volto-n2k/commit/e4f9fc800b753b97cca7c685bc47dd48804276f0)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`647d621`](https://github.com/eea/volto-n2k/commit/647d621d52400c50f5bc629b3ddc4f2121f14ffa)]
 - chore:volto 16 in tests, update docs, fix stylelint overrides [valentinab25 - [`60d94b6`](https://github.com/eea/volto-n2k/commit/60d94b61ff8826abc57af9616793a1a247f585b5)]
 
@@ -182,11 +200,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - try to use volto-spotlight theme in jenkins [Miu Razvan - [`ec0b952`](https://github.com/eea/volto-n2k/commit/ec0b9525b967f907922ae660bd9f520119cd80c1)]
 - remove waitForResourceToLoad [ana-oprea - [`eaded9b`](https://github.com/eea/volto-n2k/commit/eaded9b9ecd1ca2eb78aa8dd65838c063d95db85)]
 - update image size from 300 to 800 px [Claudia Ifrim - [`8d9270a`](https://github.com/eea/volto-n2k/commit/8d9270a09506278ceaea25e8a72abdf5b22fcc78)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`350f8a6`](https://github.com/eea/volto-n2k/commit/350f8a6928aafbf168472b572f8041a79f71f577)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`99b3a84`](https://github.com/eea/volto-n2k/commit/99b3a84a266710fadf7d430117359b741cadede8)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`050ac98`](https://github.com/eea/volto-n2k/commit/050ac982ec39e9a1b4885b665cdc118fca7b1283)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`3546040`](https://github.com/eea/volto-n2k/commit/35460409817f496fc752ab34e37d6d33a069b2e9)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`06a4ab1`](https://github.com/eea/volto-n2k/commit/06a4ab151799b8cdf4a316dbcb0c323e0f568e30)]
 - test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`4850d6a`](https://github.com/eea/volto-n2k/commit/4850d6a65349fe49dbe9244c30592ae38c9aeaba)]
 - test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`2c91856`](https://github.com/eea/volto-n2k/commit/2c9185688a2fe6b36e5eeb2963f6c8676e3c5628)]
 ### [1.0.33](https://github.com/eea/volto-n2k/compare/1.0.32...1.0.33) - 3 July 2023
@@ -443,7 +456,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update [razvanMiu - [`42ab50e`](https://github.com/eea/volto-n2k/commit/42ab50e6681a47251d15ac06b836c6f8c27157fa)]
 - Added bubble chart [razvanMiu - [`89fba5e`](https://github.com/eea/volto-n2k/commit/89fba5e5db41aa955ba2d0ed58c9f0042c461504)]
 - Group species by id_eunis in species list [razvanMiu - [`543c957`](https://github.com/eea/volto-n2k/commit/543c9573b53acd8eecc9afbb6ae7beeddba53966)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`2ca3e4c`](https://github.com/eea/volto-n2k/commit/2ca3e4c092211f92339791d71db81f5b4ca2d562)]
 - update maps - species and habitats distribution maps [Claudia Ifrim - [`ad12eb1`](https://github.com/eea/volto-n2k/commit/ad12eb141907d6f28444f1eafc3f687735d2a68d)]
 - update format for common name and author [Claudia Ifrim - [`26b7a2f`](https://github.com/eea/volto-n2k/commit/26b7a2f3d20c7701b57fb24f39fc7dfeceec3ce8)]
 - update format for species name (common / scientific) [Claudia Ifrim - [`abdedcf`](https://github.com/eea/volto-n2k/commit/abdedcfe645665031dedf050fd2c5cdde8c14a50)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/HabitatsBanner/View.jsx

@@ -1,208 +1,16 @@
-import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
-import { connectToMultipleProviders } from '@eeacms/volto-datablocks/hocs';
-import { replaceQueryParam, priorityLabels } from '@eeacms/volto-n2k/helpers';
-import arrowLeft from '@eeacms/volto-n2k/icons/arrow-left.svg';
-import arrowRight from '@eeacms/volto-n2k/icons/arrow-right.svg';
-import loadable from '@loadable/component';
-import { Icon } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
-import cx from 'classnames';
-import { useCallback, useMemo, useRef, useState } from 'react';
-import { compose } from 'redux';
+import React from 'react';
+import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
+import config from '@plone/volto/registry';
 
-import 'swiper/css';
-import './style.less';
+function View(props) {
+  const { mode = 'view', variation } = props;
 
-const SwiperLoader = loadable.lib(() => import('swiper'));
-const SwiperReactLoader = loadable.lib(() => import('swiper/react'));
+  const variations =
+    config.blocks?.blocksConfig['habitats_banner']?.variations || [];
+  const defaultVariation = variations.filter((item) => item.isDefault)?.[0];
+  const Template = variation?.template ?? defaultVariation?.template ?? null;
 
-const getSource = (source) => {
-  let parsedSource = replaceQueryParam(source, 'x', 800);
-  parsedSource = replaceQueryParam(parsedSource, 'y', 800);
-
-  return parsedSource;
-};
-
-const ViewComponent = (props) => {
-  const swiperEl = useRef();
-  const previewEl = useRef();
-  const [activeSlide, setActiveSlide] = useState(0);
-
-  const habitat_provider = useMemo(
-    () => flattenToAppURL(props.data.habitat_provider),
-    [props.data.habitat_provider],
-  );
-  const habitat_pictures_provider = useMemo(
-    () => flattenToAppURL(props.data.habitat_pictures_provider),
-    [props.data.habitat_pictures_provider],
-  );
-
-  const habitat = useMemo(
-    () => props.providers_data?.[habitat_provider] || {},
-    [props.providers_data, habitat_provider],
-  );
-  const habitat_pictures = useMemo(
-    () => props.providers_data?.[habitat_pictures_provider] || {},
-    [props.providers_data, habitat_pictures_provider],
-  );
-
-  const {
-    code_2000 = [],
-    scientific_name = [],
-    habitat_prioriy = [],
-  } = habitat;
-  const { attribution_copyright = [] } = habitat_pictures;
-
-  const priorityLabel = useMemo(() => {
-    const priority = habitat_prioriy[0];
-
-    return priorityLabels.habitat_prioriy[priority] ?? '';
-  }, [habitat_prioriy]);
-
-  const pictures = useMemo(
-    () => habitat_pictures?.['WebURL'] || [],
-    [habitat_pictures],
-  );
-  const pictures_length = useMemo(
-    () => pictures.filter((picture) => !!picture)?.length,
-    [pictures],
-  );
-
-  const handleSliderPrevious = useCallback(() => {
-    swiperEl.current.slidePrev();
-    if (previewEl.current?.[0]) {
-      previewEl.current[0].slidePrev();
-    }
-    if (previewEl.current?.[1]) {
-      previewEl.current[1].slidePrev();
-    }
-    setActiveSlide(swiperEl.current.realIndex);
-  }, []);
-
-  const handleSliderNext = useCallback(() => {
-    swiperEl.current.slideNext();
-    if (previewEl.current?.[0]) {
-      previewEl.current[0].slideNext();
-    }
-    if (previewEl.current?.[1]) {
-      previewEl.current[1].slideNext();
-    }
-    setActiveSlide(swiperEl.current.realIndex);
-  }, []);
-
-  if (!habitat_provider && props.mode === 'edit') {
-    return 'Habitat banner block, habitat provider undefined';
-  }
-  if (!habitat_pictures_provider && props.mode === 'edit') {
-    return 'Habitat banner block, habitat pictures provider undefined';
-  }
-
-  return (
-    <div className="habitat-banner-details">
-      <div className="habitat-details">
-        <div className="habitat-metadata">
-          <h2 className="name">{scientific_name[0]}</h2>
-          <p className="info">
-            Habitats Directive Annex I code&nbsp;&nbsp;&nbsp;{code_2000[0]}
-          </p>
-          <p className="info" style={{ marginTop: '1rem' }}>
-            {priorityLabel}
-          </p>
-        </div>
-        {pictures_length > 0 && (
-          <div className={cx('carousel one-slide')}>
-            <div
-              className={cx('arrows', { 'arrows-hidden': pictures_length < 2 })}
-            >
-              {pictures_length > 1 && (
-                <>
-                  <button
-                    className="swiper-button image-swiper-button-prev"
-                    onClick={handleSliderPrevious}
-                  >
-                    <Icon
-                      className="icon-left"
-                      color="#000"
-                      name={arrowLeft}
-                      size="32px"
-                    />
-                  </button>
-                  <button
-                    className="swiper-button image-swiper-button-next"
-                    onClick={handleSliderNext}
-                  >
-                    <Icon
-                      className="icon-right"
-                      color="#000"
-                      name={arrowRight}
-                      size="32px"
-                    />
-                  </button>
-                </>
-              )}
-              {!!attribution_copyright[activeSlide] && (
-                <p title={attribution_copyright[activeSlide]}>
-                  {attribution_copyright[activeSlide]}
-                </p>
-              )}
-            </div>
-            {__CLIENT__ && (
-              <SwiperLoader>
-                {() => {
-                  return (
-                    <SwiperReactLoader>
-                      {({ Swiper, SwiperSlide }) => {
-                        return (
-                          <>
-                            <Swiper
-                              loop={true}
-                              allowTouchMove={false}
-                              initialSlide={0}
-                              slidesPerView={1}
-                              spaceBetween={0}
-                              onBeforeInit={(swiper) => {
-                                swiperEl.current = swiper;
-                              }}
-                            >
-                              {pictures.map((source, index) => (
-                                <SwiperSlide key={source}>
-                                  <img
-                                    src={getSource(source)}
-                                    alt={pictures[index]}
-                                  />
-                                </SwiperSlide>
-                              ))}
-                            </Swiper>
-                          </>
-                        );
-                      }}
-                    </SwiperReactLoader>
-                  );
-                }}
-              </SwiperLoader>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-const ViewCompose = compose(
-  connectToMultipleProviders((props) => ({
-    providers: [
-      {
-        provider_url: props.data?.habitat_provider,
-      },
-      { provider_url: props.data?.habitat_pictures_provider },
-    ],
-  })),
-)(ViewComponent);
-
-export default function View(props) {
-  return (
-    <VisibilitySensor Placeholder={() => <div>loading....&nbsp;</div>}>
-      <ViewCompose {...props} />
-    </VisibilitySensor>
-  );
+  return <Template {...props} mode={mode} />;
 }
+
+export default withBlockExtensions(View);

package/src/components/manage/Blocks/HabitatsBanner/index.js

@@ -1,6 +1,7 @@
 import worldSVG from '@plone/volto/icons/world.svg';
 import Edit from './Edit';
 import View from './View';
+import DefaultVariation from './variations/Default';
 
 export default function applyConfig(config) {
   config.blocks.blocksConfig.habitats_banner = {
@@ -19,6 +20,14 @@ export default function applyConfig(config) {
       view: [],
     },
     blockHasOwnFocusManagement: false,
+    variations: [
+      {
+        id: 'default',
+        title: 'Default',
+        isDefault: true,
+        template: DefaultVariation,
+      },
+    ],
   };
   return config;
 }

package/src/components/manage/Blocks/HabitatsBanner/variations/Default.jsx

@@ -0,0 +1,208 @@
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
+import { connectToMultipleProviders } from '@eeacms/volto-datablocks/hocs';
+import { replaceQueryParam, priorityLabels } from '@eeacms/volto-n2k/helpers';
+import arrowLeft from '@eeacms/volto-n2k/icons/arrow-left.svg';
+import arrowRight from '@eeacms/volto-n2k/icons/arrow-right.svg';
+import loadable from '@loadable/component';
+import { Icon } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import cx from 'classnames';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { compose } from 'redux';
+
+import 'swiper/css';
+import './style.less';
+
+const SwiperLoader = loadable.lib(() => import('swiper'));
+const SwiperReactLoader = loadable.lib(() => import('swiper/react'));
+
+const getSource = (source) => {
+  let parsedSource = replaceQueryParam(source, 'x', 800);
+  parsedSource = replaceQueryParam(parsedSource, 'y', 800);
+
+  return parsedSource;
+};
+
+const Default = (props) => {
+  const swiperEl = useRef();
+  const previewEl = useRef();
+  const [activeSlide, setActiveSlide] = useState(0);
+
+  const habitat_provider = useMemo(
+    () => flattenToAppURL(props.data.habitat_provider),
+    [props.data.habitat_provider],
+  );
+  const habitat_pictures_provider = useMemo(
+    () => flattenToAppURL(props.data.habitat_pictures_provider),
+    [props.data.habitat_pictures_provider],
+  );
+
+  const habitat = useMemo(
+    () => props.providers_data?.[habitat_provider] || {},
+    [props.providers_data, habitat_provider],
+  );
+  const habitat_pictures = useMemo(
+    () => props.providers_data?.[habitat_pictures_provider] || {},
+    [props.providers_data, habitat_pictures_provider],
+  );
+
+  const {
+    code_2000 = [],
+    scientific_name = [],
+    habitat_prioriy = [],
+  } = habitat;
+  const { attribution_copyright = [] } = habitat_pictures;
+
+  const priorityLabel = useMemo(() => {
+    const priority = habitat_prioriy[0];
+
+    return priorityLabels.habitat_prioriy[priority] ?? '';
+  }, [habitat_prioriy]);
+
+  const pictures = useMemo(
+    () => habitat_pictures?.['WebURL'] || [],
+    [habitat_pictures],
+  );
+  const pictures_length = useMemo(
+    () => pictures.filter((picture) => !!picture)?.length,
+    [pictures],
+  );
+
+  const handleSliderPrevious = useCallback(() => {
+    swiperEl.current.slidePrev();
+    if (previewEl.current?.[0]) {
+      previewEl.current[0].slidePrev();
+    }
+    if (previewEl.current?.[1]) {
+      previewEl.current[1].slidePrev();
+    }
+    setActiveSlide(swiperEl.current.realIndex);
+  }, []);
+
+  const handleSliderNext = useCallback(() => {
+    swiperEl.current.slideNext();
+    if (previewEl.current?.[0]) {
+      previewEl.current[0].slideNext();
+    }
+    if (previewEl.current?.[1]) {
+      previewEl.current[1].slideNext();
+    }
+    setActiveSlide(swiperEl.current.realIndex);
+  }, []);
+
+  if (!habitat_provider && props.mode === 'edit') {
+    return 'Habitat banner block, habitat provider undefined';
+  }
+  if (!habitat_pictures_provider && props.mode === 'edit') {
+    return 'Habitat banner block, habitat pictures provider undefined';
+  }
+
+  return (
+    <div className="habitat-banner-details">
+      <div className="habitat-details">
+        <div className="habitat-metadata">
+          <h2 className="name">{scientific_name[0]}</h2>
+          <p className="info">
+            Habitats Directive Annex I code&nbsp;&nbsp;&nbsp;{code_2000[0]}
+          </p>
+          <p className="info" style={{ marginTop: '1rem' }}>
+            {priorityLabel}
+          </p>
+        </div>
+        {pictures_length > 0 && (
+          <div className={cx('carousel one-slide')}>
+            <div
+              className={cx('arrows', { 'arrows-hidden': pictures_length < 2 })}
+            >
+              {pictures_length > 1 && (
+                <>
+                  <button
+                    className="swiper-button image-swiper-button-prev"
+                    onClick={handleSliderPrevious}
+                  >
+                    <Icon
+                      className="icon-left"
+                      color="#000"
+                      name={arrowLeft}
+                      size="32px"
+                    />
+                  </button>
+                  <button
+                    className="swiper-button image-swiper-button-next"
+                    onClick={handleSliderNext}
+                  >
+                    <Icon
+                      className="icon-right"
+                      color="#000"
+                      name={arrowRight}
+                      size="32px"
+                    />
+                  </button>
+                </>
+              )}
+              {!!attribution_copyright[activeSlide] && (
+                <p title={attribution_copyright[activeSlide]}>
+                  {attribution_copyright[activeSlide]}
+                </p>
+              )}
+            </div>
+            {__CLIENT__ && (
+              <SwiperLoader>
+                {() => {
+                  return (
+                    <SwiperReactLoader>
+                      {({ Swiper, SwiperSlide }) => {
+                        return (
+                          <>
+                            <Swiper
+                              loop={true}
+                              allowTouchMove={false}
+                              initialSlide={0}
+                              slidesPerView={1}
+                              spaceBetween={0}
+                              onBeforeInit={(swiper) => {
+                                swiperEl.current = swiper;
+                              }}
+                            >
+                              {pictures.map((source, index) => (
+                                <SwiperSlide key={source}>
+                                  <img
+                                    src={getSource(source)}
+                                    alt={pictures[index]}
+                                  />
+                                </SwiperSlide>
+                              ))}
+                            </Swiper>
+                          </>
+                        );
+                      }}
+                    </SwiperReactLoader>
+                  );
+                }}
+              </SwiperLoader>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const ViewCompose = compose(
+  connectToMultipleProviders((props) => ({
+    providers: [
+      {
+        provider_url: props.data?.habitat_provider,
+      },
+      { provider_url: props.data?.habitat_pictures_provider },
+    ],
+  })),
+)(Default);
+
+export default function View(props) {
+  return (
+    <VisibilitySensor Placeholder={() => <div>loading....&nbsp;</div>}>
+      <ViewCompose {...props} />
+    </VisibilitySensor>
+  );
+}

package/src/components/manage/Blocks/TilesImages/index.js

@@ -1,5 +1,6 @@
 import TilesImagesEdit from './Edit';
 import ImageGallery from './variations/ImageGallery/ImageGallery';
+import DataConnectedImageGallery from './variations/DataConnectedImageGallery/ImageGallery';
 import DefaultView from './variations/Default/Default';
 import TilesImagesView from './View';
 import worldSVG from '@plone/volto/icons/world.svg';
@@ -33,7 +34,53 @@ export default function applyConfig(config) {
         title: 'ImageGallery',
         template: ImageGallery,
       },
+      {
+        id: 'dataConnectedImageGallery',
+        isDefault: false,
+        title: 'Data Connected ImageGallery',
+        template: DataConnectedImageGallery,
+        schemaEnhancer: ({ schema, intl, formData }) => {
+          schema.fieldsets = schema.fieldsets.map((fieldset) =>
+            fieldset.id === 'default'
+              ? {
+                  ...fieldset,
+                  fields: fieldset.fields.filter((field) => field !== 'theme'),
+                }
+              : fieldset,
+          );
+          schema.fieldsets.push({
+            id: 'data_query',
+            title: 'Data query',
+            fields: [
+              'has_data_query_by_context',
+              'has_data_query_by_provider',
+              'data_query',
+            ],
+          });
+          schema.properties.images.widget = 'url';
+          schema.properties.has_data_query_by_context = {
+            title: 'Has data_query by context',
+            type: 'boolean',
+            description:
+              'This flag will denote whether or not the connector will be filtered by data_query applied on the page',
+            defaultValue: true,
+          };
+          schema.properties.has_data_query_by_provider = {
+            title: 'Has data_query by provider',
+            type: 'boolean',
+            description:
+              'This flag will denote whether or not the connector will be filtered by data_query applied on the connector itself',
+            defaultValue: true,
+          };
+          schema.properties.data_query = {
+            title: 'Data query',
+            widget: 'data_query',
+          };
+          return schema;
+        },
+      },
     ],
   };
+
   return config;
 }

package/src/components/manage/Blocks/TilesImages/variations/DataConnectedImageGallery/ImageGallery.jsx

@@ -0,0 +1,172 @@
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
+import { connectToMultipleProviders } from '@eeacms/volto-datablocks/hocs';
+import { replaceQueryParam } from '@eeacms/volto-n2k/helpers';
+import arrowLeft from '@eeacms/volto-n2k/icons/arrow-left.svg';
+import arrowRight from '@eeacms/volto-n2k/icons/arrow-right.svg';
+import loadable from '@loadable/component';
+import { Icon } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import cx from 'classnames';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { compose } from 'redux';
+
+import 'swiper/css';
+import './style.less';
+
+const SwiperLoader = loadable.lib(() => import('swiper'));
+const SwiperReactLoader = loadable.lib(() => import('swiper/react'));
+
+const getSource = (source) => {
+  let parsedSource = replaceQueryParam(source, 'x', 800);
+  parsedSource = replaceQueryParam(parsedSource, 'y', 800);
+
+  return parsedSource;
+};
+
+const RedHabitats = (props) => {
+  const swiperEl = useRef();
+  const previewEl = useRef();
+  const [activeSlide, setActiveSlide] = useState(0);
+
+  const habitat_pictures_provider = useMemo(
+    () => flattenToAppURL(props.data.images),
+    [props.data.images],
+  );
+
+  const habitat_pictures = useMemo(
+    () => props.providers_data?.[habitat_pictures_provider] || {},
+    [props.providers_data, habitat_pictures_provider],
+  );
+
+  const { attribution_copyright = [] } = habitat_pictures;
+
+  const pictures = useMemo(
+    () => habitat_pictures?.['WebURL'] || [],
+    [habitat_pictures],
+  );
+  const pictures_length = useMemo(
+    () => pictures.filter((picture) => !!picture)?.length,
+    [pictures],
+  );
+
+  const handleSliderPrevious = useCallback(() => {
+    swiperEl.current.slidePrev();
+    if (previewEl.current?.[0]) {
+      previewEl.current[0].slidePrev();
+    }
+    if (previewEl.current?.[1]) {
+      previewEl.current[1].slidePrev();
+    }
+    setActiveSlide(swiperEl.current.realIndex);
+  }, []);
+
+  const handleSliderNext = useCallback(() => {
+    swiperEl.current.slideNext();
+    if (previewEl.current?.[0]) {
+      previewEl.current[0].slideNext();
+    }
+    if (previewEl.current?.[1]) {
+      previewEl.current[1].slideNext();
+    }
+    setActiveSlide(swiperEl.current.realIndex);
+  }, []);
+
+  if (!habitat_pictures_provider && props.mode === 'edit') {
+    return ' habitat pictures provider undefined';
+  }
+
+  return (
+    <div className="habitat-banner-details">
+      <div className="habitat-details">
+        {pictures_length > 0 && (
+          <div className={cx('carousel one-slide')}>
+            <div
+              className={cx('arrows', { 'arrows-hidden': pictures_length < 2 })}
+            >
+              {pictures_length > 1 && (
+                <>
+                  <button
+                    className="swiper-button image-swiper-button-prev"
+                    onClick={handleSliderPrevious}
+                  >
+                    <Icon
+                      className="icon-left"
+                      color="#000"
+                      name={arrowLeft}
+                      size="32px"
+                    />
+                  </button>
+                  <button
+                    className="swiper-button image-swiper-button-next"
+                    onClick={handleSliderNext}
+                  >
+                    <Icon
+                      className="icon-right"
+                      color="#000"
+                      name={arrowRight}
+                      size="32px"
+                    />
+                  </button>
+                </>
+              )}
+              {!!attribution_copyright[activeSlide] && (
+                <p title={attribution_copyright[activeSlide]}>
+                  {attribution_copyright[activeSlide]}
+                </p>
+              )}
+            </div>
+            {__CLIENT__ && (
+              <SwiperLoader>
+                {() => {
+                  return (
+                    <SwiperReactLoader>
+                      {({ Swiper, SwiperSlide }) => {
+                        return (
+                          <>
+                            <Swiper
+                              loop={true}
+                              allowTouchMove={false}
+                              initialSlide={0}
+                              slidesPerView={1}
+                              spaceBetween={0}
+                              onBeforeInit={(swiper) => {
+                                swiperEl.current = swiper;
+                              }}
+                            >
+                              {pictures.map((source, index) => (
+                                <SwiperSlide key={source}>
+                                  <img
+                                    src={getSource(source)}
+                                    alt={pictures[index]}
+                                  />
+                                </SwiperSlide>
+                              ))}
+                            </Swiper>
+                          </>
+                        );
+                      }}
+                    </SwiperReactLoader>
+                  );
+                }}
+              </SwiperLoader>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const ViewCompose = compose(
+  connectToMultipleProviders((props) => ({
+    providers: [{ provider_url: props.data?.images }],
+  })),
+)(RedHabitats);
+
+export default function View(props) {
+  return (
+    <VisibilitySensor Placeholder={() => <div>loading....&nbsp;</div>}>
+      <ViewCompose {...props} />
+    </VisibilitySensor>
+  );
+}

package/src/components/manage/Blocks/TilesImages/variations/DataConnectedImageGallery/style.less

@@ -0,0 +1,248 @@
+@type: extra;
+@element: custom;
+
+@import (multiple, reference, optional) '../../theme.config';
+
+@{view} {
+  .habitat-banner-details {
+    &::before {
+      .full-width();
+      position: absolute;
+      z-index: -1;
+    }
+
+    .carousel {
+      .half-width(960px);
+
+      @media @mobile {
+        width: calc(@pageFullWidth - 2rem) !important;
+      }
+    }
+  }
+}
+
+@{edit} {
+  .habitat-banner-details {
+    &::before {
+      .full-width-edit();
+      position: absolute;
+      z-index: -1;
+    }
+
+    .carousel {
+      .half-width-edit(960px);
+
+      @media @mobile {
+        width: calc(@pageFullWidthEdit - 2rem) !important;
+      }
+    }
+  }
+}
+
+div#view .habitat-banner-details .ui.container > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.habitat-banner-details {
+  position: relative;
+  padding: 0;
+  margin-bottom: 1rem;
+  color: #fff !important;
+  font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+
+  &::before {
+    display: block;
+    height: 100%;
+    background-color: transparent;
+    content: '';
+  }
+
+  .habitat-details {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .habitat-metadata {
+      display: flex;
+      width: 50%;
+      height: 320px !important;
+      flex: 0 0 50%;
+      flex-direction: column;
+      justify-content: center;
+      word-wrap: break-word;
+
+      .name {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+
+        font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        font-size: 40px;
+        line-height: 40px;
+        text-transform: uppercase;
+
+        > * {
+          font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        }
+      }
+
+      .info {
+        margin-bottom: 0;
+      }
+
+      h3 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+      }
+
+      h4 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+      }
+
+      .info,
+      .info > * {
+        font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 18px;
+
+        a {
+          color: #fff;
+
+          &:hover {
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .carousel {
+      display: flex;
+      height: 320px;
+
+      p {
+        font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+      }
+
+      img {
+        width: 100%;
+      }
+
+      &.one-slide .swiper {
+        width: 100%;
+      }
+
+      &.two-slides .swiper {
+        width: 50%;
+
+        @media @mobile {
+          width: 100%;
+
+          &.preview.preview-one {
+            display: none;
+          }
+        }
+      }
+
+      &.three-slides .swiper {
+        width: 33.33%;
+
+        @media @tablet {
+          width: 50%;
+
+          &.preview.preview-two {
+            display: none;
+          }
+        }
+
+        @media @mobile {
+          width: 100%;
+
+          &.preview.preview-two,
+          &.preview.preview-one {
+            display: none;
+          }
+        }
+      }
+
+      .swiper {
+        &.preview .swiper-slide {
+          filter: grayscale(100%);
+        }
+
+        img {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+
+      .arrows {
+        position: absolute;
+        z-index: 2;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        width: 100%;
+        align-items: center;
+
+        button {
+          padding: 0;
+          border: none;
+          margin: 0;
+          background-color: transparent;
+        }
+
+        .icon {
+          display: block;
+          width: 32px;
+          background-color: #fff;
+          cursor: pointer;
+        }
+
+        p {
+          overflow: hidden;
+          width: 100%;
+          padding: 0.25rem 0.25rem 0.25rem 1rem;
+          margin: 0;
+          backdrop-filter: brightness(0.5);
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &:not(.arrows-hidden) {
+          p {
+            width: calc(100% - 64px);
+          }
+        }
+      }
+    }
+
+    @media @mobile {
+      flex-flow: column;
+
+      .habitat-metadata {
+        width: 100%;
+        margin-top: 2rem;
+      }
+
+      .carousel {
+        margin: 0 1rem 1rem 1rem;
+      }
+    }
+  }
+}

package/src/components/manage/Blocks/TilesImages/variations/Default/Default.jsx

@@ -12,42 +12,43 @@ const DefaultView = (props) => {
   return (
     <div className={cx('tiles-images', mode, data.theme || 'light')}>
       {mode === 'edit' && !images.length ? <p>Tiles images block</p> : ''}
-      {images.map((image) => {
-        const { copyright } = image;
-        return (
-          <p
-            key={`tile-${image.title}`}
-            className={cx('p-image', {
-              'with-border': data.hasBorder ?? true,
-              'rounded-border': data.rounded ?? true,
-            })}
-          >
-            <UniversalLink href={image.link || '#'} title={image.title}>
-              <>
-                <img
-                  src={`${image.image}/@@images/image/mini`}
-                  alt={image.title}
-                  style={
-                    data.size
-                      ? { width: `${data.size}px`, height: `${data.size}px` }
-                      : {}
-                  }
-                />
-                <div className={`copyright-wrapper ${'left'}`}>
-                  {copyright ? (
-                    <Copyright copyrightPosition={'left'}>
-                      <Copyright.Icon>@</Copyright.Icon>
-                      <Copyright.Text>{copyright}</Copyright.Text>
-                    </Copyright>
-                  ) : (
-                    ''
-                  )}
-                </div>
-              </>
-            </UniversalLink>
-          </p>
-        );
-      })}
+      {Array.isArray(images) &&
+        images.map((image) => {
+          const { copyright } = image;
+          return (
+            <p
+              key={`tile-${image.title}`}
+              className={cx('p-image', {
+                'with-border': data.hasBorder ?? true,
+                'rounded-border': data.rounded ?? true,
+              })}
+            >
+              <UniversalLink href={image.link || '#'} title={image.title}>
+                <>
+                  <img
+                    src={`${image.image}/@@images/image/mini`}
+                    alt={image.title}
+                    style={
+                      data.size
+                        ? { width: `${data.size}px`, height: `${data.size}px` }
+                        : {}
+                    }
+                  />
+                  <div className={`copyright-wrapper ${'left'}`}>
+                    {copyright ? (
+                      <Copyright copyrightPosition={'left'}>
+                        <Copyright.Icon>@</Copyright.Icon>
+                        <Copyright.Text>{copyright}</Copyright.Text>
+                      </Copyright>
+                    ) : (
+                      ''
+                    )}
+                  </div>
+                </>
+              </UniversalLink>
+            </p>
+          );
+        })}
     </div>
   );
 };