feat(cards): add custom display for volto-block-image-cards

src/index.js

@@ -1,4 +1,6 @@
-import BlockquoteElement from './ui/Blockquote/Blockquote';
+import { BlockquoteElement } from './ui/Blockquote/Blockquote';
+import Cards from './ui/Card/Cards';
+import { getCardSchema, getSchemaExtender } from './ui/Card/schema';
 
 const applyConfig = (config) => {
   // Apply accordion block customization
@@ -8,6 +10,18 @@ const applyConfig = (config) => {
   if (config.settings.slate) {
     config.settings.slate.elements['blockquote'] = BlockquoteElement;
   }
+  // Apply volto-block-image-cards custom display
+  if (config.blocks.blocksConfig.imagecards) {
+    config.blocks.blocksConfig.imagecards.blockRenderers = {
+      ...config.blocks.blocksConfig.imagecards.blockRenderers,
+      cards_grid: {
+        title: 'Cards grid',
+        view: Cards,
+        schema: getCardSchema,
+        schemaExtender: getSchemaExtender,
+      },
+    };
+  }
 
   return config;
 };

src/ui/Card/Cards.js

@@ -0,0 +1,67 @@
+import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
+import React from 'react';
+import { Card, Icon } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+import { serializeNodes } from 'volto-slate/editor/render';
+
+import { getScaleUrl, getPath } from '@eeacms/volto-eea-design-system/utils';
+
+const alignmentTypes = {
+  left: 'left',
+  right: 'right',
+  center: 'centered',
+  full: 'left',
+};
+
+const Cards = ({ data }) => {
+  const { align, cards, image_scale, gridSize = 'one' } = data;
+
+  const makeImage = (item) => {
+    const { attachedimage } = item;
+    return (
+      <img
+        src={
+          getScaleUrl(getPath(attachedimage), image_scale || 'preview') ||
+          DefaultImageSVG
+        }
+        alt={item.title}
+      />
+    );
+  };
+
+  const makeTextBody = (item) => (
+    <>
+      <Card.Content>
+        <Card.Header>{item.title ? item.title : item.id}</Card.Header>
+        {item.meta && <Card.Meta>{serializeNodes(item.meta)}</Card.Meta>}
+        {item.text && (
+          <Card.Description>{serializeNodes(item.text)}</Card.Description>
+        )}
+      </Card.Content>
+      {item.link && (
+        <Card.Content extra>
+          <UniversalLink href={item.link}>
+            <Icon name="linkify" />
+            {item.linkTitle || item.link}
+          </UniversalLink>
+        </Card.Content>
+      )}
+    </>
+  );
+
+  return (
+    cards &&
+    cards.length > 0 && (
+      <div className={`ui fluid ${gridSize || ''} cards`}>
+        {cards.map((item) => (
+          <Card key={item['@id']} className={alignmentTypes[align] || 'left'}>
+            {makeImage(item)}
+            {makeTextBody(item)}
+          </Card>
+        ))}
+      </div>
+    )
+  );
+};
+
+export default Cards;

src/ui/Card/schema.js

@@ -0,0 +1,79 @@
+export const getCardSchema = () => ({
+  title: 'Image Card',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [
+        'title',
+        'meta',
+        'text',
+        'attachedimage',
+        'link',
+        'linkTitle',
+        'copyright',
+      ],
+    },
+  ],
+
+  properties: {
+    title: {
+      type: 'string',
+      title: 'Title',
+    },
+    meta: {
+      widget: 'slate_richtext',
+      title: 'Meta data',
+    },
+    text: {
+      widget: 'slate_richtext',
+      title: 'Text',
+    },
+    link: {
+      widget: 'url',
+      title: 'Link',
+    },
+    linkTitle: {
+      type: 'string',
+      title: 'Link title',
+    },
+    attachedimage: {
+      widget: 'attachedimage',
+      title: 'Image',
+    },
+    copyright: {
+      widget: 'slate_richtext',
+      title: 'Copyright',
+    },
+  },
+
+  required: ['attachedimage'],
+});
+
+export const getSchemaExtender = (schema, data, intl) => {
+  return {
+    ...schema,
+    fieldsets: [
+      ...schema.fieldsets,
+      {
+        id: 'cards_grid',
+        title: 'Cards grid',
+        fields: ['gridSize'],
+      },
+    ],
+    properties: {
+      ...schema.properties,
+      gridSize: {
+        title: 'Grid Size',
+        choices: [
+          ['one', 'One'],
+          ['two', 'Two'],
+          ['three', 'Three'],
+          ['four', 'Four'],
+        ],
+        factory: 'Choice',
+        type: 'string',
+      },
+    },
+  };
+};

src/utils.js

@@ -0,0 +1,10 @@
+import config from '@plone/volto/registry';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+export const getPath = (url = '') =>
+  (url || '').startsWith('http') ? new URL(url).pathname : url;
+
+export const getScaleUrl = (url, size) =>
+  (url || '').includes(config.settings.apiPath)
+    ? `${flattenToAppURL(url.replace('/api', ''))}/@@images/image/${size}`
+    : `${url.replace('/api', '')}/@@images/image/${size}`;

theme/themes/eea/views/card.overrides

@@ -1,3 +1,15 @@
 /*******************************
          Theme Overrides
 *******************************/
+
+.ui.cards > .card .meta, .ui.card .meta > .category {
+  font-size: @metaFontSize;
+}
+
+.ui.left.card {
+  margin-right: auto;
+}
+
+.ui.right.card {
+  margin-left: auto;
+}