Refs #267520 - Custom view for News Items, add styles.

src/components/theme/Views/NewsItemView.jsx

@@ -1,17 +1,9 @@
-// import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
 import React from 'react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import { Label } from 'semantic-ui-react';
 import { BannerTitle } from '@eeacms/volto-insitu-policy/components';
-
-// const Date = (props) => {
-//   const date = props.content?.effective;
-//   return date ? (
-//     <>
-//       <When start={date} end={date} whole_day={true} open_end={false} />
-//     </>
-//   ) : null;
-// };
+import { HTMLField, isOldFormat } from '@eeacms/volto-insitu-policy/helpers';
+import './styles.less';
 
 const SubjectTags = (props) => {
   const tags = props.content?.subjects;
@@ -32,8 +24,23 @@ function NewsItemView(props) {
     <div className="insitu-newsitem-view">
       <BannerTitle content={content} />
       <div className="ui container">
+        {isOldFormat(content) && (
+          <>
+            <p className="documentDescription eea callout">
+              {content.description}
+            </p>
+            <div className="lead-img">
+              <img
+                className="main-img"
+                src={content.image.download}
+                alt={content.title}
+              />
+              <p className="main-img-caption">{content.image_caption}</p>
+            </div>
+            <HTMLField value={content.text} />
+          </>
+        )}
         <RenderBlocks {...props} />
-        {/* <Date {...props} /> */}
         <SubjectTags {...props} />
       </div>
     </div>

src/components/theme/Views/styles.less

@@ -0,0 +1,19 @@
+div.insitu-newsitem-view {
+  p.documentDescription.callout {
+    background: #eee;
+  }
+
+  div.lead-img {
+    margin: 1em;
+    text-align: center;
+
+    img.main-img {
+      width: auto;
+      max-height: 700px;
+    }
+
+    p.main-img-caption {
+      background: #ccc;
+    }
+  }
+}

src/helpers/Utils.jsx

@@ -0,0 +1,16 @@
+export const HTMLField = ({ value, className }) => {
+  if (value === null) {
+    return <></>;
+  }
+
+  return (
+    <div
+      className={className}
+      dangerouslySetInnerHTML={{ __html: value?.data }}
+    ></div>
+  );
+};
+
+export const isOldFormat = ({ content }) => {
+  return true;
+};

src/helpers/index.js

@@ -0,0 +1 @@
+export { HTMLField, isOldFormat } from './Utils';