Astro Trick- How to Import and Display all Images in a Directory
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/*");
---Display Images with a Lightbox
{
imageFiles.map((image, id) => (
<>
<Lightbox gallery={gallery} id={id} image={image} />
</>
))
}Lightbox snippet
---
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>
The final Demo
I built this demo quickly to display images as a web gallery in no time.
Hazem Abbas
Hazem Abbas