Pixel Art Gallery

For the past week I’ve been experimenting with AI generated pixel art using PixRay.

I wanted to create a web gallery to display these generated images but there’s a couple issues:

  • The pixel art images are 40×40 pixels.
    They will either show up really small or blurry when scaled.
  • I may generate more, but don’t want to update the web page every time I want to add them.

I looked around for a WordPress solution but found none that look nice and would work with my very small images, so I had to make something myself.

Thanks to this tutorial I found out how to scale the pixel art within the browser without it becoming blurry. I implemented this into the following page. It loops through the images and displays them in a simple manner. Functional, but ugly.

Eventually I came across Slick Carousel. This could work for what I’m going for. I looked around some more and came across this CodePen by Simone Giannangeli. A very good starting point for the gallery.

It was simple to get my images in there but the hard part was doing this (semi)-automatically.

I figured this would have to be done using javascript, so I saved the captions I want to use into a jSON file and named the image files incrementally so they can easily be indexed.

It took me nearly 8 hours to get everything set up. I never worked with jSON files before and only limited javascript experience, so the errors I got made little sense. But with perseverance I managed to finish up my work and get everything working in the end.

You can view the gallery here. Do keep in mind that it is still a work in progress.

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.