DEV Community

Cover image for Art x Hack
Jonas Scholz
Jonas Scholz

Posted on

Art x Hack

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

TL;DR

When I heard of this challenge and read β€œgallery” my brain instantly thought of art galleries instead of the traditional internet image gallery. This is why I decided to actually build a 3D art gallery with art work that means something to me, and Netlify CDN to make it technically feasible.

What I Built

I built a 3D art gallery with Three.js, React, Tailwind, and of course Netlify CDN. The code can be found on Github

For the art, I picked special pieces that mean something to me. Some of them introduced me to a new kind of art, some are from my friends, and some I simply find funny.

The best way to experience it is to try it out here or watch the demo below:

Demo

Check it out here

Screenshots

The initial view:
Initial View

After clicking on a frame with the description and save button:
Zoomed View

After clicking on save:
Download

Platform Primitives

There are two ways I integrated the Netlify CDN. In the display of the art works and the way they are downloaded:

Frames

Instead of downloading all the images and resizing them manually to fit the golden ratio frames (1:1.61), I used Netlify CDN to dynamically fetch them from their original source and resize them on the fly.

To achieve that, I simply wrote a wrapper function for the URLs of the displayed art works:

const netlifyCDN = (url) =>
  `https://the-virtual-gallery.netlify.app/.netlify/images?url=${url}&h=1610&w=1000&fit=cover`;

netlifyCDN("https://meine.rs/photography/img/Train%20Station.webp")
Enter fullscreen mode Exit fullscreen mode

There are 3 reasons why using the Netlify CDN makes sense here:

  1. I don't want to overload the servers where the source images are and need some sort of caching
  2. I would rather not download the images and manipulate them myself
  3. Changing the displayed images is as easy as changing the remote URL!

Download

One of the main goals was showing others some of my favorite art pieces and making it easy for them to also enjoy it. That's why I added a download function:

Download

The download function allows anyone to download the images in their preferred format. To make it even easier, I added some presets for common layouts, such as 4k Desktop or iPhone 13 wallpaper sizes.

When you click download I simply set the w, h, fit, and fm parameters to set the width, height, fit and format:

const url = new URL(currentImage.url);
url.searchParams.set("w", width);
url.searchParams.set("h", height);
url.searchParams.set("fit", fit);
url.searchParams.set("fm", imageType);

const a = document.createElement("a");
a.href = url.toString();
a.download = "art";
a.target = "_blank";
a.download = "art";
a.click();
a.remove();
Enter fullscreen mode Exit fullscreen mode

I then create an invisible a tag with the Netlify CDN as href attribute and click on it automagically. Tada, your optimized and formatted image is getting downloaded!

Credits / Inspiration

I've not been the first one to build something like this, these projects inspired and helped me bootstrap everything:

Reflection

For me, creativity is random. I cannot force being creative and it usually comes at the weirdest times through some weird situation. While I cant force creativity, I can create space for serendipity (lucky accidents) to happen. And for me personally, this happens through stuff I do outside of coding.

So my appeal to you is: Go out! Go visit an art museum, even if you usually don't care for art. If you already like art, maybe go to a weird improv theater or to an open day of any institution or company in your area.

I hope inspiration will come to you!

Cheers,
Jonas

Top comments (0)