@eeacms/volto-n2k 1.1.12 → 1.2.0

package/CHANGELOG.md

@@ -4,6 +4,16 @@ 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.0](https://github.com/eea/volto-n2k/compare/1.1.12...1.2.0) - 3 February 2026
+
+#### :rocket: New Features
+
+- feat: add new variation for ImageGallery for Case Studies CT [nileshgulia1 - [`48173c5`](https://github.com/eea/volto-n2k/commit/48173c5626b94597e57af236ecb14a55383f63b1)]
+- feat: add copyright text to tiles images refs-296409 [nileshgulia1 - [`614187b`](https://github.com/eea/volto-n2k/commit/614187b2d5c2cffcb1e2bf74ca72e88b2886520d)]
+
+#### :hammer_and_wrench: Others
+
+- bump v1.2.0 [nileshgulia1 - [`f94e2ff`](https://github.com/eea/volto-n2k/commit/f94e2ff9b244c126dff1930dcef265567712f4bc)]
 ### [1.1.12](https://github.com/eea/volto-n2k/compare/1.1.11...1.1.12) - 27 January 2026
 
 #### :hammer_and_wrench: Others
@@ -141,7 +151,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)]
 
@@ -156,11 +165,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
@@ -417,7 +421,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.1.12",
+  "version": "1.2.0",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/TilesImages/Edit.jsx

@@ -1,19 +1,18 @@
 import React from 'react';
 import { SidebarPortal } from '@plone/volto/components';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import TilesImagesView from './View';
 import getSchema from './schema';
-import './styles.less';
 
 const Edit = (props) => {
-  const { selected = false } = props;
-  const schema = getSchema();
+  const { selected = false, data = {} } = props;
+  const schema = getSchema({ formData: data });
 
   return (
     <>
       <TilesImagesView {...props} mode="edit" />
       <SidebarPortal selected={selected}>
-        <InlineForm
+        <BlockDataForm
           schema={schema}
           title={schema.title}
           onChangeField={(id, value) => {
@@ -22,6 +21,8 @@ const Edit = (props) => {
               [id]: value,
             });
           }}
+          onChangeBlock={props.onChangeBlock}
+          block={props.block}
           formData={props.data}
         />
       </SidebarPortal>

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

@@ -1,38 +1,16 @@
 import React from 'react';
-import { UniversalLink } from '@plone/volto/components';
-import cx from 'classnames';
-import './styles.less';
+import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
+import config from '@plone/volto/registry';
 
 const View = (props) => {
-  const { data = {}, mode = 'view' } = props;
-  const images = data.images || [];
+  const { mode = 'view', variation } = props;
 
-  return (
-    <div className={cx('tiles-images', mode, data.theme || 'light')}>
-      {mode === 'edit' && !images.length ? <p>Tiles images block</p> : ''}
-      {images.map((image) => (
-        <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` }
-                  : {}
-              }
-            />
-          </UniversalLink>
-        </p>
-      ))}
-    </div>
-  );
+  const variations =
+    config.blocks?.blocksConfig['tiles_images']?.variations || [];
+  const defaultVariation = variations.filter((item) => item.isDefault)?.[0];
+  const Template = variation?.template ?? defaultVariation?.template ?? null;
+
+  return <Template {...props} mode={mode} />;
 };
 
-export default View;
+export default withBlockExtensions(View);

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

@@ -1,4 +1,6 @@
 import TilesImagesEdit from './Edit';
+import ImageGallery from './variations/ImageGallery/ImageGallery';
+import DefaultView from './variations/Default/Default';
 import TilesImagesView from './View';
 import worldSVG from '@plone/volto/icons/world.svg';
 
@@ -18,6 +20,20 @@ export default function applyConfig(config) {
       addPermission: [],
       view: [],
     },
+    variations: [
+      {
+        id: 'default',
+        isDefault: true,
+        title: 'Default',
+        template: DefaultView,
+      },
+      {
+        id: 'imageGallery',
+        isDefault: false,
+        title: 'ImageGallery',
+        template: ImageGallery,
+      },
+    ],
   };
   return config;
 }

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

@@ -4,7 +4,7 @@ const imageSchema = {
     {
       id: 'default',
       title: 'Default',
-      fields: ['image', 'link', 'title'],
+      fields: ['image', 'link', 'title', 'copyright'],
     },
   ],
   properties: {
@@ -19,11 +19,14 @@ const imageSchema = {
     title: {
       title: 'Title',
     },
+    copyright: {
+      title: 'Copyright',
+    },
   },
   required: ['url', 'title'],
 };
 
-export default function getSchema() {
+export default function getSchema({ formData }) {
   return {
     title: 'Tiles images',
     fieldsets: [
@@ -32,11 +35,15 @@ export default function getSchema() {
         title: 'Default',
         fields: ['theme', 'images'],
       },
-      {
-        id: 'advanced',
-        title: 'Advanced',
-        fields: ['size', 'hasBorder', 'rounded'],
-      },
+      ...(formData?.variation === 'default'
+        ? [
+            {
+              id: 'advanced',
+              title: 'Advanced',
+              fields: ['size', 'hasBorder', 'rounded'],
+            },
+          ]
+        : []),
     ],
     properties: {
       size: {

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+Copyright.propTypes = {
+  copyrightPosition: PropTypes.oneOf(['left', 'right']),
+};
+
+function Copyright({ children, ...rest }) {
+  return (
+    <div className={`eea copyright ${rest.copyrightPosition}`}>
+      <div className={'wrapper'}>{children}</div>
+    </div>
+  );
+}
+
+Copyright.Prefix = ({ children, ...rest }) =>
+  children ? (
+    <span {...rest} className={'icon-prefix'}>
+      {children}
+    </span>
+  ) : (
+    ''
+  );
+
+Copyright.Icon = ({ children, ...rest }) => (
+  <span {...rest} className={'icon-wrapper'}>
+    {children}
+  </span>
+);
+
+Copyright.Text = ({ children, ...rest }) => (
+  <span {...rest} className={'icon-content'}>
+    {children}
+  </span>
+);
+export default Copyright;

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { UniversalLink } from '@plone/volto/components';
+import cx from 'classnames';
+import './styles.less';
+import Copyright from './Copyright';
+
+const DefaultView = (props) => {
+  const { mode = 'view', data = {} } = props;
+
+  const images = data.images || [];
+
+  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>
+        );
+      })}
+    </div>
+  );
+};
+
+export default DefaultView;

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import { Modal, Image } from 'semantic-ui-react';
+
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
+import './styles.less';
+
+const Slider = loadable(() => import('react-slick'));
+
+const ImageGallery = (props) => {
+  const { data = {}, mode } = props;
+  const items = data.images || [];
+  const [open, setOpen] = React.useState(false);
+  const [slideIndex, setSlideIndex] = React.useState(0);
+
+  const [updateCount, setUpdateCount] = React.useState(0);
+  const sliderRef = React.useRef(null);
+
+  const carouselSettings = React.useMemo(
+    () => ({
+      afterChange: () => setUpdateCount(updateCount + 1),
+      beforeChange: (current, next) => setSlideIndex(next),
+      infinite: true,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      dots: false,
+      arrows: true,
+      adaptiveHeight: true,
+      autoplay: false,
+      fade: false,
+      useTransform: false,
+      initialSlide: slideIndex,
+    }),
+    [slideIndex, setSlideIndex, updateCount],
+  );
+
+  const handleClick = () => {
+    if (items.length) {
+      setSlideIndex(0);
+      setOpen(true);
+    }
+  };
+
+  const image = items[slideIndex];
+
+  return (
+    <div className="image-gallery">
+      <div
+        tabIndex={0}
+        role="button"
+        onKeyDown={handleClick}
+        onClick={handleClick}
+      >
+        <Image
+          src={`${items[0]?.image}/@@images/image/preview`}
+          alt={items[0]?.title}
+          className="preview-image"
+        />
+      </div>
+      {mode === 'view' ? (
+        <Modal
+          closeIcon
+          open={open}
+          className="slider-modal"
+          onClose={() => setOpen(false)}
+          onOpen={() => setOpen(true)}
+        >
+          <Modal.Content>
+            <h3>{image?.title}</h3>
+            <p>{image?.description}</p>
+            <Slider {...carouselSettings} ref={sliderRef}>
+              {items.map((item, i) => {
+                return item.copyright ? (
+                  <div key={i}>
+                    <div className="image-slide">
+                      <div className="image-rights">@ {item.copyright}</div>
+                      <Image
+                        src={`${item.image}/@@images/image/larger`}
+                        alt={item?.title}
+                      />
+                    </div>
+                  </div>
+                ) : (
+                  <Image
+                    key={i}
+                    src={`${item.image}/@@images/image/larger`}
+                    alt={item?.title}
+                  />
+                );
+              })}
+            </Slider>
+            <div className="slide-image-count">
+              <strong>{slideIndex + 1}</strong> of {items.length}
+            </div>
+          </Modal.Content>
+        </Modal>
+      ) : (
+        <p>Save the block to preview the Image Gallery Carousel.</p>
+      )}
+    </div>
+  );
+};
+
+export default ImageGallery;

package/src/components/manage/Blocks/TilesImages/variations/ImageGallery/styles.less

@@ -0,0 +1,17 @@
+.image-slide {
+  position: relative;
+  display: inline-block;
+
+  .image-rights {
+    position: absolute;
+    z-index: 100;
+    right: 0em;
+    bottom: 0em;
+    left: 0em;
+    padding: 10px;
+    // background: rgba(0, 0, 0, 0.5); /* optional: semi-transparent background */
+    color: white; /* text color */
+    font-size: 14px; /* adjust font size as needed */
+    text-align: left; /* optional: center the text */
+  }
+}