Today I replaced the old Pictorem iframe embed with a native masonry gallery, added responsive layout, lazy loading, and animated a lavender spinner while the artwork loads.
The /syrenwork page now features a built-in artwork gallery instead of embedding Pictorem via iframe. The new solution uses a custom ArynwoodGallery.astro component that maps 34 artwork images stored locally in the /public/arynwood directory. Each image is displayed inside a masonry-style layout using pure CSS columns and styled with soft borders, hover scaling, and subtle shadows.
The iframe slowed down page loads and didn’t match my site aesthetic. By switching to a native Astro component, I now have full control over the visual style and performance. Images are lazy-loaded for speed, and a spinner appears while the page loads, offering feedback to the user before the grid fully fades in.
<iframe> with a hand-coded image gridcolumn-count CSS to simulate masonry layoutsetTimeout() to show the gallery if image events fail// Sample: Masonry setup
.masonry {
column-count: 3;
column-gap: 1rem;
}
.masonry-item {
break-inside: avoid;
margin-bottom: 1.5rem;
}
Below the intro paragraph, I also added styled flexbox buttons linking to Prints, Etsy, Instagram, and Spoonflower. These buttons are mobile-friendly and match the site's lavender terminal feel with soft hover glow.
Live here: arynwood.com/syrenwork
Want to try it? Start with a basic image loop in Astro and style it with Tailwind or raw CSS columns. It's much smoother than relying on heavy third-party embeds.
Back to blog: Arynwood DevLog