update

content/art/index.md

@@ -1,48 +1,198 @@
 ---
 title: The Artist
 date: 2024-05-22T12:47:43-04:00
-masonryGallery:
+art:
-  - image: /img/art/1.webp
+- main: /img/art/3.webp
-  - image: /img/art/2.webp
+  title: 1
+  description:
+  year:
+  gallery:  
   - 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/116.webp
+  - image: /img/art/117.webp
+  - image: /img/art/118.webp
+  - image: /img/art/119.webp
+  - image: /img/art/125.webp
+  - image: /img/art/126.webp
+  - image: /img/art/127.webp
+
+- main: /img/art/8.webp
+  title: 2
+  description:
+  year:
+  gallery:  
   - image: /img/art/8.webp
   - image: /img/art/9.webp
+  - image: /img/art/10.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/20.webp
+
+- main: /img/art/12.webp
+  title: 3
+  description:
+  year:
+  gallery:  
+  - image: /img/art/12.webp
+  - image: /img/art/13.webp
+  - image: /img/art/14.webp
+
+- main: /img/art/15.webp
+  title: 4
+  description:
+  year:
+  gallery:  
+  - image: /img/art/15.webp
+  - image: /img/art/16.webp
+
+- main: /img/art/21.webp
+  title: 5
+  description:
+  year:
+  gallery:  
   - 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
+
+- main: /img/art/27.webp
+  title: 6
+  description:
+  year:
+  gallery:  
   - image: /img/art/27.webp
   - image: /img/art/28.webp
   - image: /img/art/29.webp
+  - image: /img/art/30.webp
   - image: /img/art/31.webp
   - image: /img/art/32.webp
+  - image: /img/art/45.webp
+  - image: /img/art/47.webp
+  - image: /img/art/48.webp
+  - image: /img/art/49.webp
+  - image: /img/art/50.webp
+  - image: /img/art/51.webp
+  - image: /img/art/56.webp
+  - image: /img/art/60.webp
+  - image: /img/art/88.webp
+  - image: /img/art/89.webp
+  - image: /img/art/120.webp
+  - image: /img/art/121.webp
+  - image: /img/art/122.webp
+
+- main: /img/art/33.webp
+  title: 7
+  description:
+  year:
+  gallery:  
   - 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
+
+- main: /img/art/36.webp
+  title: 8
+  description:
+  year:
+  gallery:  
+  - image: /img/art/36.webp
+
+- main: /img/art/40.webp
+  title: 9
+  description:
+  year:
+  gallery:    
+  - image: /img/art/40.webp
   - image: /img/art/41.webp
   - image: /img/art/42.webp
-  - image: /img/art/43.webp
+
-  - image: /img/art/44.webp
+- main: /img/art/52.webp
-  - image: /img/art/45.webp
+  title: 10
+  description:
+  year:
+  gallery:  
+  - image: /img/art/53.webp
+  - image: /img/art/54.webp
+  - image: /img/art/55.webp
+  - image: /img/art/71.webp
+  - image: /img/art/72.webp
+  - image: /img/art/73.webp
+  - image: /img/art/74.webp
+  - image: /img/art/75.webp
+  - image: /img/art/76.webp
+  - image: /img/art/77.webp
+  - image: /img/art/78.webp
+  - image: /img/art/79.webp
+  - image: /img/art/80.webp
+  - image: /img/art/81.webp
+  - image: /img/art/82.webp
+  - image: /img/art/83.webp
+  - image: /img/art/84.webp
+  - image: /img/art/85.webp
+  - image: /img/art/86.webp
+  - image: /img/art/129.webp
+
+- main: /img/art/59.webp
+  title: 11
+  description:
+  year:
+  gallery:  
+  - image: /img/art/59.webp
+
+- main: /img/art/58.webp
+  title: 12
+  description:
+  year:
+  gallery:  
+  - image: /img/art/58.webp
+  - image: /img/art/61.webp
+  - image: /img/art/62.webp
+
+- main: /img/art/67.webp
+  title: 13
+  description:
+  year:
+  gallery:  
+  - image: /img/art/67.webp
+  - image: /img/art/68.webp
+  - image: /img/art/69.webp
+  - image: /img/art/70.webp
+
+- main: /img/art/94.webp
+  title: 14
+  description:
+  year:
+  gallery:  
+  - image: /img/art/94.webp
+  - image: /img/art/95.webp
+  - image: /img/art/96.webp
+  - image: /img/art/97.webp
+  - image: /img/art/98.webp
+  - image: /img/art/99.webp
+  - image: /img/art/100.webp
+  - image: /img/art/101.webp
+  - image: /img/art/102.webp
+  - image: /img/art/103.webp
+  - image: /img/art/104.webp
+  - image: /img/art/105.webp
+  - image: /img/art/106.webp
+  - image: /img/art/107.webp
+
+- main: /img/art/119.webp
+  title: 15
+  description:
+  year:
+  gallery: 
+  - image: /img/art/118.webp
+
 ---
 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
