Image Changes

components/boards/column.tsx

@@ -369,7 +369,7 @@ export default function Column(props) {
                                                     <span className="itemOrder rowIndexOrder">
                                                         <i className={`itemIndex ${item.complete ? `completedIndex` : `activeIndex`}`}>{itemIndex + 1}</i>
                                                     </span>
-                                                    {item?.image && <img className={`itemImage`} style={{maxWidth: 175, maxHeight: 350, width: `auto`, marginLeft: -13}} src={item?.image} alt={item?.content} />}
+                                                    {item?.image && <img className={`itemImage boardItemImage`} src={item?.image} alt={item?.content} />}
                                                     <div className="itemContents">
                                                         <span className="flex row itemContent boardItemContent itemName textOverflow extended">
                                                             {/* <textarea onBlur={(e) => changeLabel(e, item)} className={`changeLabel`} defaultValue={item.content} /> */}

components/boards/itemdetail.tsx

@@ -1,7 +1,8 @@
+import Image from 'next/image';
 import { useState } from 'react';
+import { formatDate } from '../../pages/_app';
 import { getSubTaskPercentage } from './column';
 import { buildStyles, CircularProgressbar } from 'react-circular-progressbar';
-import { formatDate } from '../../pages/_app';
 
 export default function ItemDetail(props) {
     let [disabled, setDisabled] = useState(false);
@@ -53,7 +54,28 @@ export default function ItemDetail(props) {
 
     return (
         <div id={`detail_view_${item?.id}`} className={`detailView flex row`}>
-            {image && <img className={`itemImage`} src={image} alt={item?.content} style={{minWidth: `50%`, maxWidth: `50%`, maxHeight: 675}} onError={(e) => setDisabled(true)} onLoad={(e) => setDisabled(false)} />}
+            {image && (
+            //     <Image
+            //     className={`itemImage detailViewImage`}
+            //     src={image}
+            //     alt={item?.content}
+            //     layout={`responsive`}
+            //     width={500}
+            //     height={500}
+            //     onError={(e) => setDisabled(true)}
+            //     onLoad={(e) => setDisabled(false)}
+            //     onLoadingComplete={(result: any) => {
+            //       if (result.error) {
+            //         console.log(`Error`);
+            //         setDisabled(true);
+            //       } else {
+            //         console.log(`Image Loaded`);
+            //         setDisabled(false);
+            //       }
+            //     }}
+            //   />
+                <img className={`itemImage detailViewImage`} src={image} alt={item?.content} onError={(e) => setDisabled(true)} onLoad={(e) => setDisabled(false)} />
+            )}
             <form onInput={(e) => refreshDetails(e)} onSubmit={(e) => saveItem(e)} className={`changeInputs flex isColumn`} data-index={index + 1}>
                 <div className={`formTop`}>
                     <h3><strong>{item?.content}</strong> - Details</h3>

main.scss

@@ -1583,6 +1583,18 @@ textarea {
                     margin-bottom: 0 !important;
                 }
 
+                .boardItemImage {
+                    width: auto;
+                    min-height: 75px;
+                    max-width: 175px;
+                    max-height: 350px; 
+                    margin-left: -13px;
+                    align-self: stretch;
+                    height: 100% !important;
+                    object-position: top left;
+                    object-fit: cover !important;
+                }
+
                 // img {
                 //     &.itemImage {
                 //         border-top: solid 1px var(--gameBlue);
@@ -2758,6 +2770,11 @@ footer {
 }
 
 .detailView {
+    .detailViewImage {
+        min-width: 50%;
+        max-width: 50%;
+        max-height: 675px;
+    }
     form {
         .formTop {
             width: 100%;

next.config.js

@@ -1,6 +1,16 @@
 const withNextra = require('nextra')({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.tsx',
-})
+});
 
-module.exports = withNextra()
+const nextConfig = {
+  images: {
+    domains: [
+      'i.ytimg.com',
+      'media.discordapp.net',
+      // Add any other domains you want to allow here
+    ],
+  },
+};
+
+module.exports = withNextra(nextConfig);