feat: allow to upload larger images without cropping any part of the image

components/Marker/Marker.tsx

@@ -1,12 +1,12 @@
-import { useMemo } from 'react';
-import Image from 'next/image';
+import { useState, useMemo, useEffect } from 'react';
 import { Marker as MarkerContainer, Popup } from 'react-leaflet';
 import { IPin } from '~/lib/types';
 import { getRelativeTimeString, getNameString, getDistance } from '~/lib/utils';
 import { getIcon, getFullDateString } from './utils';
 import AuthorIcon from '../AuthorIcon';
-
-import styles from './style.module.css';
+import localStyles from './style.module.css';
+import 'styles/globals.css';
+import Image from 'next/image';
 
 const Marker = ({
   type,
@@ -15,47 +15,76 @@ const Marker = ({
   country,
   author,
   photo,
-  date
+  date,
+  orientation
 }: IPin) => {
-  const icon = getIcon(type);
-
+  const icon = useMemo(() => getIcon(type), [type]);
   const name = useMemo(() => getNameString(author), [author]);
 
+  const [imageOrientation, setImageOrientation] = useState(
+    orientation || 'vertical'
+  );
+
+  const handleImageLoad = (img: HTMLImageElement): void => {
+    setImageOrientation(img.width > img.height ? 'horizontal' : 'vertical');
+  };
+
+  const popupClassName = useMemo(() => {
+    const isMobile = window.innerWidth <= 500;
+
+    if (isMobile) {
+      return imageOrientation === 'horizontal' ? '401:250' : '351:550';
+    } else {
+      return imageOrientation === 'horizontal' ? '651:400' : '301:470';
+    }
+  }, [imageOrientation]);
+
+  useEffect(() => {
+    if (orientation || !photo) return;
+    const img = new window.Image();
+    img.src = photo;
+    img.onload = () => handleImageLoad(img);
+  }, [photo, orientation]);
+
+  const [width, height] = useMemo(
+    () => popupClassName.split(':').map(Number),
+    [popupClassName]
+  );
+
   return (
     <MarkerContainer
       icon={icon}
       position={coordinates}
       title={`${name} at ${city}`}
     >
-      <Popup>
-        <div>
-          <div className={styles.background}>
-            <div className={styles.text}>
-              <h1 className={styles.title}>
-                {city}, {country}
-              </h1>
-              <span className={styles.light}>
-                <i className="bi bi-calendar"></i> {getFullDateString(date)} (
-                {getRelativeTimeString(date)})
-              </span>
-              <br />
-              <span className={styles.light}>
-                <i className="bi bi-signpost-fill"></i>{' '}
-                {Math.round(getDistance(coordinates))} km away
-              </span>
-              <br />
-              <span>
-                <AuthorIcon author={author} /> {name}
-              </span>
-            </div>
-          </div>
+      <Popup className={localStyles.popup}>
+        <div className={localStyles.imageContainer} style={{ width, height }}>
           <Image
             alt={`${name} at ${city}`}
             src={photo}
+            width={width}
+            height={height}
             layout="fill"
-            objectFit="cover"
-            className={styles.image}
+            className={localStyles.roundedImage}
           />
+          <div className={localStyles.textOverlay}>
+            <h1 className={localStyles.title}>
+              {city}, {country}
+            </h1>
+            <span className={localStyles.light}>
+              <i className="bi bi-calendar"></i> {getFullDateString(date)} (
+              {getRelativeTimeString(date)})
+            </span>
+            <br />
+            <span className={localStyles.light}>
+              <i className="bi bi-signpost-fill"></i>{' '}
+              {Math.round(getDistance(coordinates))} km away
+            </span>
+            <br />
+            <span>
+              <AuthorIcon author={author} /> {name}
+            </span>
+          </div>
         </div>
       </Popup>
     </MarkerContainer>

components/Marker/style.module.css

@@ -1,41 +1,69 @@
-.background {
+.imageContainer {
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.popup {
+  overflow: hidden;
+  border-radius: 10px;
+}
+
+.image {
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.textOverlay {
   position: absolute;
-  z-index: 1;
-  bottom: 0px;
-  left: 0px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  padding: 20px;
   background: linear-gradient(
     360deg,
     rgba(0, 0, 0, 0.7) 0%,
     rgba(255, 255, 255, 0) 55%
   );
-  width: 100%;
-  height: 95%;
-  border-radius: 10px;
-}
-
-.text {
-  position: absolute;
-  z-index: 2;
-  color: white;
-  bottom: 20px;
-  left: 20px;
-  right: 20px;
   text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
   font-weight: 500;
   font-family: Inter, sans-serif;
   line-height: 1.6;
+  color: white;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
 }
 
 .title {
+  margin: 0 0 10px;
+  font-size: 25px;
   line-height: 1.2;
 }
 
 .light {
-  font-weight: 400;
+  font-size: 14px;
+  opacity: 1;
 }
 
-.image {
-  border-radius: 10px;
-  overflow: hidden;
-  z-index: 0;
+@media (max-width: 500px) {
+  .title {
+    margin: 0 0 10px;
+    font-size: 20px;
+    line-height: 1;
+  }
+
+  .light {
+    font-size: 12px;
+    opacity: 1;
+  }
+}
+.horizontal img {
+  width: 651px !important;
+  height: 400px !important;
+}
+
+.vertical img {
+  width: 301px !important;
+  height: 470px !important;
 }

lib/types/pin.ts

@@ -17,4 +17,5 @@ export interface IPin {
   photo: string;
   type?: EPinType;
   streetview?: string;
+  orientation?: string;
 }

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

styles/globals.css

@@ -22,13 +22,67 @@ body {
   border-radius: 10px;
   background: rgba(0, 0, 0, 0.2);
 }
+
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(0, 0, 0, 0.4);
 }
 
 .leaflet-popup-content {
-  width: 301px;
-  height: 470px;
+  width: auto !important;
+  max-width: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+  background: white !important;
+  border: none !important;
+  border-radius: 12px;
+  padding: 0px;
+}
+
+.leaflet-popup-content-wrapper img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: 10px;
+  border: none !important;
+}
+
+@media (max-width: 500px) {
+  .leaflet-popup-content-wrapper {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .horizontal .leaflet-popup-content-wrapper {
+    width: 401px !important;
+    height: 250px !important;
+  }
+
+  .vertical .leaflet-popup-content-wrapper {
+    width: 351px !important;
+    height: 550px !important;
+  }
+}
+
+.textOverlay {
+  padding: 10px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  border-radius: 0 0 15px 15px;
 }
 
 .custom-marker-cluster {