Develop

CHANGELOG.md

@@ -4,9 +4,21 @@ 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.2.15](https://github.com/eea/volto-forests-theme/compare/0.2.14...0.2.15)
+
+- Imagecards fise template [`#74`](https://github.com/eea/volto-forests-theme/pull/74)
+- Init fise image cards template [`#72`](https://github.com/eea/volto-forests-theme/pull/72)
+- check for blockrenders before using [`423c7c9`](https://github.com/eea/volto-forests-theme/commit/423c7c98d75aca0fcbf11993a51101d4f5013c4d)
+- config update [`0815b60`](https://github.com/eea/volto-forests-theme/commit/0815b60f044366138a7dd02541e6c49888ab0eee)
+- Clear cards [`581fbc5`](https://github.com/eea/volto-forests-theme/commit/581fbc56c41dfca3e33c80a4334d4d6281c57cc7)
+- style fixes [`18b1ddf`](https://github.com/eea/volto-forests-theme/commit/18b1ddf016178282ef64f23d731262c8046c637a)
+- use attachedimage [`fd9aa11`](https://github.com/eea/volto-forests-theme/commit/fd9aa1168be77608edba5e57764c3f3a4c689eb4)
+
 #### [0.2.14](https://github.com/eea/volto-forests-theme/compare/0.2.13...0.2.14)
 
-- Discodata connector visual fix [`0f6e318`](https://github.com/eea/volto-forests-theme/commit/0f6e318241780f02c8d5cbe2cce7fafd67b5eeb1)
+> 14 June 2022
+
+- Discodata connector visual fix [`#71`](https://github.com/eea/volto-forests-theme/pull/71)
 
 #### [0.2.13](https://github.com/eea/volto-forests-theme/compare/0.2.12...0.2.13)
 

package.json

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

src/components/manage/Blocks/ImageCards/View.jsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
+import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
+import { Card, Message } from 'semantic-ui-react';
+import { serializeNodes } from 'volto-slate/editor/render';
+import { compose } from 'redux';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { withRouter } from 'react-router-dom';
+import { injectIntl } from 'react-intl';
+
+import './styles.less';
+
+const alignmentTypes = {
+  left: 'left',
+  right: 'right',
+  center: 'centered',
+  full: 'left',
+};
+
+export const getScaleUrl = (url, size) =>
+  (url || '').includes(config.settings.apiPath)
+    ? `${flattenToAppURL(url.replace('/api', ''))}/@@images/image/${size}`
+    : `${url.replace('/api', '')}/@@images/image/${size}`;
+
+const Cards = (props) => {
+  const { data, editable, history } = props;
+  const {
+    align,
+    cards,
+    image_scale,
+    gridSize = 'one',
+    theme = 'default',
+  } = data;
+
+  const makeImage = (item) => {
+    const { attachedimage } = item;
+    return (
+      <img
+        className="cards-tile-image"
+        src={
+          attachedimage
+            ? getScaleUrl(
+                flattenToAppURL(attachedimage),
+                image_scale || 'preview',
+              )
+            : DefaultImageSVG
+        }
+        alt={item.title}
+      />
+    );
+  };
+
+  const makeTextBody = (item) => (
+    <>
+      <h3 className="tile-listing-title">
+        {item.title ? item.title : item.id}
+      </h3>
+      {item.text && (
+        <p className="tile-listing-description">{serializeNodes(item.text)}</p>
+      )}
+    </>
+  );
+
+  const handleNavigate = (link) => {
+    history.push(flattenToAppURL(link));
+  };
+
+  return cards && cards.length > 0 ? (
+    <div className={cx('ui fluid cards', gridSize)}>
+      {cards.map((item) => (
+        <Card
+          onClick={() => handleNavigate(item.link)}
+          key={item['@id']}
+          className={cx(
+            'navigation-card',
+            alignmentTypes[align] || 'left',
+            theme,
+          )}
+        >
+          {makeImage(item)}
+          {makeTextBody(item)}
+        </Card>
+      ))}
+    </div>
+  ) : (
+    <>{editable ? <Message>No image cards</Message> : ''}</>
+  );
+};
+
+Cards.schema = () => ({
+  title: 'Image Card',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title', 'text', 'attachedimage', 'link'],
+    },
+  ],
+
+  properties: {
+    title: {
+      type: 'string',
+      title: 'Title',
+    },
+    text: {
+      widget: 'slate_richtext',
+      title: 'Text',
+    },
+    link: {
+      widget: 'url',
+      title: 'Link',
+    },
+    attachedimage: {
+      widget: 'attachedimage',
+      title: 'Image',
+    },
+  },
+
+  required: ['attachedimage'],
+});
+
+Cards.schemaExtender = (schema) => {
+  return {
+    ...schema,
+    fieldsets: [
+      ...schema.fieldsets,
+      {
+        id: 'cards_grid',
+        title: 'Cards grid',
+        fields: ['gridSize', 'theme'],
+      },
+    ],
+    properties: {
+      ...schema.properties,
+      gridSize: {
+        title: 'Grid Size',
+        choices: [
+          ['one', 'One'],
+          ['two', 'Two'],
+          ['three', 'Three'],
+          ['four', 'Four'],
+        ],
+        factory: 'Choice',
+        type: 'string',
+      },
+      theme: {
+        title: 'Theme',
+        choices: [
+          ['default', 'Default'],
+          ['primary', 'Primary'],
+          ['secondary', 'Secondary'],
+          ['tertiary', 'Tertiary'],
+        ],
+      },
+    },
+  };
+};
+
+export default compose(withRouter, injectIntl)(Cards);

src/components/manage/Blocks/ImageCards/index.js

@@ -0,0 +1,19 @@
+import Cards from './View';
+
+export default (config) => {
+  if (
+    config.blocks.blocksConfig.imagecards &&
+    config.blocks.blocksConfig.imagecards.blockRenderers
+  ) {
+    config.blocks.blocksConfig.imagecards.blockRenderers = {
+      ...config.blocks.blocksConfig.imagecards.blockRenderers,
+      fise_cards_grid: {
+        title: 'FISE cards grid',
+        view: Cards,
+        schema: Cards.schema,
+        schemaExtender: Cards.schemaExtender,
+      },
+    };
+  }
+  return config;
+};

src/components/manage/Blocks/ImageCards/styles.less

@@ -0,0 +1,31 @@
+.cards-tile-image {
+  height: 250px;
+  object-fit: cover;
+}
+
+.navigation-card {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.tile-listing-title {
+  margin: 10px 0 !important;
+  font-weight: bold;
+
+  p {
+    margin: 0 !important;
+    color: #564535;
+    font-size: 20px;
+  }
+}
+
+.tile-listing-title:hover {
+  p {
+    color: #cc4400;
+  }
+}
+
+.tile-listing-description {
+  color: #666;
+  font-size: 14px;
+}

src/index.js

@@ -6,6 +6,7 @@ import installAppExtras from '@eeacms/volto-forests-theme/components/theme/AppEx
 import { applyConfig as installFiseFrontend } from './localconfig';
 import installDiscodataConnectorBlock from '@eeacms/volto-forests-theme/components/manage/Blocks/DiscodataConnectorBlock';
 import installExpandableDataTable from './components/manage/Blocks/SimpleDataTable';
+import installImageCards from './components/manage/Blocks/ImageCards';
 
 import ObjectListInlineWidget from './components/manage/Widgets/ObjectListInlineWidget';
 import reducers from '@eeacms/volto-forests-theme/reducers';
@@ -19,6 +20,7 @@ export default function applyConfig(config) {
     installFiseFrontend,
     installDiscodataConnectorBlock,
     installExpandableDataTable,
+    installImageCards,
   ].reduce((acc, apply) => apply(acc), config);
 
   config.settings = {