update

config.yaml

@@ -28,7 +28,7 @@ params:
       - categoryName: 'Chandeliers'
         img: /img/catalog/AerialWave.png.webp
         alt:
-      - categoryName: 'Signaturepieces'
+      - categoryName: 'Signature Pieces'
         img: /img/catalog/7ftMirror1.jpg.webp
         alt:
         style: "transform: translateY(-25%);"

content/catalog/index.md

@@ -54,7 +54,7 @@ catalog:
   deliveryPickup: $30
   installBreakdown: $50
   purchaseCost: $260
-  cat: Centerpieces
+  cat: Backdrops
   thumbnail: /img/catalog/SteelSmallFrameAcylicBackdrop3.jpg.webp
   gallery:
   - image: /img/catalog/SteelSmallFrameAcylicBackdrop.jpg.webp
@@ -103,15 +103,6 @@ catalog:
   - image: /img/catalog/ChandelierStands3.jpg.webp
   - image: /img/catalog/ChandelierStands4.jpg.webp
 
-- item: Steel Small-frame Acylic Backdrop
-  quant: 3
-  dimensions: 96" x 24", 72" x 18", 72" x 12"
-  baseCost: $60
-  deliveryPickup: $30
-  installBreakdown: $50
-  purchaseCost: $330
-  cat: Backdrops
-
 - item: Curvy Stands
   quant: 5
   dimensions: 84" tall, 14" wide
@@ -119,7 +110,7 @@ catalog:
   deliveryPickup: $40
   installBreakdown: $50
   purchaseCost: $340
-  cat: Signaturepieces
+  cat: Signature Pieces
   thumbnail: /img/catalog/CurvyStands2.jpg.webp
   gallery:
   - image: /img/catalog/CurvyStands.png.webp
@@ -198,7 +189,7 @@ catalog:
   deliveryPickup: $80
   installBreakdown: $120
   purchaseCost: $440
-  cat: Signaturepieces
+  cat: Signature Pieces
   thumbnail: /img/catalog/ChicTreeStand.png.webp
   gallery:
   - image: /img/catalog/ChicTreeStand.png.webp
@@ -281,7 +272,7 @@ catalog:
   deliveryPickup: $120
   installBreakdown: $200
   purchaseCost: $580
-  cat: Signaturepieces
+  cat: Signature Pieces
   thumbnail: /img/catalog/9ftTreeStand2.png.webp
   gallery:
   - image: /img/catalog/9ftTreeStand.png.webp
@@ -517,7 +508,7 @@ catalog:
   deliveryPickup: $160
   installBreakdown: $400
   purchaseCost: $1,450
-  cat: Signaturepieces
+  cat: Signature Pieces
   thumbnail: /img/catalog/7ftMirror.jpg.webp
   gallery:
   - image: /img/catalog/7ftMirror.jpg.webp

themes/gallo/layouts/partials/catalog-gallery.html

