Add functionality to enable and disable image

kitconcept · Jan 5, 2024 · 9dd8173 · 9dd8173
1 parent ea9d0fa
commit 9dd8173
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 44 deletions.
diff --git a/src/components/Data.jsx b/src/components/Data.jsx
@@ -1,6 +1,6 @@
-import React from "react";
 import { BlockDataForm } from "@plone/volto/components";
 import { QuoteBlockSchema } from "./schema";
+import React from "react";
 
 const QuoteBlockData = (props) => {
   const { data, block, onChangeBlock, contentType, navRoot } = props;

diff --git a/src/components/Edit.jsx b/src/components/Edit.jsx
@@ -1,23 +1,42 @@
+import { DetachedTextBlockEditor } from "@plone/volto-slate/blocks/Text/DetachedTextBlockEditor";
+import QuoteBlockSidebar from "./Data";
 import React from "react";
 import { SidebarPortal } from "@plone/volto/components";
-import QuoteBlockSidebar from "./Data";
-import { DetachedTextBlockEditor } from "@plone/volto-slate/blocks/Text/DetachedTextBlockEditor";
+import config from "@plone/volto/registry";
+import { flattenToAppURL } from "@plone/volto/helpers";
 
 const Edit = (props) => {
   const { data, block, onChangeBlock, selected } = props;
 
   return (
     <div className="block quote">
-      <figure className="quotation">
-        <blockquote className="quote-text">
-          <DetachedTextBlockEditor {...props} />
-        </blockquote>
-        <figcaption className="author">
-          <span className="person">{data.person}</span>
-          {data.position && ", "}
-          {data.position}
-        </figcaption>
-      </figure>
+      <div className="inner-wrapper">
+        {config?.blocks?.blocksConfig?.quote.isImageAllowed &&
+          data?.image?.[0] && (
+            <div className="image-wrapper">
+              <img
+                src={`${flattenToAppURL(data?.image[0]["@id"])}/${
+                  data?.image[0]?.image_scales.image[0]?.scales?.preview
+                    ?.download
+                }}`}
+                alt=""
+                className="image"
+                width="150"
+                height="150"
+                loading="lazy"
+              />
+            </div>
+          )}
+        <figure className="quotation">
+          <blockquote className="quote-text">
+            <DetachedTextBlockEditor {...props} />
+          </blockquote>
+          <figcaption className="author">
+            <span className="person">{data.person}</span>
+            {data.position && `, ${data.position}`}
+          </figcaption>
+        </figure>
+      </div>
       <SidebarPortal selected={selected}>
         <QuoteBlockSidebar
           {...props}

diff --git a/src/components/View.jsx b/src/components/View.jsx
@@ -1,34 +1,35 @@
 import React from "react";
-import cx from "classnames";
 import { TextBlockView } from "@plone/volto-slate/blocks/Text";
+import config from "@plone/volto/registry";
+import { flattenToAppURL } from "@plone/volto/helpers";
 
 const View = (props) => {
   const { data } = props;
+
   return (
-    <div className={cx("block quote")}>
+    <div className="block quote">
       <div className="inner-wrapper">
-        {data?.image?.[0] && (
-          <div className="quote-image-wrapper">
-            <img
-              src={`${flattenToAppURL(
-                data.image[0]["@id"]
-              )}/@@images/image/preview`}
-              alt=""
-              width="150"
-              height="150"
-              loading="lazy"
-              className="quote-image"
-            />
-          </div>
-        )}
+        {config?.blocks?.blocksConfig?.quote.isImageAllowed &&
+          data?.image?.[0] && (
+            <div className="image-wrapper">
+              <img
+                src={`${flattenToAppURL(data?.image[0]["@id"])}/${
+                  data?.image[0]?.image_scales.image[0]?.scales?.preview
+                    ?.download
+                }}`}
+                alt={data.image[0].title}
+                className="image"
+                loading="lazy"
+              />
+            </div>
+          )}
         <figure className="quotation">
           <blockquote className="quote-text">
             <TextBlockView {...props} />
           </blockquote>
           <figcaption className="author">
             <span className="person">{data.person}</span>
-            {data.position && ", "}
-            {data.position}
+            {data.position && `, ${data.position}`}
           </figcaption>
         </figure>
       </div>

diff --git a/src/components/schema.js b/src/components/schema.js
@@ -1,21 +1,22 @@
+import config from "@plone/volto/registry";
 import { defineMessages } from "react-intl";
 
 const messages = defineMessages({
   quoteBlock: {
     id: "Quote",
-    defineMessage: "Quote",
+    defaultMessage: "Quote",
   },
   image: {
     id: "Image",
-    defineMessage: "Image",
+    defaultMessage: "Image",
   },
-  person: {
-    id: "Person",
-    defineMessage: "Person",
+  name: {
+    id: "Name",
+    defaultMessage: "Name",
   },
   position: {
     id: "Position",
-    defineMessage: "Position",
+    defaultMessage: "Position",
   },
 });
 
@@ -27,17 +28,26 @@ export const QuoteBlockSchema = (props) => {
       {
         id: "default",
         title: "Default",
-        fields: ["image", "person", "position"],
+        fields: config.blocks?.blocksConfig?.quote.isImageAllowed
+          ? ["image"]
+          : [],
+      },
+      {
+        id: "person",
+        title: "Person",
+        fields: ["person", "position"],
       },
     ],
     properties: {
       image: {
         title: props.intl.formatMessage(messages.image),
-        widget: "object-browser",
+        widget: "object_browser",
         mode: "image",
+        allowExternals: true,
+        selectedItemAttrs: ["image_field", "image_scales"],
       },
       person: {
-        title: props.intl.formatMessage(messages.person),
+        title: props.intl.formatMessage(messages.name),
       },
       position: {
         title: props.intl.formatMessage(messages.position),

diff --git a/src/index.js b/src/index.js
@@ -1,11 +1,10 @@
-import QuoteBlockView from "./components/View";
+import "./theme/main.less";
+
 import QuoteBlockEdit from "./components/Edit";
 import { QuoteBlockSchema } from "./components/schema";
-
+import QuoteBlockView from "./components/View";
 import quoteSVG from "@plone/volto/icons/quote.svg";
 
-import "./theme/main.less";
-
 const applyConfig = (config) => {
   config.blocks.blocksConfig.quote = {
     id: "quote",
@@ -20,6 +19,7 @@ const applyConfig = (config) => {
     restricted: false,
     mostUsed: true,
     sidebarTab: 1,
+    isImageAllowed: true,
   };
 
   return config;