Merge pull request #10 from eea/develop

add PreviewImage

CHANGELOG.md

@@ -4,9 +4,17 @@ 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).
 
+#### [0.3.0](https://github.com/eea/volto-listing-block/compare/0.2.0...0.3.0)
+
+- bump version [`a1cef0d`](https://github.com/eea/volto-listing-block/commit/a1cef0d692bc49a4aa1be5988d0c9cb0d25cb299)
+- add PreviewImage till https://github.com/plone/volto/pull/3122 is merged [`4f8a6c2`](https://github.com/eea/volto-listing-block/commit/4f8a6c21517f29a20724f813f95b45511e557064)
+
 #### [0.2.0](https://github.com/eea/volto-listing-block/compare/0.1.5...0.2.0)
 
+> 4 March 2022
+
 - News listing variation [`#9`](https://github.com/eea/volto-listing-block/pull/9)
+- Use semantic ui react components #8 [`152a051`](https://github.com/eea/volto-listing-block/commit/152a051efd3b240758ec2922fc29b2fb3309ad06)
 - tests: add block before editing it [`9913e32`](https://github.com/eea/volto-listing-block/commit/9913e32c8a8218d9d44f706ec698b9eb1cb8afb1)
 - update news list tests [`aaadc22`](https://github.com/eea/volto-listing-block/commit/aaadc226710680f247736fc8adf1d7ec0aec375f)
 - tests for News List [`63846f7`](https://github.com/eea/volto-listing-block/commit/63846f70c9a109418c024d6eb94477c695331e70)

Jenkinsfile

@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-listing-block"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu"
         DEPENDENCIES = ""
     }
 

package.json

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

src/CustomCardsGalleryTemplate.js

@@ -1,11 +1,9 @@
 import { ConditionalLink } from '@plone/volto/components';
-import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
-import { flattenToAppURL } from '@plone/volto/helpers';
-import config from '@plone/volto/registry';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import { Card } from 'semantic-ui-react';
 import React from 'react';
+import PreviewImage from './PreviewImage';
 import './less/editor.less';
 
 const CustomCardsGalleryTemplate = ({
@@ -15,8 +13,6 @@ const CustomCardsGalleryTemplate = ({
   hasDate,
   hasDescription,
 }) => {
-  const { settings } = config;
-
   const makeTextBody = (item) => (
     <Card.Content>
       <Card.Header>{item.title ? item.title : item.id}</Card.Header>
@@ -38,19 +34,7 @@ const CustomCardsGalleryTemplate = ({
   const makeImage = (item) => {
     return (
       <ConditionalLink className="image" item={item} condition={!isEditMode}>
-        <img
-          src={
-            item[settings.listingPreviewImageField]
-              ? flattenToAppURL(
-                  item[settings.listingPreviewImageField].scales.preview
-                    .download,
-                )
-              : settings.depiction
-              ? flattenToAppURL(item['@id'] + settings.depiction)
-              : DefaultImageSVG
-          }
-          alt={item.title}
-        />
+        <PreviewImage item={item} alt={item.title} />
       </ConditionalLink>
     );
   };

src/PreviewImage.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
+
+/**
+ * Renders a preview image for a catalog brain result item.
+ *
+ */
+function PreviewImage(props) {
+  const { item, size = 'preview', ...rest } = props;
+  const src = item.image_field
+    ? flattenToAppURL(`${item['@id']}/@@images/${item.image_field}/${size}`)
+    : DefaultImageSVG;
+
+  return <img src={src} alt={item.title} {...rest} />;
+}
+
+PreviewImage.propTypes = {
+  size: PropTypes.string,
+  item: PropTypes.shape({
+    '@id': PropTypes.string.isRequired,
+    image_field: PropTypes.string,
+    title: PropTypes.string.isRequired,
+  }),
+};
+
+export default PreviewImage;