@@ -0,0 +1,140 @@
+<section id="gallery" class="w-full justify-center">
+  <div
+    class="carousel-wrapper mx-auto max-w-[900px] md:max-w-[1500px] flex relative justify-center items-center"
+  >
+    <button
+      id="prev"
+      class="absolute left-0 top-1/2 transform -translate-y-1/2 w-1/2 h-full text-white flex items-center justify-start pl-8"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="fill-current w-6 sm:w-4"
+        viewBox="0 0 320 512"
+      >
+        <path
+          d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
+        />
+      </svg>
+    </button>
+    <div class="carousel" data-current="0">
+      {{ $gallery := .Site.Params.gallery.home }} {{ range $index, $image :=
+      $gallery }}
+      <img
+        src="{{ $image.url | safeURL }}"
+        alt="{{ $image.alt }}"
+        class="carousel-image h-[20rem] sm:h-[30rem] xl:h-[40rem] w-auto rounded-md"
+        data-index="{{ $index }}"
+      />
+      {{ end }}
+    </div>
+    <button
+      id="next"
+      class="absolute right-0 top-1/2 transform -translate-y-1/2 w-1/2 h-full text-white flex items-center justify-end pr-8"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="fill-current w-6 sm:w-4"
+        viewBox="0 0 320 512"
+      >
+        <path
+          d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
+        />
+      </svg>
+    </button>
+  </div>
+  <div
+    class="thumbnails flex justify-left 2xl:justify-center mt-2 overflow-x-scroll pb-2"
+  >
+    {{ $gallery := .Site.Params.gallery.home }} {{ range $index, $image :=
+    $gallery }}
+    <img
+      loading="lazy"
+      src="{{ $image.url | safeURL }}"
+      alt="{{ $image.alt }}"
+      class="thumbnail transition-opacity duration-400 cursor-pointer m-1 h-[5rem] sm:h-[10rem] w-auto rounded-md opacity-20"
+      data-index="{{ $index }}"
+    />
+    {{ end }}
+  </div>
+</section>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const carousel = document.querySelector(".carousel");
+    const images = Array.from(document.querySelectorAll(".carousel-image"));
+    const thumbnails = Array.from(document.querySelectorAll(".thumbnail"));
+    const thumbnailContainer = document.querySelector(".thumbnails");
+
+    let currentIndex = 0;
+
+    const showImage = (index) => {
+      carousel.dataset.current = index;
+
+      images.forEach((img, i) => {
+        img.style.display = i === index ? "block" : "none";
+      });
+
+      const thumbnail = thumbnails[index];
+      smoothScrollTo(thumbnailContainer, thumbnail);
+    };
+
+    const handleButtonClick = (direction) => () => {
+      currentIndex = (currentIndex + direction + images.length) % images.length;
+      showImage(currentIndex);
+      addBorderToThumbnail(currentIndex);
+    };
+
+    const addBorderToThumbnail = (index) => {
+      thumbnails.forEach((thumbnail, i) => {
+        if (i === index) {
+          thumbnail.classList.add("!opacity-90");
+        } else {
+          thumbnail.classList.remove("!opacity-90");
+        }
+      });
+    };
+
+    const smoothScrollTo = (element, targetElement) => {
+      let startTime = null;
+      const duration = 500;
+
+      const scrollStep = (timestamp) => {
+        if (!startTime) startTime = timestamp;
+        const progress = Math.min((timestamp - startTime) / duration, 1);
+
+        element.scrollLeft =
+          element.scrollLeft +
+          (targetElement.offsetLeft -
+            element.offsetWidth / 2 +
+            targetElement.offsetWidth / 2 -
+            element.scrollLeft) *
+            0.1 *
+            progress;
+
+        if (progress < 1) {
+          requestAnimationFrame(scrollStep);
+        }
+      };
+
+      requestAnimationFrame(scrollStep);
+    };
+
+    document
+      .getElementById("prev")
+      .addEventListener("click", handleButtonClick(-1));
+    document
+      .getElementById("next")
+      .addEventListener("click", handleButtonClick(1));
+
+    thumbnails.forEach((thumbnail, index) => {
+      thumbnail.addEventListener("click", () => {
+        currentIndex = index;
+        showImage(index);
+        addBorderToThumbnail(currentIndex);
+      });
+    });
+
+    showImage(0);
+    addBorderToThumbnail(0);
+  });
+</script>

themes/gallo/layouts/partials/rental_catalog.html

@@ -42,7 +42,7 @@
       loading="lazy"
       src="{{ .thumbnail }}"
       alt="Thumbnail"
-      class="w-full h-52 rounded-md object-cover"
+      class="w-full aspect-square rounded-md object-cover"
     />
     {{ else }}
 
@@ -136,83 +136,60 @@
         >
           <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
             <div class="sm:flex sm:items-start">
-              <div
-                class="w-full mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-black sm:mx-0 sm:h-10 sm:w-10"
-              >
-                <svg
-                  class="h-6 w-6 text-white"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  aria-hidden="true"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-              </div>
               <div class="w-full mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                 <h3 class="text-xl mb-2" id="modal-title">
                   <strong>{{ .item }}</strong>
                 </h3>
-                {{ if .gallery }}
-                <div
-                  class="w-full mt-8 columns-1 gap-2 sm:columns-2 sm:gap-4 [&>div:not(:first-child)]:mt-4"
-                >
-                  {{ range .gallery }}
-                  <div
-                    class="relative"
-                  >
-                    <img
-                      loading="lazy"
-                      class="rounded-md w-full"
-                      src="{{ .image }}"
-                    />
-                  </div>
-                  {{ end }}
-                </div>
-                {{ end }}
-                <div class="px-1 pt-4 w-full">
-                  <div class="text-gray-800 text-base">
+                {{ partial "catalog-gallery.html" . }}
+                <div class="px-4 pt-6 w-full">
+                  <div class="text-sm text-gray-800 text-base mb-4">
                     {{ if ne .quant "" }}
                     <div class="flex flex-row justify-between">
                       <strong>Quantity:</strong>
                       <span>{{ .quant }}</span>
                     </div>
                     {{ end }} {{ if ne .dimensions "" }}
