add new artist images and update artist gallery

content/art/index.md

@@ -1,48 +1,9 @@
 ---
 title: The Artist
 date: 2024-05-22T12:47:43-04:00
-masonryGallery:
-  - image: /img/art/1.webp
-  - image: /img/art/2.webp
-  - image: /img/art/3.webp
-  - image: /img/art/4.webp
-  - image: /img/art/5.webp
-  - image: /img/art/6.webp
-  - image: /img/art/7.webp
-  - image: /img/art/8.webp
-  - image: /img/art/9.webp
-  - image: /img/art/11.webp
-  - image: /img/art/12.webp
-  - image: /img/art/13.webp
-  - image: /img/art/14.webp
-  - image: /img/art/15.webp
-  - image: /img/art/16.webp
-  - image: /img/art/17.webp
-  - image: /img/art/18.webp
-  - image: /img/art/19.webp
-  - image: /img/art/21.webp
-  - image: /img/art/22.webp
-  - image: /img/art/23.webp
-  - image: /img/art/24.webp
-  - image: /img/art/25.webp
-  - image: /img/art/26.webp
-  - image: /img/art/27.webp
-  - image: /img/art/28.webp
-  - image: /img/art/29.webp
-  - image: /img/art/31.webp
-  - image: /img/art/32.webp
-  - image: /img/art/33.webp
-  - image: /img/art/34.webp
-  - image: /img/art/35.webp
-  - image: /img/art/36.webp
-  - image: /img/art/37.webp
-  - image: /img/art/38.webp
-  - image: /img/art/39.webp
-  - image: /img/art/41.webp
-  - image: /img/art/42.webp
-  - image: /img/art/43.webp
-  - image: /img/art/44.webp
-  - image: /img/art/45.webp
+art:
+  - main: /img/art/1.webp
+    galleryImage: 
 ---
 Introducing **Ian Gallo**, a metal sculpture artist who is rapidly making a name for himself through his unique approach to metalworking.
 

themes/gallo/layouts/_default/single.html

@@ -7,11 +7,12 @@
       {{ partial "metadata.html" . }}
       <div class="mt-2 flex flex-col gap-4">{{ .Content }}</div>
       {{ partial "buttons.html" . }} {{ if .Params.catalog }} {{ partial
-      "rental-catalog.html" . }} {{ end }}
+      "rental_catalog.html" . }} {{ end }}
+      {{ if .Params.art }} {{ partial
+        "artist_catalog.html" . }} {{ end }}
     </div>
 
-    {{ partial "questions.html" . }} {{ partial "gallery.html" . }} {{ partial
-    "masonry_gallery.html" . }}
+    {{ partial "questions.html" . }} {{ partial "gallery.html" . }}
   </div>
 </div>
 {{ end }}

themes/gallo/layouts/partials/artist_catalog.html

