updated gallery convert code

assets/pics/gallery/centerpiece/20230108_112718.jpg}.txt

@@ -0,0 +1 @@
+

gallery/centerpiece/convertToWebp.sh

@@ -3,30 +3,56 @@
 # Specify the input directory
 INPUT_DIR="../../assets/pics/gallery/centerpiece"
 
-# Ensure ImageMagick is installed
+# Array of image extensions to process (excluding webp)
+IMAGE_EXTENSIONS=("*.heic" "*.jpg" "*.jpeg" "*.png" "*.gif")
 
+# Loop through each image extension
+for ext in "${IMAGE_EXTENSIONS[@]}"; do
+    # Find files matching the current extension
+    for filename in $(find "$INPUT_DIR" -type f -name "$ext"); do
+        # Determine the output file name based on the original extension
+        case "$ext" in
+            *.heic)
+                CONVERTED_FILE="${filename%.heic}.webp"
+                ;;
+            *.jpg|*.jpeg)
+                CONVERTED_FILE="${filename%.{jpg,jpeg}}.webp"
+                ;;
+            *.png)
+                CONVERTED_FILE="${filename%.png}.webp"
+                ;;
+            *.gif)
+                CONVERTED_FILE="${filename%.gif}.webp"
+                ;;
+            *) # Default case for unknown file types (if you add more later)
+                echo "Unknown file type: $filename"
+                continue # Skip to the next file
+                ;;
+        esac
 
-for filename in $(find "$INPUT_DIR" -type f -name "*.heic"); do
+        # Skip if already converted
-    # Define the output file name
+        if [[ -f "$CONVERTED_FILE" ]]; then
-    CONVERTED_FILE="${filename%.heic}.webp"
+            echo "Skipping $filename, already converted."
+            continue
+        fi
 
-    # Skip if already converted
+        # Convert to WEBP
-    if [[ -f "$CONVERTED_FILE" ]]; then
+        echo "Converting $filename to $CONVERTED_FILE..."
-        echo "Skipping $filename, already converted."
+        convert "$filename" -quality 85 "$CONVERTED_FILE"
-        continue
-    fi
 
-    # Convert HEIC to WEBP
+        # Verify conversion success
-    echo "Converting $filename to $CONVERTED_FILE..."
+        if [[ -f "$CONVERTED_FILE" ]]; then
-    convert "$filename" -quality 85 "$CONVERTED_FILE"
+            # Create a blank text file (caption file)
+            txt_file="${CONVERTED_FILE%.webp}.txt"
+            echo -e "" > "$txt_file"
+            echo "Successfully converted $filename to $CONVERTED_FILE and created ${txt_file}"
 
-    # Verify conversion success
+            # Delete the original file
-    if [[ -f "$CONVERTED_FILE" ]]; then
+            echo "Deleting original file: $filename"
-        # Create a blank text file
+            rm "$filename"
-        txt_file="${CONVERTED_FILE%.webp}.txt"
+
-        echo -e "" > "$txt_file"
+        else
-        echo "Successfully converted $filename to $CONVERTED_FILE and created ${txt_file}"
+            echo "Error converting $filename"
-    else
+        fi
-        echo "Error converting $filename"
+    done
-    fi
+done
-done

gallery/centerpiece/index.html

@@ -98,6 +98,24 @@
         <div class="container">
             <h1 class="title has-text-centered has-text-dark">Centerpieces</h1>
             <div class="gallery">
+                <div class="gallery-item">
+                    <figure class="image is-square">
+                        <img src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="" data-target="modal1" aria-haspopup="true">
+                    </figure>
+                    <p class="caption"></p>
+                </div>
+                <div class="modal" id="modal1">
+                    <div class="modal-background"></div>
+                    <div class="modal-card">
+                        <header class="modal-card-head">
+                            <p class="modal-card-title"></p>
+                            <button class="delete" aria-label="close" data-action="close"></button>
+                        </header>
+                        <section class="modal-card-body">
+                            <img class="modal-image" src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="">
+                        </section>
+                    </div>
+                </div>
             </div>
         </div>
     </section>