-                    <div class="flex flex-row justify-between">
+                    <div class="gap-1 text-right flex flex-row justify-between">
                       <strong>Dimensions:</strong>
                       <span>{{ .dimensions }}</span>
                     </div>
                     {{ end }} {{ if ne .baseCost "" }}
                     <div class="flex flex-row justify-between">
-                      <strong>Base Cost:</strong>
+                      <strong>Rental Cost:</strong>
                       <span>{{ .baseCost }}</span>
                     </div>
                     {{ end }} {{ if ne .deliveryPickup "" }}
                     <div class="flex flex-row justify-between">
-                      <strong>Pickup & Delivery:</strong>
+                      <strong>+ Pickup & Delivery:</strong>
                       <span>{{ .deliveryPickup }}</span>
                     </div>
                     {{ end }} {{ if ne .installBreakdown "" }}
                     <div class="flex flex-row justify-between">
-                      <strong>Setup & Breakdown:</strong>
+                      <strong>+ Setup & Breakdown:</strong>
                       <span>{{ .installBreakdown }}</span>
                     </div>
-                    {{ end }} {{ if ne .purchaseCost "" }}
+                    {{ end }}
+                  </div>
+                  <div class="grid grid-cols-2">
+                    {{ if ne .baseCost "" }}
+                    <div class="border rounded-s-lg p-2 flex justify-between">
+                      <strong>Rental Cost:</strong>
+                      <span>{{ .baseCost }}</span>
+                    </div>
+                    {{ else }}
                     <div
-                      class="flex flex-row justify-between border-[1px] rounded-lg px-4 h-10 py-[0.275rem] w-full mt-4"
+                      class="border rounded-s-lg p-2 text-gray-600 text-center"
                     >
+                      <strong>Rental Unavailable</strong>
+                    </div>
+                    {{ end }} {{ if ne .purchaseCost "" }}
+                    <div class="border border-s-0 rounded-e-lg p-2 flex justify-between">
                       <strong>Purchase Cost:</strong>
                       <span>{{ .purchaseCost }}</span>
                     </div>
                     {{ else }}
                     <div
-                      class="flex justify-center border-[1px] rounded-lg px-4 h-10 py-[0.275rem] text-gray-600 mt-4 w-full"
+                      class="border border-s-0 rounded-e-lg p-2 text-gray-600 text-center"
                     >
                       <strong>Purchase Unavailable</strong>
                     </div>
@@ -225,7 +202,7 @@
           <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
             <button
               id="close-modal"
-              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-black text-base font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:ml-3 sm:w-auto sm:text-sm"
+              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm p-2 px-4 bg-black text-base font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:ml-3 sm:w-auto sm:text-sm"
               @click="open = false"
             >
               Close
@@ -252,7 +229,10 @@
 
       items.forEach((item) => {
         const itemCategory = item.querySelector(".bg-blue-100");
-        if (!category || itemCategory.textContent === category) {
+        if (
+          !category ||
+          decodeURIComponent(itemCategory.textContent.trim()) === category
+        ) {
           item.classList.remove("hidden");
         } else {
           item.classList.add("hidden");
@@ -266,26 +246,30 @@
 
     function updateUrl(category) {
       const url = window.location.href.split("#")[0];
-      const newUrl = category ? `${url}#${category}` : url;
+      const newUrl = category ? `${url}#${encodeURIComponent(category)}` : url;
       window.history.replaceState({}, "", newUrl);
     }
 
-    const category = window.location.hash.substring(1);
+    function handleCategoryChange(category) {
+      console.log("Selected category:", category);
+      updateUrl(category);
+      filterItems(category);
+    }
+
+    const category = decodeURIComponent(window.location.hash.substring(1));
     console.log("Initial category:", category);
-    filterItems(category);
+    handleCategoryChange(category);
 
     window.addEventListener("hashchange", function () {
-      const newCategory = window.location.hash.substring(1);
+      const newCategory = decodeURIComponent(window.location.hash.substring(1));
       console.log("New category:", newCategory);
-      filterItems(newCategory);
+      handleCategoryChange(newCategory);
     });
 
     radioButtons.forEach((radio) => {
       radio.addEventListener("change", function () {
         const category = this.value;
-        console.log("Selected category:", category);
-        updateUrl(category);
-        filterItems(category);
+        handleCategoryChange(category);
       });
     });