@eeacms/volto-eea-website-theme 1.33.2 → 2.0.0

package/src/customizations/volto/components/manage/Blocks/Image/View.jsx

@@ -9,8 +9,12 @@ import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
 import { Icon } from 'semantic-ui-react';
 import cx from 'classnames';
-import { withBlockExtensions } from '@plone/volto/helpers';
-import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
+import {
+  flattenToAppURL,
+  isInternalURL,
+  withBlockExtensions,
+} from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 import { Copyright } from '@eeacms/volto-eea-design-system/ui';
 
 /**
@@ -19,131 +23,126 @@ import { Copyright } from '@eeacms/volto-eea-design-system/ui';
  * @extends Component
  */
 export const View = (props) => {
-  const { data, detached } = props;
-  const href = data?.href?.[0]?.['@id'] || '';
+  const { className, data, detached, style } = props;
   const { copyright, copyrightIcon, copyrightPosition } = data;
-  // const [hovering, setHovering] = React.useState(false);
-  const [viewLoaded, setViewLoaded] = React.useState(false);
-
+  const href = data?.href?.[0]?.['@id'] || '';
   const showCopyright = data?.size === 'l' || !data.size;
 
-  React.useEffect(() => {
-    setViewLoaded(true);
-  }, []);
+  const Image = config.getComponent({ name: 'Image' }).component;
 
   return (
     <>
-      {viewLoaded && (
+      <div
+        className={cx(
+          'block image align',
+          {
+            center: !Boolean(data.align),
+            detached,
+          },
+          data.align,
+          className,
+        )}
+        style={style}
+      >
         <div
           className={cx(
-            'block image align',
+            'image-block-container',
             {
-              center: !Boolean(data.align),
-              detached,
+              large: data.size === 'l',
+              medium: data.size === 'm',
+              small: data.size === 's',
             },
-            data.align,
+            data?.align ? data?.align : '',
           )}
         >
-          <div
-            className={cx(
-              'image-block-container',
-              {
-                large: data.size === 'l',
-                medium: data.size === 'm',
-                small: data.size === 's',
-              },
-              data?.align ? data?.align : '',
-            )}
-          >
-            {data.url && (
-              <>
-                {(() => {
-                  const image = (
-                    <>
-                      <img
-                        className={cx(
-                          {
-                            'full-width': data.align === 'full',
-                            large: data.size === 'l',
-                            medium: data.size === 'm',
-                            small: data.size === 's',
-                          },
-                          data?.styles?.objectPosition,
-                        )}
-                        src={
-                          isInternalURL(data.url)
-                            ? // Backwards compat in the case that the block is storing the full server URL
-                              (() => {
-                                if (data.align === 'full')
-                                  return `${flattenToAppURL(
-                                    data.url,
-                                  )}/@@images/image/huge`;
-                                if (data.size === 'l')
-                                  return `${flattenToAppURL(
-                                    data.url,
-                                  )}/@@images/image/great`;
-                                if (data.size === 'm')
-                                  return `${flattenToAppURL(
-                                    data.url,
-                                  )}/@@images/image/preview`;
-                                if (data.size === 's')
-                                  return `${flattenToAppURL(
-                                    data.url,
-                                  )}/@@images/image/mini`;
+          {data.url && (
+            <>
+              {(() => {
+                const image = (
+                  <>
+                    <Image
+                      className={cx(
+                        {
+                          'full-width': data.align === 'full',
+                          large: data.size === 'l',
+                          medium: data.size === 'm',
+                          small: data.size === 's',
+                        },
+                        data?.styles?.objectPosition,
+                      )}
+                      item={
+                        data.image_scales
+                          ? {
+                              '@id': data.url,
+                              image_field: data.image_field,
+                              image_scales: data.image_scales,
+                            }
+                          : undefined
+                      }
+                      src={
+                        data.image_scales
+                          ? undefined
+                          : isInternalURL(data.url)
+                          ? // Backwards compat in the case that the block is storing the full server URL
+                            (() => {
+                              if (data.size === 'l')
+                                return `${flattenToAppURL(
+                                  data.url,
+                                )}/@@images/image`;
+                              if (data.size === 'm')
+                                return `${flattenToAppURL(
+                                  data.url,
+                                )}/@@images/image/preview`;
+                              if (data.size === 's')
                                 return `${flattenToAppURL(
                                   data.url,
-                                )}/@@images/image/great`;
-                              })()
-                            : data.url
-                        }
-                        alt={data.alt || ''}
-                        loading="lazy"
-                      />
-                      <div
-                        // onMouseEnter={() => setHovering(true)}
-                        // onMouseLeave={() => setHovering(false)}
-                        className={`copyright-wrapper ${
-                          copyrightPosition ? copyrightPosition : 'left'
-                        }`}
-                      >
-                        {copyright && showCopyright ? (
-                          <Copyright copyrightPosition={copyrightPosition}>
-                            <Copyright.Icon>
-                              <Icon className={copyrightIcon} />
-                            </Copyright.Icon>
-                            {/*<div*/}
-                            {/*  className={cx(*/}
-                            {/*    'copyright-hover-container',*/}
-                            {/*    !hovering ? 'hiddenStructure' : '',*/}
-                            {/*  )}*/}
-                            {/*>*/}
-                            <Copyright.Text>{copyright}</Copyright.Text>
-                            {/*</div>*/}
-                          </Copyright>
-                        ) : (
-                          ''
-                        )}
-                      </div>
-                    </>
+                                )}/@@images/image/mini`;
+                              return `${flattenToAppURL(
+                                data.url,
+                              )}/@@images/image`;
+                            })()
+                          : data.url
+                      }
+                      sizes={config.blocks.blocksConfig.image.getSizes(data)}
+                      alt={data.alt || ''}
+                      loading="lazy"
+                      responsive={true}
+                    />
+                    <div
+                      className={`copyright-wrapper ${
+                        copyrightPosition ? copyrightPosition : 'left'
+                      }`}
+                    >
+                      {copyright && showCopyright ? (
+                        <Copyright copyrightPosition={copyrightPosition}>
+                          <Copyright.Icon>
+                            <Icon className={copyrightIcon} />
+                          </Copyright.Icon>
+                          <Copyright.Text>{copyright}</Copyright.Text>
+                        </Copyright>
+                      ) : (
+                        ''
+                      )}
+                    </div>
+                  </>
+                );
+                if (href) {
+                  return (
+                    <UniversalLink
+                      href={href}
+                      openLinkInNewTab={data.openLinkInNewTab}
+                    >
+                      {image}
+                    </UniversalLink>
                   );
-                  if (href) {
-                    return (
-                      <UniversalLink
-                        href={href}
-                        openLinkInNewTab={data.openLinkInNewTab}
-                      >
-                        {image}
-                      </UniversalLink>
-                    );
-                  } else {
-                    return image;
-                  }
-                })()}
-              </>
-            )}
-          </div>
+                } else {
+                  return image;
+                }
+              })()}
+            </>
+          )}
         </div>
-      )}
+      </div>
     </>
   );
 };

package/src/customizations/volto/components/manage/Blocks/Image/schema.js

@@ -37,6 +37,10 @@ const messages = defineMessages({
     id: 'Alt text hint link text',
     defaultMessage: 'Describe the purpose of the image.',
   },
+  linkSettings: {
+    id: 'Link settings',
+    defaultMessage: 'Link settings',
+  },
 });
 
 export function ImageSchema({ formData, intl }) {
@@ -61,7 +65,7 @@ export function ImageSchema({ formData, intl }) {
         ? [
             {
               id: 'link_settings',
-              title: 'Link settings',
+              title: intl.formatMessage(messages.linkSettings),
               fields: ['href', 'openLinkInNewTab'],
             },
           ]
@@ -80,7 +84,7 @@ export function ImageSchema({ formData, intl }) {
               href="https://www.w3.org/WAI/tutorials/images/decision-tree/"
               title={intl.formatMessage(messages.openLinkInNewTab)}
               target="_blank"
-              rel="noopener"
+              rel="noopener noreferrer"
             >
               {intl.formatMessage(messages.AltTextHintLinkText)}
             </a>{' '}
@@ -136,3 +140,14 @@ export function ImageSchema({ formData, intl }) {
     required: [],
   };
 }
+
+export const gridImageDisableSizeAndPositionHandlersSchema = ({
+  schema,
+  formData,
+  intl,
+}) => {
+  schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
+    (item) => !['align', 'size'].includes(item),
+  );
+  return schema;
+};

package/src/customizations/volto/components/manage/Blocks/LeadImage/Edit.jsx

@@ -10,10 +10,11 @@ import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
 import { Message } from 'semantic-ui-react';
 import { isEqual } from 'lodash';
+
 import { Copyright } from '@eeacms/volto-eea-design-system/ui';
 import { Icon } from 'semantic-ui-react';
 import { LeadImageSidebar, SidebarPortal } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
 
@@ -80,11 +81,18 @@ class Edit extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const Image = config.getComponent({ name: 'Image' }).component;
     const { data, properties } = this.props;
+    const { copyright, copyrightIcon, copyrightPosition } = data;
     const placeholder =
       this.props.data.placeholder ||
       this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
-    const { copyright, copyrightIcon, copyrightPosition, styles } = data;
+
+    const hasImage = !!properties.image;
+    const hasImageData = hasImage && !!properties.image.data;
+    const className = cx('responsive', { 'full-image': data.align === 'full' });
+    const altText = data.image_caption || properties.image_caption || '';
+
     return (
       <div
         className={cx(
@@ -100,7 +108,7 @@ class Edit extends Component {
             `image-block-container ${data?.align ? data?.align : ''}`,
           )}
         >
-          {!properties.image && (
+          {!hasImage && (
             <Message>
               <center>
                 <img src={imageBlockSVG} alt="" />
@@ -108,19 +116,17 @@ class Edit extends Component {
               </center>
             </Message>
           )}
-          {properties.image && (
+          {hasImage && hasImageData && (
             <div className="image-block">
               <img
-                className={cx(
-                  { 'full-width': data.align === 'full' },
-                  styles?.objectPosition,
-                )}
-                src={
-                  properties.image.data
-                    ? `data:${properties.image['content-type']};base64,${properties.image.data}`
-                    : flattenToAppURL(properties.image.download)
-                }
-                alt={data.image_caption || ''}
+                className={(className, data?.styles?.objectPosition)}
+                src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
+                width={properties.image.width}
+                height={properties.image.height}
+                alt={altText}
+                style={{
+                  aspectRatio: `${properties.image.width}/${properties.image.height}`,
+                }}
               />
               <div className="copyright-wrapper">
                 {copyright ? (
@@ -136,6 +142,21 @@ class Edit extends Component {
               </div>
             </div>
           )}
+          {hasImage && !hasImageData && (
+            <Image
+              className={className}
+              item={properties}
+              imageField="image"
+              sizes={(() => {
+                if (data.align === 'full' || data.align === 'center')
+                  return '100vw';
+                if (data.align === 'left' || data.align === 'right')
+                  return '50vw';
+                return undefined;
+              })()}
+              alt={altText}
+            />
+          )}
         </div>
         <SidebarPortal selected={this.props.selected}>
           <LeadImageSidebar {...this.props} />

package/src/customizations/volto/components/manage/Blocks/LeadImage/View.jsx

@@ -7,101 +7,87 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
+import config from '@plone/volto/registry';
 import { Copyright } from '@eeacms/volto-eea-design-system/ui';
 import { Icon } from 'semantic-ui-react';
-import { flattenToAppURL } from '@plone/volto/helpers';
 
 /**
  * View image block class.
  * @class View
  * @extends Component
  */
-const View = (props) => {
-  const { data, properties } = props;
-  const { copyright, copyrightIcon, copyrightPosition, styles } = data;
-
-  // const [hovering, setHovering] = React.useState(false);
-  const [viewLoaded, setViewLoaded] = React.useState(false);
-
-  React.useEffect(() => {
-    setViewLoaded(true);
-  }, []);
+const View = ({ data, properties }) => {
+  const { copyright, copyrightIcon, copyrightPosition } = data;
+  const Image = config.getComponent({ name: 'Image' }).component;
 
   return (
     <>
-      {viewLoaded && (
-        <p
+      <p
+        className={cx(
+          'block image align',
+          {
+            center: !Boolean(data.align),
+          },
+          data.align,
+        )}
+      >
+        <div
           className={cx(
-            'block image align',
-            {
-              center: !Boolean(data.align),
-            },
-            data.align,
+            `image-block-container ${data?.align ? data?.align : ''}`,
           )}
         >
-          <div
-            className={cx(
-              `image-block-container ${data?.align ? data?.align : ''}`,
-            )}
-          >
-            {properties.image && (
-              <>
-                {(() => {
-                  const image = (
-                    <div className="image-block">
-                      <img
-                        className={cx(
-                          { 'full-width': data.align === 'full' },
-                          styles?.objectPosition,
-                        )}
-                        src={flattenToAppURL(properties.image.download)}
-                        alt={properties.image_caption || ''}
-                      />
-                      <div
-                        // onMouseEnter={() => setHovering(true)}
-                        // onMouseLeave={() => setHovering(false)}
-                        className={`copyright-wrapper ${
-                          copyrightPosition ? copyrightPosition : 'left'
-                        }`}
-                      >
-                        {copyright ? (
-                          <Copyright copyrightPosition={copyrightPosition}>
-                            <Copyright.Icon>
-                              <Icon className={copyrightIcon} />
-                            </Copyright.Icon>
-                            {/*<div*/}
-                            {/*  className={cx(*/}
-                            {/*    'copyright-hover-container',*/}
-                            {/*    !hovering ? 'hiddenStructure' : '',*/}
-                            {/*  )}*/}
-                            {/*>*/}
-                            <Copyright.Text>{copyright}</Copyright.Text>
-                            {/*</div>*/}
-                          </Copyright>
-                        ) : (
-                          ''
-                        )}
-                      </div>
+          {properties.image && (
+            <>
+              {(() => {
+                const image = (
+                  <div className="image-block">
+                    <Image
+                      className={cx(
+                        { 'full-width': data.align === 'full' },
+                        data?.styles?.objectPosition,
+                      )}
+                      item={properties}
+                      imageField="image"
+                      sizes={config.blocks.blocksConfig.leadimage.getSizes(
+                        data,
+                      )}
+                      alt={properties.image_caption || ''}
+                      responsive={true}
+                    />
+                    <div
+                      className={`copyright-wrapper ${
+                        copyrightPosition ? copyrightPosition : 'left'
+                      }`}
+                    >
+                      {copyright ? (
+                        <Copyright copyrightPosition={copyrightPosition}>
+                          <Copyright.Icon>
+                            <Icon className={copyrightIcon} />
+                          </Copyright.Icon>
+                        </Copyright>
+                      ) : (
+                        ''
+                      )}
                     </div>
+                  </div>
+                );
+                if (data.href) {
+                  return (
+                    <UniversalLink
+                      href={data.href}
+                      openLinkInNewTab={data.openLinkInNewTab}
+                    >
+                      {image}
+                    </UniversalLink>
                   );
-                  if (data.href) {
-                    return (
-                      <UniversalLink
-                        href={data.href}
-                        openLinkInNewTab={data.openLinkInNewTab}
-                      >
-                        {image}
-                      </UniversalLink>
-                    );
-                  } else {
-                    return image;
-                  }
-                })()}
-              </>
-            )}
-          </div>
-        </p>
-      )}
+                } else {
+                  return image;
+                }
+              })()}
+            </>
+          )}
+        </div>
+      </p>
     </>
   );
 };