Tutorials

Astro Trick- How to Import and Display all Images in a Directory

Hazem Abbas

Jun 24, 2024 — 4 min read

The Astro framework is a front-end framework used for building fast, optimized websites and applications. It allows developers to use their preferred JavaScript framework, or none at all, while enabling the delivery of highly efficient, fast loading websites. The framework achieves this by only sending the necessary JavaScript to the browser, resulting in less time processing scripts, and thus faster load times.

Astro's use-cases

Astro is used for a variety of purposes, such as building static websites, creating dynamic web applications, and making SEO-friendly e-commerce sites. The flexibility of the framework allows developers to write components using their preferred JavaScript framework, or vanilla JavaScript, while the built-in performance optimizations of Astro ensure that the final product is extremely performant.

This makes it a popular choice among developers looking to build fast, modern web experiences.

How to display images in Astro from folders.

In the following snippet, you can see how we utilize Astro to display all images in one folder with few lines of code.

Load all images

---
const imageFiles = await Astro.glob("../assets/gallery/designs/*");
---

 {
          imageFiles.map((image, id) => (
            <>
              <Lightbox gallery={gallery} id={id} image={image} />
            </>
          ))
        }

---
import { Image } from "astro:assets";
import Site from "../site.config.json";
const { gallery, image, id } = Astro.props;
---

<a
  href={"#" + gallery + "-" + id}
  id={"i" + gallery + "-" + id}
  class={`row-span-3x ${
    id === 4 || id === 9 || id === 14 ? "col-span-2" : ""
  }`}>
  <Image
    src={image.default}
    width="480"
    alt={Site.title}
    class="galleryImagex w-full h-autox object-center object-cover h-72 transition-all hover:scale-125 bg-white duration-200 ease-in-out hover:shadow-2xl shadow-lg rounded-none"
  />
</a>
<a
  href={"#i" + gallery + "-" + id}
  class="hidden fixed h-full z-50 bg-black/75 transition-all target:block items-centerx w-full"
  id={gallery + "-" + id}>
  <Image
    src={image.default}
    width="680"
    alt={Site.title}
    class="galleryImage hidden w-full h-autox object-center object-cover h-64 transition-all hover:scale-125 bg-white duration-200 ease-in-out hover:shadow-2xl shadow-lg rounded-none"
  />
  <canvas
    class="watermark-canvas h-auto w-autox mt-20 lg:mt-0 lg:w-auto w-auto object-center object-cover mx-auto my-auto p-2x bg-slate-200 shadow-xl">
  </canvas>
</a>

<!-- is:inline -->
<!-- {{Site}} is used for loading configs -->
<script is:inline define:vars={{ Site }}>
  var wm = Site.watermarkText;
  var cusid_ele = document.getElementsByClassName("galleryImage");
  var image_canvas = document.getElementsByClassName("watermark-canvas");
  for (var i = 0; i < cusid_ele.length; ++i) {
    var item = cusid_ele[i];
    var src = item.getAttribute("src");
    const image = new Image();
    const canvas = image_canvas[i];
    const ctx = canvas.getContext("2d");
    image.onload = () => {
      canvas.width = image.width;
      canvas.height = image.height;
      ctx.drawImage(image, 0, 0);
      ctx.font = "30px verdana";
      ctx.shadowColor = "#999";
      ctx.shadowBlur = 10;
      ctx.lineWidth = 7;
      ctx.fillStyle = "white";
      ctx.strokeText(wm, 25, image.height - 45);
      ctx.fillText(wm, 25, image.height - 45);
    };
    image.src = src;
  }
</script>