+    {{ partial "questions.html" . }} {{ partial "gallery.html" . }}
-    "masonry_gallery.html" . }}
   </div>
 </div>
 {{ end }}

themes/gallo/layouts/partials/artist_catalog.html

@@ -0,0 +1,176 @@
+<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="relative flex flex-col bg-white rounded-lg border p-4 relative">
+    <p class="absolute left-6 top-5 text-white font-black text-xl">
+      {{ .title }}
+    </p>
+    <img
+      loading="lazy"
+      src="{{ .main }}"
+      class="w-full h-48 rounded-md object-cover"
+    />
+    <div class="grid grid-cols-1 place-items-end pt-5">
+      <a class="w-full" href="#modal-{{ .title | 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-{{ .title | 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 h-[80vh] overflow-y-scroll overflow-x-hidden px-4 pt-5 pb-4 sm:p-6 sm:pb-4"
+          >
+            <div class="sm:flex sm:items-start">
+              <div class="w-full mt-3 text-center sm:mt-0 sm:text-left">
+                <h3 class="text-xl" id="modal-title">
+                  <strong>{{ .item }}</strong>
+                </h3>
+                {{ if .gallery }}
+                <div
+                  class="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>
+            </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>

themes/gallo/static/img/art/.comments/124.webp.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<comment version="3.0">
+  <caption/>
+  <note>(0) Bracket Info:0,-21,0,0,0,0) SBAR:0.9 WHAR:0.6 BAR:1.1 WBR:70.4 WDR:0.0 CB:1 CR:0.2 U(-21)UW(-4)US(-21)LIF(1.0)AI(0)   WDR(0,0)SV(3)SGL(0)HGL(0)SGLPU(0)SGLAY(0)AY(118)</note>
+  <place/>
+  <categories/>
+</comment>

themes/gallo/static/img/art/.comments/128.webp.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<comment version="3.0">
+  <caption/>
+  <note>(0) Bracket Info:0,-19,0,0,0,0) SBAR:0.8 WHAR:0.5 BAR:1.2 WBR:59.8 WDR:20.7 CB:1 CR:0.1 U(-19)UW(-4)US(-19)LIF(1.0)AI(0)   WDR(0,0)SV(3)SGL(0)HGL(0)SGLPU(0)SGLAY(0)AY(89)</note>
+  <place/>
+  <categories/>
+</comment>

themes/gallo/static/img/art/.comments/5.webp.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<comment version="3.0">
+  <caption/>
+  <note>g info :  AIScene(20)</note>
+  <place/>
+  <categories/>
+</comment>

themes/gallo/static/img/art/.comments/90.webp.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<comment version="3.0">
+  <caption/>
+  <note>clone tag: 4453344686606893472</note>
+  <place/>
+  <categories/>
+</comment>