Merge pull request #85 from keepsimpleio/dev

Hotfix: Article images

Author: MaryWylde

src/components/ArticleSection/ArticleSection.module.scss

@@ -8,6 +8,7 @@
     flex-wrap: wrap;
     gap: 28px;
     align-items: center;
+    justify-content: center;
   }
 
   .showMoreButtonWrapper {
@@ -50,14 +51,21 @@
   align-items: center;
   background-color: #f4f1eb80;
   padding: 0 0 40px 0;
-  padding-top: 80px;
+  margin-top: 80px;
   padding-bottom: 60px;
 
   .underline {
     width: 100% !important;
     object-fit: cover;
     margin-bottom: 35px;
   }
+  .wrapper {
+    max-width: 1140px;
+    margin: 0 auto;
+    padding: 40px 0;
+    h2 {
+    }
+  }
 }
 
 .darkTheme {

src/components/ContentGenerator/elements/ArticleImage/ArticleImage.tsx

@@ -17,33 +17,35 @@ type TImage = {
 
 const ArticleImage: FC<TImage> = ({ styles, src, alt }) => {
   const router = useRouter();
-
   const { locale } = router as TRouter;
   const currentLocale = locale === 'ru' ? 'ru' : 'en';
   const data = imageModuleData[currentLocale];
   const { zoomTitle, pinTitle, unpinTitle, newWindowTitle } = data;
   const [{ setZoomedImage, setPinnedImage }, { pinnedImage }] =
     useImageModule();
 
+  const strapiBase = process.env.NEXT_PUBLIC_STRAPI ?? '';
+  const imageSrc = src.includes(strapiBase) ? src : `${strapiBase}${src}`;
+
   const handleZoom = useCallback(() => {
-    setZoomedImage(src);
-  }, [src]);
+    setZoomedImage(imageSrc);
+  }, [imageSrc]);
 
   const handleTogglePin = useCallback(() => {
-    setPinnedImage(pinnedImage === src ? undefined : src);
-  }, [pinnedImage, src]);
+    setPinnedImage(pinnedImage === imageSrc ? undefined : imageSrc);
+  }, [pinnedImage, imageSrc]);
 
   const handleOpenInNewWindow = useCallback(() => {
-    window.open(src);
-  }, [src]);
+    window.open(imageSrc);
+  }, [imageSrc]);
 
   return (
     <div className={styles.image}>
       <div className={styles.imageActions}>
         <div className={styles.zoom} onClick={handleZoom} title={zoomTitle} />
         <div
           className={cn(styles.pin, {
-            [styles.unpin]: pinnedImage === src,
+            [styles.unpin]: pinnedImage === imageSrc,
           })}
           onClick={handleTogglePin}
           title={pinnedImage ? unpinTitle : pinTitle}
@@ -59,7 +61,7 @@ const ArticleImage: FC<TImage> = ({ styles, src, alt }) => {
         height={0}
         sizes="100vw"
         style={{ width: 'inherit', height: 'auto' }}
-        src={src}
+        src={imageSrc}
         alt={alt}
         onClick={handleZoom}
         data-cy="zoom-trigger"