fix: actually transition image heights in sliders

src/components/HeroCard.astro

@@ -68,7 +68,8 @@ const hasCover = typeof image === "string" ? !!image?.length : !!cover?.src;
           loader={false}
           src={cover as ImageMetadata}
           alt={"cover for " + title}
-          class="right-0 h-full object-cover object-center rounded-none border-l border-neutral"
+          class="h-full right-0 object-cover object-center rounded-none border-l border-neutral"
+          pictureClass="h-full"
           thumbnail
         />
       </a>

src/components/Image.astro

@@ -88,7 +88,7 @@ const sizes = thumbnail
       pictureAttributes={{
         class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""} ${pictureClass}`,
       }}
-      class={`${Astro.props.class} h-full w-full`}
+      class={`${Astro.props.class} w-full`}
       widths={sizes.map((size) => size.width)}
       sizes={sizes
         .map((size) => `${size.media || "100vw"} ${size.width}px`)

src/components/ImageSlider.svelte

@@ -8,11 +8,14 @@
   let height: number;
   let loaded = false;
 
-  function hide(img: HTMLPictureElement) {
+  function hide(index: number) {
+    const img = images[index];
     img.classList.remove("active");
   }
 
-  function show(img: HTMLPictureElement) {
+  const heightCache = [];
+  function show(index: number) {
+    const img = images[index];
     img.classList.add("active");
     const _img = img.querySelector("img") || img;
     if (!_img) return;
@@ -21,9 +24,12 @@
       _img.style.opacity = "1";
     });
     altText = _img["alt"] ?? _img.getAttribute("alt") ?? "";
-    height = _img.getBoundingClientRect().height;
+    if (heightCache[index]) {
+      height = heightCache[index];
+    }
     setTimeout(() => {
-      height = _img.getBoundingClientRect().height;
+      height = heightCache[index] ?? _img.getBoundingClientRect().height;
+      heightCache[index] = height;
     }, 100);
   }
 
@@ -31,16 +37,16 @@
   function setIndex(i: number) {
     if (i < 0) i = images.length - 1;
     if (i >= images.length) i = 0;
-    hide(images[index]);
+    hide(index);
     index = i;
-    show(images[index]);
+    show(index);
   }
 
   $: if (slot && !images?.length) {
     images = Array.from(slot.querySelectorAll("picture"));
     if (images?.length) {
-      images.forEach(hide);
+      images.forEach((_, i) => hide(i));
-      show(images[index]);
+      show(index);
       images[index].onload = () => {
         loaded = true;
         height = images[index].getBoundingClientRect().height;
@@ -54,29 +60,27 @@
 
 <div
   class="wrapper grid overflow-hidden rounded-xl border border-neutral"
-  class:title
+  class:title={true}
   class:not-loaded={!loaded}
   class:loaded
   style={`--height:${height}px`}>
-  {#if title}
+  <div class="flex items-center p-x-4 p-y-6 bg justify-between">
-    <div class="flex items-center p-x-4 p-y-6 bg justify-between">
+    <h3>{title}</h3>
-      <h3>{title}</h3>
 
-      <div
+    <div
-        class="overflow-hidden rounded-md bg-light gap-2 flex p-2 border border-light">
+      class="overflow-hidden rounded-md bg-light gap-2 flex p-2 border border-light">
-        <button
+      <button
-          class="flex-1 i-tabler-arrow-left"
+        class="flex-1 i-tabler-arrow-left"
-          aria-label="previous image"
+        aria-label="previous image"
-          on:click={() => setIndex(index - 1)}></button>
+        on:click={() => setIndex(index - 1)}></button>
-        <button
+      <button
-          class="flex-1 i-tabler-arrow-right"
+        class="flex-1 i-tabler-arrow-right"
-          aria-label="next image"
+        aria-label="next image"
-          on:click={() => setIndex(index + 1)}></button>
+        on:click={() => setIndex(index + 1)}></button>
-      </div>
     </div>
-  {/if}
+  </div>
 
-  <div class="images border-t-1 border-b-1 border-neutral" bind:this={slot}>
+  <div class="images border-block border-neutral" bind:this={slot}>
     <slot />
   </div>
   <div class="px-4 flex items-center place-content-between bg">