Merge pull request #502 from cofacts/related-media-articles

Support showing similar images in side section
cofacts · Sep 7, 2022 · caa6393 · caa6393
2 parents 32f1d6c + 217fde4
commit caa6393
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 1 deletion.
diff --git a/components/SideSection.js b/components/SideSection.js
@@ -122,3 +122,13 @@ export const SideSectionText = withStyles(() => ({
     </article>
   );
 });
+
+export const SideSectionImage = withStyles(() => ({
+  asideImage: {
+    maxWidth: '100%',
+    maxHeight: '100px',
+    verticalAlign: 'bottom',
+  },
+}))(({ classes, className, ...props }) => {
+  return <img className={cx(classes.asideImage, className)} {...props} />;
+});
diff --git a/components/SideSection.stories.js b/components/SideSection.stories.js
@@ -6,6 +6,7 @@ import {
   SideSectionLinks,
   SideSectionLink,
   SideSectionText,
+  SideSectionImage,
 } from './SideSection';
 
 export default {
@@ -36,6 +37,12 @@ export const SideSectionStructure = () => (
             section 3 Side section 3 Side section 3 Side section 3{' '}
           </SideSectionText>
         </SideSectionLink>
+        <SideSectionLink>
+          <SideSectionImage src="https://placekitten.com/300/200" />
+        </SideSectionLink>
+        <SideSectionLink>
+          <SideSectionImage src="https://placekitten.com/200/500" />
+        </SideSectionLink>
       </SideSectionLinks>
     </SideSection>
   </Container>

diff --git a/components/__snapshots__/SideSection.stories.storyshot b/components/__snapshots__/SideSection.stories.storyshot
@@ -60,6 +60,34 @@ exports[`Storyshots SideSection Side Section Structure 1`] = `
               </Component>
             </a>
           </Component>
+          <Component>
+            <a
+              className="Component-asideItem"
+            >
+              <Component
+                src="https://placekitten.com/300/200"
+              >
+                <img
+                  className="Component-asideImage"
+                  src="https://placekitten.com/300/200"
+                />
+              </Component>
+            </a>
+          </Component>
+          <Component>
+            <a
+              className="Component-asideItem"
+            >
+              <Component
+                src="https://placekitten.com/200/500"
+              >
+                <img
+                  className="Component-asideImage"
+                  src="https://placekitten.com/200/500"
+                />
+              </Component>
+            </a>
+          </Component>
         </div>
       </Component>
     </aside>

diff --git a/pages/article/[id].js b/pages/article/[id].js
@@ -30,6 +30,7 @@ import {
   SideSectionLinks,
   SideSectionLink,
   SideSectionText,
+  SideSectionImage,
 } from 'components/SideSection';
 import Hyperlinks from 'components/Hyperlinks';
 import CurrentReplies from 'components/CurrentReplies';
@@ -145,6 +146,8 @@ const LOAD_ARTICLE = gql`
           node {
             id
             text
+            articleType
+            attachmentUrl(variant: THUMBNAIL)
             articleCategories {
               categoryId
             }
@@ -496,7 +499,11 @@ function ArticlePage() {
                   passHref
                 >
                   <SideSectionLink>
-                    <SideSectionText>{node.text}</SideSectionText>
+                    {node.articleType === 'IMAGE' ? (
+                      <SideSectionImage src={node.attachmentUrl} />
+                    ) : (
+                      <SideSectionText>{node.text}</SideSectionText>
+                    )}
                     <ArticleInfo className={classes.asideInfo} article={node} />
                   </SideSectionLink>
                 </Link>