SDK usage

.env

@@ -1,2 +1 @@
-VITE_CLOUD_NAME=eventography
-VITE_CLOUDINARY_CLOUD_FOLDER_URL=https://res.cloudinary.com/eventography/image/upload/q_auto/v1712555809/events/
+VITE_CLOUD_NAME=eventography

src/CloudinaryUploadWidget.jsx

@@ -1,7 +1,6 @@
 import { useEffect, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import { updateEventData } from "./helpers/firebase";
-import { imageOptimizationUrl } from "./helpers/cloudinaryHelpers";
 import { getEventIdFromUrl } from "./helpers/urlHelpers";
 
 function CloudinaryUploadWidget({ uwConfig, docSnap }) {
@@ -75,7 +74,7 @@ function CloudinaryUploadWidget({ uwConfig, docSnap }) {
         } else {
           setImages(prevImages => [
             ...prevImages,
-            imageOptimizationUrl(img.uploadInfo.url, "q_auto"),
+            img.uploadInfo.url,
           ]);
           setThumbnails(prevThumbnails => [
             ...prevThumbnails,

src/Gallery.jsx

@@ -2,12 +2,19 @@ import { useEffect, useState } from 'react';
 import './Gallery.css';
 import { getEventIdFromUrl } from './helpers/urlHelpers';
 import { getEventData } from './helpers/firebase';
+import { AdvancedImage } from '@cloudinary/react';
+import {Cloudinary} from "@cloudinary/url-gen";
 
 const Gallery = () => {
   const [showFullImage, setShowFullImage] = useState(false);
   const [selectedImage, setSelectedImage] = useState(null);
   const [docSnap, setDocSnap] = useState(null);
   const [loadingStates, setLoadingStates] = useState([]);
+  const cld = new Cloudinary({
+    cloud: {
+      cloudName: import.meta.env.VITE_CLOUD_NAME
+    }
+  });
 
   const eventId = getEventIdFromUrl(window.location.pathname);
 
@@ -26,8 +33,7 @@ const Gallery = () => {
 
   const handleThumbnailClick = (imgUrl) => {
     const imageName = imgUrl.substring(imgUrl.lastIndexOf('/') + 1);
-    const imageUrlPath = import.meta.env.VITE_CLOUDINARY_CLOUD_FOLDER_URL;
-    const urlBuilder = `${imageUrlPath}${eventId}/${imageName}`;
+    const urlBuilder = `events/${eventId}/${imageName}`;
     setShowFullImage(true);
     setSelectedImage(urlBuilder);
   };
@@ -56,7 +62,7 @@ const Gallery = () => {
             <button className="close-btn" onClick={handleCloseFullImage}>
               Close
             </button>
-            <img src={selectedImage} alt="Full Size" className="full-image" />
+            <AdvancedImage cldImg={cld.image(selectedImage).delivery('q_auto').format('auto')} className="full-image"/>
           </div>
         )}
         {!showFullImage && docSnap?.thumbnails?.length > 0 ? (