@eeacms/volto-cca-policy 1.0.17 → 1.0.18

package/CHANGELOG.md

@@ -4,6 +4,15 @@ 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.0.18](https://github.com/eea/volto-cca-policy/compare/1.0.17...1.0.18) - 10 September 2026
+
+#### :rocket: New Features
+
+- feat: implement ToolThumbnail component and integrate it across various views [kreafox - [`edd3087`](https://github.com/eea/volto-cca-policy/commit/edd3087830076efa968ef42d1ec99efa42010cd5)]
+
+#### :hammer_and_wrench: Others
+
+- test: update image display style assertions in tests for NavigatorCatalogueCardItem and ToolThumbnail components [kreafox - [`24e1437`](https://github.com/eea/volto-cca-policy/commit/24e14375674dca5e73d8919eb4578d1c184db21a)]
 ### [1.0.17](https://github.com/eea/volto-cca-policy/compare/1.0.16...1.0.17) - 8 September 2026
 
 #### :rocket: New Features

package/package.json

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

package/src/components/Search/NavigatorCatalogue/NavigatorCatalogueCardItem.jsx

@@ -3,6 +3,8 @@ import { Checkbox, Icon, Popup } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import ExternalLink from '@eeacms/search/components/Result/ExternalLink';
 import ResultContext from '@eeacms/search/components/Result/ResultContext';
+import ToolThumbnail from '../../theme/ToolThumbnail/ToolThumbnail';
+import { getToolThumbnailUrl } from '../../theme/ToolThumbnail/utils';
 import {
   getCompareToolTitle,
   getCompareToolUid,
@@ -136,6 +138,7 @@ const NavigatorCatalogueCardItem = (props) => {
     uid: getCompareToolUid(result),
     title: getCompareToolTitle(result),
     href: result.href,
+    image: getToolThumbnailUrl(result),
   };
   const { isSelected, isLimitReached, setSelected } =
     useCompareTools(compareTool);
@@ -146,9 +149,7 @@ const NavigatorCatalogueCardItem = (props) => {
 
   return (
     <div className={`navigator-catalogue-item${isSelected ? ' selected' : ''}`}>
-      <div className="navigator-tool-icon large" aria-hidden="true">
-        <Icon className="ri-file-line" />
-      </div>
+      <ToolThumbnail result={result} size="large" />
 
       <div className="catalogue-item-main">
         <div className="catalogue-item-top">

package/src/components/Search/NavigatorCatalogue/NavigatorCatalogueCardItem.test.jsx

@@ -76,6 +76,7 @@ describe('NavigatorCatalogueCardItem', () => {
       cca_uid: { raw: 'tool-uid' },
       title: 'Climate planning tool',
       href: 'https://example.com/tool',
+      image: '/uploaded-tool-thumb.jpg',
       publication_date: { raw: '2026-07-24' },
       cca_adaptation_sectors: {
         raw: ['Agriculture', 'Water', 'Health', 'Energy'],
@@ -138,6 +139,7 @@ describe('NavigatorCatalogueCardItem', () => {
       uid: 'tool-uid',
       title: 'Climate planning tool',
       href: 'https://example.com/tool',
+      image: '/uploaded-tool-thumb.jpg',
     });
   });
 
@@ -170,4 +172,65 @@ describe('NavigatorCatalogueCardItem', () => {
     expect(screen.getByText('Water')).toBeInTheDocument();
     expect(screen.queryByText('License:')).not.toBeInTheDocument();
   });
+
+  describe('thumbnail rendering and fallback', () => {
+    it('renders thumbnail image and smoothly transitions from placeholder on load', () => {
+      const { container } = renderCard({
+        title: 'Tool with image',
+        href: '/tools/my-tool',
+        image: { scales: { thumb: { download: '/uploaded-thumb.jpg' } } },
+      });
+
+      const img = container.querySelector('.navigator-tool-icon img');
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute('src', '/uploaded-thumb.jpg');
+      expect(img.parentElement).toHaveClass('navigator-tool-icon', 'large');
+      expect(img).toHaveStyle({ display: 'none' });
+      expect(
+        container.querySelector('.navigator-tool-icon .ri-file-line'),
+      ).toBeInTheDocument();
+
+      // Fire load event on image
+      fireEvent.load(img);
+
+      expect(img.style.display).toBe('');
+      expect(
+        container.querySelector('.navigator-tool-icon .ri-file-line'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('falls back to placeholder icon when image fails to load', () => {
+      const { container } = renderCard({
+        title: 'Tool with broken image',
+        href: '/tools/broken-tool',
+      });
+
+      const img = container.querySelector('.navigator-tool-icon img');
+      expect(img).toBeInTheDocument();
+
+      // Fire error event on image (e.g. 404 from backend)
+      fireEvent.error(img);
+
+      expect(
+        container.querySelector('.navigator-tool-icon img'),
+      ).not.toBeInTheDocument();
+      expect(
+        container.querySelector('.navigator-tool-icon .ri-file-line'),
+      ).toBeInTheDocument();
+    });
+
+    it('renders placeholder icon directly when item has no image or href', () => {
+      const { container } = renderCard({
+        title: 'Tool without image',
+        image: null,
+      });
+
+      expect(
+        container.querySelector('.navigator-tool-icon img'),
+      ).not.toBeInTheDocument();
+      expect(
+        container.querySelector('.navigator-tool-icon .ri-file-line'),
+      ).toBeInTheDocument();
+    });
+  });
 });

package/src/components/Search/NavigatorGuide/NavigatorGuideContentView.jsx

@@ -6,6 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Button, Checkbox, Icon, Loader, Message } from 'semantic-ui-react';
 import URLManager from '@elastic/search-ui/lib/cjs/URLManager';
 import { useSearchContext } from '@eeacms/search/lib/hocs';
+import ToolThumbnail from '../../theme/ToolThumbnail/ToolThumbnail';
 import guideSteps from '../../../search/navigator_guide/guideSteps';
 import { navigatorGuideStepAtom } from '../../../state';
 import { mergeGuideOptions } from './utils';
@@ -350,12 +351,10 @@ const NavigatorGuideContentView = ({ appConfig }) => {
                       className="navigator-guide-preview-result"
                       key={result._original?._id || result.href}
                     >
-                      <div
-                        className="navigator-tool-icon medium"
-                        aria-hidden="true"
-                      >
-                        <Icon className="ri-stack-line" />
-                      </div>
+                      <ToolThumbnail
+                        result={result}
+                        fallbackIcon="ri-stack-line"
+                      />
                       <div className="navigator-guide-preview-result-content">
                         <small
                           className="navigator-tool-provider"

package/src/components/Search/NavigatorGuide/NavigatorGuideContentView.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { useAtom } from 'jotai';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { useSearchContext } from '@eeacms/search/lib/hocs';
+import NavigatorGuideContentView from './NavigatorGuideContentView';
+import useGuideFacetOptions from './useGuideFacetOptions';
+
+jest.mock('jotai', () => ({
+  ...jest.requireActual('jotai'),
+  useAtom: jest.fn(),
+}));
+jest.mock('react-redux', () => ({ useSelector: jest.fn() }));
+jest.mock('react-router-dom', () => ({ useHistory: jest.fn() }));
+jest.mock('@eeacms/search/lib/hocs', () => ({ useSearchContext: jest.fn() }));
+jest.mock('./useGuideFacetOptions', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const renderGuide = (result) => {
+  useSearchContext.mockReturnValue({
+    filters: [{ field: 'cca_adaptation_sectors.keyword', values: ['Water'] }],
+    facets: {},
+    results: [result],
+    totalResults: 1,
+    isLoading: false,
+  });
+  return render(
+    <IntlProvider locale="en">
+      <NavigatorGuideContentView appConfig={{ previewResultsLimit: 3 }} />
+    </IntlProvider>,
+  );
+};
+
+describe('NavigatorGuideContentView thumbnails', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useAtom.mockReturnValue([0, jest.fn()]);
+    useSelector.mockReturnValue('en');
+    useHistory.mockReturnValue({ push: jest.fn() });
+    useGuideFacetOptions.mockReturnValue({});
+  });
+
+  it('shows the uploaded result image after loading, with a stack icon while loading', () => {
+    const { container } = renderGuide({
+      title: 'Guide tool',
+      href: '/tools/guide-tool',
+      image: { scales: { thumb: { download: '/uploaded-guide-thumb.jpg' } } },
+    });
+    const thumbnail = container.querySelector('.navigator-tool-icon');
+    const img = thumbnail.querySelector('img');
+
+    expect(thumbnail).toHaveClass('medium');
+    expect(thumbnail).toHaveAttribute('aria-hidden', 'true');
+    expect(img).toHaveAttribute('src', '/uploaded-guide-thumb.jpg');
+    expect(img).toHaveStyle({ display: 'none' });
+    expect(thumbnail.querySelector('.ri-stack-line')).toBeInTheDocument();
+
+    fireEvent.load(img);
+
+    expect(img).not.toHaveStyle({ display: 'none' });
+    expect(thumbnail.querySelector('.ri-stack-line')).not.toBeInTheDocument();
+  });
+
+  it('falls back to the stack icon when the image fails', () => {
+    const { container } = renderGuide({
+      title: 'Guide tool',
+      href: '/tools/guide-tool',
+      image: '/broken.jpg',
+    });
+    const thumbnail = container.querySelector('.navigator-tool-icon');
+
+    fireEvent.error(thumbnail.querySelector('img'));
+
+    expect(thumbnail.querySelector('img')).not.toBeInTheDocument();
+    expect(thumbnail.querySelector('.ri-stack-line')).toBeInTheDocument();
+  });
+
+  it.each([null, false])('shows the stack icon for image: %s', (image) => {
+    const { container } = renderGuide({
+      title: 'Guide tool',
+      href: '/tools/guide-tool',
+      image,
+    });
+    const thumbnail = container.querySelector('.navigator-tool-icon');
+
+    expect(thumbnail.querySelector('img')).not.toBeInTheDocument();
+    expect(thumbnail.querySelector('.ri-stack-line')).toBeInTheDocument();
+  });
+});

package/src/components/theme/CompareTools/CompareToolsPanel.jsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { Icon, Button } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
+import ToolThumbnail from '../ToolThumbnail/ToolThumbnail';
 import {
   MAX_COMPARE_TOOLS,
   compareToolsAtom,
@@ -89,9 +90,7 @@ export const CompareToolsPanel = () => {
         <div className="compare-panel-tools">
           {effectiveSelectedTools.map((tool) => (
             <div key={tool.uid} className="compare-panel-tool">
-              <span className="navigator-tool-icon small" aria-hidden="true">
-                <Icon className="ri-file-line" />
-              </span>
+              <ToolThumbnail result={tool} size="small" />
               <span className="compare-panel-tool-title">{tool.title}</span>
               <Button
                 className="compare-panel-tool-clear"

package/src/components/theme/CompareTools/CompareToolsPanel.test.jsx

@@ -101,4 +101,58 @@ describe('CompareToolsPanel', () => {
     fireEvent.click(screen.getByText('Clear all'));
     expect(screen.queryByText('Compare tools')).not.toBeInTheDocument();
   });
+
+  it('shows the selected tool thumbnail after loading and preserves empty slot icons', () => {
+    const { container } = renderPanel([
+      {
+        uid: 'one',
+        title: 'Tool one',
+        href: '/tools/one',
+        image: '/uploaded-tool-thumb.jpg',
+      },
+    ]);
+    const thumbnail = container.querySelector(
+      '.compare-panel-tool:not(.placeholder) .navigator-tool-icon',
+    );
+    const img = thumbnail.querySelector('img');
+
+    expect(thumbnail).toHaveClass('small');
+    expect(img).toHaveAttribute('src', '/uploaded-tool-thumb.jpg');
+    expect(img).toHaveStyle({ display: 'none' });
+    expect(thumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
+    expect(
+      container.querySelectorAll('.placeholder .ri-add-line'),
+    ).toHaveLength(3);
+    expect(container.querySelector('.placeholder img')).not.toBeInTheDocument();
+
+    fireEvent.load(img);
+
+    expect(img).not.toHaveStyle({ display: 'none' });
+    expect(thumbnail.querySelector('.ri-file-line')).not.toBeInTheDocument();
+  });
+
+  it('uses the URL of an older saved selection and falls back on image error', () => {
+    const { container } = renderPanel([
+      { uid: 'one', title: 'Tool one', href: '/tools/one' },
+    ]);
+    const thumbnail = container.querySelector('.navigator-tool-icon');
+    const img = thumbnail.querySelector('img');
+
+    expect(img).toHaveAttribute('src', '/tools/one/@@images/image/thumb');
+
+    fireEvent.error(img);
+
+    expect(thumbnail.querySelector('img')).not.toBeInTheDocument();
+    expect(thumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
+  });
+
+  it.each([null, false])('shows the file icon for image: %s', (image) => {
+    const { container } = renderPanel([
+      { uid: 'one', title: 'Tool one', href: '/tools/one', image },
+    ]);
+    const thumbnail = container.querySelector('.navigator-tool-icon');
+
+    expect(thumbnail.querySelector('img')).not.toBeInTheDocument();
+    expect(thumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
+  });
 });

package/src/components/theme/CompareTools/CompareToolsView.jsx

@@ -17,6 +17,7 @@ import { GET_BREADCRUMBS } from '@plone/volto/constants/ActionTypes';
 import config from '@plone/volto/registry';
 import { defineMessages, useIntl } from 'react-intl';
 import BannerTitle from '../BannerTitle/BannerTitle';
+import ToolThumbnail from '../ToolThumbnail/ToolThumbnail';
 import {
   MAX_COMPARE_TOOLS,
   compareToolsAtom,
@@ -382,12 +383,7 @@ const CompareToolsView = () => {
                   <Table.HeaderCell key={tool.id}>
                     <div className="compare-tool-header">
                       <div className="compare-tool-title-row">
-                        <div
-                          className="navigator-tool-icon medium"
-                          aria-hidden="true"
-                        >
-                          <Icon className="ri-file-line" />
-                        </div>
+                        <ToolThumbnail result={tool.result} />
                         <div className="compare-tool-title" title={tool.title}>
                           {tool.title}
                         </div>

package/src/components/theme/CompareTools/CompareToolsView.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { useAtom } from 'jotai';
 import { useDispatch, useSelector } from 'react-redux';
@@ -56,7 +56,7 @@ jest.mock('./utils', () => ({
   getPathname: (url) => url?.split('?')[0] || '',
 }));
 
-describe('CompareToolsView accessibility', () => {
+describe('CompareToolsView', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     useAtom.mockReturnValue([[], jest.fn()]);
@@ -74,6 +74,9 @@ describe('CompareToolsView accessibility', () => {
         cca_uid: { raw: 'one' },
         title: 'Tool one',
         href: '/tool-one',
+        image: {
+          scales: { thumb: { download: '/uploaded-compare-thumb.jpg' } },
+        },
         functionality: { raw: 4 },
         cca_adaptation_support_cycle_step: {
           raw: [{ title: 'Assessing risks' }, { title: 'Monitoring' }],
@@ -83,6 +86,7 @@ describe('CompareToolsView accessibility', () => {
         cca_uid: { raw: 'two' },
         title: 'Tool two',
         href: '/tool-two',
+        image: null,
       },
     ]);
   });
@@ -121,4 +125,44 @@ describe('CompareToolsView accessibility', () => {
     expect(adaptationSteps).toHaveTextContent('Monitoring');
     expect(adaptationSteps.children).toHaveLength(2);
   });
+
+  it('shows the uploaded tool result image and keeps the file icon for a missing image', async () => {
+    render(
+      <IntlProvider locale="en">
+        <CompareToolsView />
+      </IntlProvider>,
+    );
+    const table = await screen.findByRole('table', { name: 'Compare tools' });
+    const [thumbnail, missingThumbnail] = table.querySelectorAll(
+      '.navigator-tool-icon',
+    );
+    const img = thumbnail.querySelector('img');
+
+    expect(thumbnail).toHaveClass('medium');
+    expect(img).toHaveAttribute('src', '/uploaded-compare-thumb.jpg');
+    expect(img).toHaveStyle({ display: 'none' });
+    expect(thumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
+    expect(missingThumbnail.querySelector('img')).not.toBeInTheDocument();
+    expect(missingThumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
+
+    fireEvent.load(img);
+
+    expect(img.style.display).toBe('');
+    expect(thumbnail.querySelector('.ri-file-line')).not.toBeInTheDocument();
+  });
+
+  it('falls back to the file icon when the image fails', async () => {
+    render(
+      <IntlProvider locale="en">
+        <CompareToolsView />
+      </IntlProvider>,
+    );
+    const table = await screen.findByRole('table', { name: 'Compare tools' });
+    const thumbnail = table.querySelector('.navigator-tool-icon');
+
+    fireEvent.error(thumbnail.querySelector('img'));
+
+    expect(thumbnail.querySelector('img')).not.toBeInTheDocument();
+    expect(thumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
+  });
 });

package/src/components/theme/ToolThumbnail/ToolThumbnail.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import { Icon } from 'semantic-ui-react';
+import Image from '@plone/volto/components/theme/Image/Image';
+import { getToolThumbnailUrl } from './utils';
+
+const ToolThumbnail = ({
+  result,
+  size = 'medium',
+  fallbackIcon = 'ri-file-line',
+}) => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [hasImageError, setHasImageError] = useState(false);
+  const thumbUrl = getToolThumbnailUrl(result);
+
+  useEffect(() => {
+    setImageLoaded(false);
+    setHasImageError(false);
+  }, [thumbUrl]);
+
+  return (
+    <div className={`navigator-tool-icon ${size}`} aria-hidden="true">
+      {thumbUrl && !hasImageError ? (
+        <>
+          <Image
+            src={thumbUrl}
+            alt=""
+            style={imageLoaded ? undefined : { display: 'none' }}
+            onLoad={() => setImageLoaded(true)}
+            onError={() => setHasImageError(true)}
+          />
+          {!imageLoaded && <Icon className={fallbackIcon} />}
+        </>
+      ) : (
+        <Icon className={fallbackIcon} />
+      )}
+    </div>
+  );
+};
+
+export default ToolThumbnail;

package/src/components/theme/ToolThumbnail/ToolThumbnail.test.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import ToolThumbnail from './ToolThumbnail';
+
+describe('ToolThumbnail', () => {
+  it.each(['load', 'error'])(
+    'resets the %s state when the thumbnail URL changes',
+    (event) => {
+      const { container, rerender } = render(
+        <ToolThumbnail result={{ image: '/first.jpg' }} />,
+      );
+      fireEvent[event](container.querySelector('img'));
+
+      rerender(<ToolThumbnail result={{ image: '/second.jpg' }} />);
+
+      const img = container.querySelector('img');
+      expect(img).toHaveAttribute('src', '/second.jpg');
+      expect(img).toHaveAttribute('alt', '');
+      expect(img).toHaveStyle({ display: 'none' });
+      expect(container.querySelector('.ri-file-line')).toBeInTheDocument();
+
+      fireEvent.load(img);
+
+      expect(img.style.display).toBe('');
+      expect(container.querySelector('.ri-file-line')).not.toBeInTheDocument();
+    },
+  );
+});

package/src/components/theme/ToolThumbnail/utils.js

@@ -0,0 +1,49 @@
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+
+export function getToolThumbnailUrl(result) {
+  if (!result) return null;
+
+  if (result.image === null || result.image === false) {
+    return null;
+  }
+
+  if (typeof result.image === 'string' && result.image) {
+    return flattenToAppURL(result.image);
+  }
+  if (result.image && typeof result.image === 'object') {
+    const scaleUrl =
+      result.image.scales?.thumb?.download ||
+      result.image.scales?.tile?.download ||
+      result.image.scales?.preview?.download ||
+      result.image.scales?.mini?.download ||
+      result.image.download;
+    if (scaleUrl) {
+      return flattenToAppURL(scaleUrl);
+    }
+  }
+
+  if (
+    typeof result.thumbUrl === 'string' &&
+    result.thumbUrl &&
+    !result.thumbUrl.includes('portal_depiction')
+  ) {
+    return flattenToAppURL(result.thumbUrl);
+  }
+
+  if (
+    result.image_preview &&
+    typeof result.image_preview.raw === 'string' &&
+    result.image_preview.raw
+  ) {
+    return flattenToAppURL(result.image_preview.raw);
+  }
+
+  const href =
+    result.href || result['@id'] || result.about?.raw || result.about;
+  if (href && typeof href === 'string') {
+    const cleanHref = flattenToAppURL(href).replace(/\/+$/, '');
+    return `${cleanHref}/@@images/image/thumb`;
+  }
+
+  return null;
+}

package/src/components/theme/ToolThumbnail/utils.test.js

@@ -0,0 +1,124 @@
+import { getToolThumbnailUrl } from './utils';
+
+describe('getToolThumbnailUrl', () => {
+  it.each([null, false])(
+    'does not resolve other URLs when image is %s',
+    (image) => {
+      expect(
+        getToolThumbnailUrl({
+          image,
+          thumbUrl: '/thumb.jpg',
+          image_preview: { raw: '/preview.jpg' },
+          href: '/tools/tool',
+        }),
+      ).toBeNull();
+    },
+  );
+
+  it.each(['thumb', 'tile', 'preview', 'mini'])(
+    'prefers the %s scale to the original download',
+    (scale) => {
+      expect(
+        getToolThumbnailUrl({
+          image: {
+            scales: { [scale]: { download: '/scaled.jpg' } },
+            download: '/original.jpg',
+          },
+          thumbUrl: '/thumb.jpg',
+        }),
+      ).toBe('/scaled.jpg');
+    },
+  );
+
+  it('uses the raw image preview before constructing a traversal URL', () => {
+    expect(
+      getToolThumbnailUrl({
+        thumbUrl: '/portal_depiction/tool/image_preview',
+        image_preview: { raw: '/preview.jpg' },
+        href: '/tools/tool',
+      }),
+    ).toBe('/preview.jpg');
+  });
+
+  it('returns null for empty or invalid results', () => {
+    expect(getToolThumbnailUrl(null)).toBeNull();
+    expect(getToolThumbnailUrl(undefined)).toBeNull();
+    expect(getToolThumbnailUrl({})).toBeNull();
+    expect(getToolThumbnailUrl({ image: null })).toBeNull();
+    expect(getToolThumbnailUrl({ image: false })).toBeNull();
+  });
+
+  it('resolves direct image string URL', () => {
+    expect(
+      getToolThumbnailUrl({ image: '/metadata/tools/tool/image.png' }),
+    ).toBe('/metadata/tools/tool/image.png');
+  });
+
+  it('resolves image scales from Dexterity image field', () => {
+    expect(
+      getToolThumbnailUrl({
+        image: {
+          scales: {
+            thumb: { download: '/image-128.jpeg' },
+            tile: { download: '/image-64.jpeg' },
+          },
+        },
+      }),
+    ).toBe('/image-128.jpeg');
+
+    expect(
+      getToolThumbnailUrl({
+        image: {
+          scales: {
+            tile: { download: '/image-64.jpeg' },
+          },
+        },
+      }),
+    ).toBe('/image-64.jpeg');
+
+    expect(
+      getToolThumbnailUrl({
+        image: {
+          download: '/image-original.jpeg',
+        },
+      }),
+    ).toBe('/image-original.jpeg');
+  });
+
+  it('resolves thumbUrl when not portal_depiction fallback', () => {
+    expect(
+      getToolThumbnailUrl({
+        thumbUrl: '/custom-thumb.jpg',
+      }),
+    ).toBe('/custom-thumb.jpg');
+
+    // portal_depiction is ignored, falls back to href scale
+    expect(
+      getToolThumbnailUrl({
+        thumbUrl:
+          'https://www.eea.europa.eu/portal_depiction/tool/image_preview',
+        href: '/tools/sample-tool',
+      }),
+    ).toBe('/tools/sample-tool/@@images/image/thumb');
+  });
+
+  it('constructs scale traversal URL from href, @id, or about', () => {
+    expect(
+      getToolThumbnailUrl({
+        href: '/tools/sample-tool/',
+      }),
+    ).toBe('/tools/sample-tool/@@images/image/thumb');
+
+    expect(
+      getToolThumbnailUrl({
+        '@id': '/tools/sample-tool',
+      }),
+    ).toBe('/tools/sample-tool/@@images/image/thumb');
+
+    expect(
+      getToolThumbnailUrl({
+        about: { raw: '/tools/sample-tool' },
+      }),
+    ).toBe('/tools/sample-tool/@@images/image/thumb');
+  });
+});

package/src/components/theme/Views/ExtendedToolView.jsx

@@ -14,6 +14,7 @@ import { FormattedMessage } from 'react-intl';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import useClipboard from '@plone/volto/hooks/clipboard/useClipboard';
 import { useCompareTools } from '../CompareTools/utils';
+import { getToolThumbnailUrl } from '../ToolThumbnail/utils';
 import { getNavigatorCataloguePageURL } from '../../Search/NavigatorCatalogue/utils';
 import RelatedTools from './RelatedTools';
 
@@ -65,6 +66,7 @@ const ExtendedToolView = (props) => {
     uid: content.UID,
     title,
     href: content['@id'],
+    image: getToolThumbnailUrl(content),
   };
 
   const { isSelected, isLimitReached, toggle } = useCompareTools(compareTool);

package/src/components/theme/Views/ExtendedToolView.test.jsx

@@ -221,6 +221,69 @@ describe('ExtendedToolView', () => {
     ).not.toBeInTheDocument();
   });
 
+  describe('related tool thumbnails', () => {
+    const renderRelatedTool = (fields = {}) => {
+      const { container } = renderComponent({
+        title: 'Climate Tool',
+        '@components': {
+          relatedtools: {
+            items: [
+              {
+                '@id': '/tools/coastal-planner',
+                title: 'Coastal planner',
+                ...fields,
+              },
+            ],
+          },
+        },
+      });
+      return container.querySelector(
+        '.extended-tool-related-card .navigator-tool-icon',
+      );
+    };
+
+    it('shows the uploaded thumbnail after loading', () => {
+      const thumbnail = renderRelatedTool({
+        image: {
+          scales: { thumb: { download: '/uploaded-related-thumb.jpg' } },
+        },
+      });
+      const img = thumbnail.querySelector('img');
+
+      expect(thumbnail).toHaveClass('medium');
+      expect(img).toHaveAttribute('src', '/uploaded-related-thumb.jpg');
+      expect(img).toHaveStyle({ display: 'none' });
+      expect(thumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
+
+      fireEvent.load(img);
+
+      expect(img).not.toHaveStyle({ display: 'none' });
+      expect(thumbnail.querySelector('.ri-file-line')).not.toBeInTheDocument();
+    });
+
+    it('resolves the thumbnail from the related item URL and falls back on error', () => {
+      const thumbnail = renderRelatedTool();
+      const img = thumbnail.querySelector('img');
+
+      expect(img).toHaveAttribute(
+        'src',
+        '/tools/coastal-planner/@@images/image/thumb',
+      );
+
+      fireEvent.error(img);
+
+      expect(thumbnail.querySelector('img')).not.toBeInTheDocument();
+      expect(thumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
+    });
+
+    it.each([null, false])('shows the file icon for image: %s', (image) => {
+      const thumbnail = renderRelatedTool({ image });
+
+      expect(thumbnail.querySelector('img')).not.toBeInTheDocument();
+      expect(thumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
+    });
+  });
+
   it('renders the open-tool button when a hyperlink is provided', () => {
     renderComponent({
       title: 'Climate Tool',
@@ -323,12 +386,16 @@ describe('ExtendedToolView', () => {
       '@id': '/tools/climate-tool',
       title: 'Climate Tool',
       hyperlink: 'https://example.com/tool',
+      image: {
+        scales: { thumb: { download: '/uploaded-tool-thumb.jpg' } },
+      },
     });
 
     expect(useCompareTools).toHaveBeenCalledWith({
       uid: 'tool-uid',
       title: 'Climate Tool',
       href: '/tools/climate-tool',
+      image: '/uploaded-tool-thumb.jpg',
     });
   });
 

package/src/components/theme/Views/RelatedTools.jsx

@@ -1,6 +1,7 @@
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { Container, Icon, Popup } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
+import ToolThumbnail from '../ToolThumbnail/ToolThumbnail';
 
 const messages = defineMessages({
   relatedTools: {
@@ -84,12 +85,7 @@ const RelatedTools = ({ content }) => {
                       </UniversalLink>
                     </h4>
                   </div>
-                  <span
-                    className="extended-tool-related-icon"
-                    aria-hidden="true"
-                  >
-                    <Icon className="ri-file-line" />
-                  </span>
+                  <ToolThumbnail result={item} />
                 </div>
                 {sharedGroups.length > 0 && (
                   <div className="extended-tool-related-tags">

package/theme/globals/navigator.less

@@ -50,6 +50,15 @@
   border-radius: 4px;
   background-color: #f7f8fa;
   color: @navigatorIconColor;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    border-radius: inherit;
+  }
 
   i.icon {
     width: auto;

package/theme/globals/views.less

@@ -565,7 +565,8 @@ hr {
     justify-content: space-between;
     margin-bottom: 1em;
     gap: 0.5em;
-    > div {
+
+    > div:not(.navigator-tool-icon) {
       min-width: 0;
       flex: 1 1 auto;
     }
@@ -606,23 +607,6 @@ hr {
     justify-content: flex-end;
   }
 
-  .extended-tool-related-icon {
-    display: inline-flex;
-    width: 32px;
-    height: 32px;
-    align-items: center;
-    flex: 0 0 auto;
-    justify-content: center;
-    border: 1px solid #d5dde5;
-    border-radius: 3px;
-    background: #f7f9fa;
-    color: #60758a;
-
-    .icon {
-      margin: 0;
-    }
-  }
-
   .extended-tool-related-tags {
     margin-bottom: 1rem;
     gap: 0.4rem;