@@ -0,0 +1,226 @@
+<div
+  class="mt-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4"
+>
+  {{ range .Params.art }} {{ if ne .item "" }}
+  <div class="flex flex-col bg-white rounded-lg border p-4 relative">
+    <img
+      loading="lazy"
+      src="{{ .main }}"
+      alt="Placeholder Image"
+      class="w-full h-48 rounded-md object-cover"
+    />
+    <div class="h-full grid grid-cols-1 place-items-end pt-5">
+      <a class="w-full" href="#modal-{{ .item | urlize }}">
+        <button
+          type="button"
+          class="w-full px-3 py-2 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200"
+        >
+          Expand
+        </button>
+      </a>
+    </div>
+    <div
+      id="modal-{{ .item | urlize }}"
+      class="fixed z-10 inset-0 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        class="flex items-end justify-center min-h-screen p-4 text-center sm:block sm:p-0"
+      >
+        <div class="fixed inset-0" aria-hidden="true"></div>
+        <span
+          class="hidden sm:inline-block sm:align-middle sm:h-screen"
+          aria-hidden="true"
+          >&#8203;</span
+        >
+        <div
+          class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle self-center sm:max-w-lg w-full"
+        >
+          <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="mt-8 columns-1 gap-2 sm:columns-2 sm:gap-4 [&>div:not(:first-child)]:mt-4"
+                >
+                  {{ range .gallery }}
+                  <div
+                    class="relative hover:scale-105 ease-in-out duration-200 transition-all hover:shadow-2xl"
+                  >
+                    <img
+                      loading="lazy"
+                      class="rounded-lg w-full"
+                      src="{{ .image }}"
+                    />
+                    <button class="absolute right-2 top-2">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 448 512"
+                        class="fill-black w-6 h-6 bg-white p-1 rounded-sm"
+                      >
+                        <path
+                          d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                  {{ end }}
+                </div>
+                {{ end }}
+                <div class="px-1 pt-4 w-full">
+                  <div class="text-gray-800 text-base">
+                    {{ 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">
+                      <strong>Dimensions:</strong>
+                      <span>{{ .dimensions }}</span>
+                    </div>
+                    {{ end }} {{ if ne .baseCost "" }}
+                    <div class="flex flex-row justify-between">
+                      <strong>Base Cost:</strong>
+                      <span>{{ .baseCost }}</span>
+                    </div>
+                    {{ end }} {{ if ne .deliveryPickup "" }}
+                    <div class="flex flex-row justify-between">
+                      <strong>Pickup & Delivery:</strong>
+                      <span>{{ .deliveryPickup }}</span>
+                    </div>
+                    {{ end }} {{ if ne .installBreakdown "" }}
+                    <div class="flex flex-row justify-between">
+                      <strong>Setup & Breakdown:</strong>
+                      <span>{{ .installBreakdown }}</span>
+                    </div>
+                    {{ end }} {{ if ne .purchaseCost "" }}
+                    <div class="flex flex-row justify-between">
+                      <strong>Purchase Cost:</strong>
+                      <span>{{ .purchaseCost }}</span>
+                    </div>
+                    {{ end }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <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"
+              @click="open = false"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  {{ end }} {{ end }}
+</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const modalButtons = document.querySelectorAll(".grid-cols-1 a");
+    const closeButtons = document.querySelectorAll("#close-modal");
+    const modals = document.querySelectorAll(".fixed");
+    const radioButtons = document.querySelectorAll(
+      'input[type="radio"][name="category"]'
+    );
+
+    function filterItems(category) {
+      console.log("Filtering items for category:", category);
+      const items = document.querySelectorAll(".grid > div");
+
+      items.forEach((item) => {
+        const itemCategory = item.querySelector(".bg-blue-100");
+        if (!category || itemCategory.textContent === category) {
+          item.classList.remove("hidden");
+        } else {
+          item.classList.add("hidden");
+
+          const modalId = item.id.replace("modal-", "");
+          const modal = document.getElementById(modalId);
+          if (modal) modal.classList.add("hidden");
+        }
+      });
+    }
+
+    function updateUrl(category) {
+      const url = window.location.href.split("#")[0];
+      const newUrl = category ? `${url}#${category}` : url;
+      window.history.replaceState({}, "", newUrl);
+    }
+
+    const category = window.location.hash.substring(1);
+    console.log("Initial category:", category);
+    filterItems(category);
+
+    window.addEventListener("hashchange", function () {
+      const newCategory = window.location.hash.substring(1);
+      console.log("New category:", newCategory);
+      filterItems(newCategory);
+    });
+
+    radioButtons.forEach((radio) => {
+      radio.addEventListener("change", function () {
+        const category = this.value;
+        console.log("Selected category:", category);
+        updateUrl(category);
+        filterItems(category);
+      });
+    });
+
+    modalButtons.forEach((button) => {
+      button.addEventListener("click", function (e) {
+        e.preventDefault();
+        const modalId = this.getAttribute("href").substring(1);
+        const modal = document.getElementById(modalId);
+        modal.classList.remove("hidden");
+      });
+    });
+
+    closeButtons.forEach((button) => {
+      button.addEventListener("click", function (e) {
+        e.preventDefault();
+        const modal = this.closest(".fixed");
+        modal.classList.add("hidden");
+      });
+    });
+
+    if (category) {
+      const radioToSelect = document.querySelector(
+        `input[type="radio"][name="category"][value="${category}"]`
+      );
+      if (radioToSelect) {
+        radioToSelect.checked = true;
+        filterItems(category);
+      }
+    }
+  });
+</script>