@eeacms/volto-n2k 1.1.12 → 1.2.1

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.1](https://github.com/eea/volto-n2k/compare/1.2.0...1.2.1) - 3 February 2026
+
+#### :bug: Bug Fixes
+
+- fix: edit style [nileshgulia1 - [`a823420`](https://github.com/eea/volto-n2k/commit/a823420dfc8cd6fc4421d2888028faaf25d2fffa)]
+
+### [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.1.12",
+  "version": "1.2.1",
   "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

@@ -1,15 +1,20 @@
-const imageSchema = {
+const imageSchema = ({ formData }) => ({
   title: 'Image',
   fieldsets: [
     {
       id: 'default',
       title: 'Default',
-      fields: ['image', 'link', 'title'],
+      fields: [
+        'image',
+        ...(formData?.variation !== 'imageGallery' ? ['link'] : []),
+        'title',
+        'copyright',
+      ],
     },
   ],
   properties: {
     image: {
-      title: 'image',
+      title: 'Image',
       widget: 'object_by_path',
     },
     link: {
@@ -19,11 +24,14 @@ const imageSchema = {
     title: {
       title: 'Title',
     },
+    copyright: {
+      title: 'Copyright',
+    },
   },
-  required: ['url', 'title'],
-};
+  required: [],
+});
 
-export default function getSchema() {
+export default function getSchema({ formData }) {
   return {
     title: 'Tiles images',
     fieldsets: [
@@ -32,11 +40,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: {
@@ -65,7 +77,7 @@ export default function getSchema() {
       images: {
         title: 'Images',
         widget: 'object_list',
-        schema: imageSchema,
+        schema: imageSchema({ formData }),
       },
     },
     required: [],

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,108 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import { Modal, Image } from 'semantic-ui-react';
+import cx from 'classnames';
+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={cx('preview-image', {
+            'image-gallery-preview': mode === 'edit',
+          })}
+        />
+      </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,21 @@
+.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 */
+  }
+}
+
+.image-gallery-preview {
+  width: auto !important;
+}