Show me your website's art gallery

How do you showcase your art on your website? Lately I’m not quite satisfied with mine.

1 Like

I have a lot of different galleries all listed in my Gallery Index, and I have used different methods of sharing my art from having a preview thumbnail link to a new page with the full piece like in my Earthshine gallery (warning for mature subject matter and art in these pieces) and accompanying commentary, to a gallery modal.

Looking at your gallery, Manatee, I think maybe a gallery modal might work best, and I highly recommend Fancybox. It is what I use for my Tiger Town gallery.

3 Likes

Yeah, thumbnails in some kind of grid or masonry + gallery modal/popup is usually the neatest way to display art online. Fancybox is great, another alternative is PhotoSwipe.

My own gallery is pretty simple I just throw a bunch of thumbnails in a grid with a PhotoSwipe modal on click.

In theory, I love the way some artists display their art in just one big image after the other (Simon Stålenhag for example). It’s very immersive. But it also leads to a long and heavy page that is not the most user-friendly. But if one only has a select few pieces and make sure to optimize the files and code, it can look quite striking.

1 Like

I went pretty lowtech/lazy with mine, and although I do make thumbnails, I just link directly to the image file. I’ve thought about using a lightbox script in the past, but I opted for simplicity over adding extra scripts.

1 Like

Here’s my art gallery. For it I have the images styled to squares because that’s the easiest to make line up nice. When you hover over it, it shows the full image in the square. If clicked it will bring the user to a page with the full res image open and a detailed image description. (the other gallery pictures are on this page too, but hidden and given loading=“lazy”)

My kitty photos is a photo gallery but it uses some flexbox stuff to make the images spread out evenly while not being squares. I used the details element to make fake popovers instead of using js ^^

2 Likes

i used melon’s gallery maker tool for my public domain art hoard and for my collage, modified a bit so it displays in columns instead of rows because i like the look of columns better. it’s super handy, especially if you have a ton of images!

it doesn’t come with captions/descriptions built in and it uses javascript, if either of those are a concern.

1 Like

I didn’t know summary and details could be used with images. Maybe I’ll try that.

Do you suppose it would be better to show my smol sculptures just floating with no background, or photograph them in different settings? I think the latter might be fun. It’ll look like these otherworldly little objects have arrived on earth, and they’re exploring or waiting to be discovered.

It also might be easier to just photograph them in real settings.

yep! I put the picture in the summary, and then styled details[open] as position: fixed; and then some extra stuff to center it. I also had a short description in the details part below the summary!

i personally thought your transparent backgrounds were cool, but like you said its easier to keep a background than get rid of it

So on my site I have a fancy template that generates a frame for my images. You can see it in action here A moment among the trees – Manu

The gray background and the shadow is all added automatically and I have an option I can toggle to disable it for specific images.

I also have a dedicated photos gallery but it’s on a subdomain: https://photos.manuelmoreale.com

1 Like

I have my art in a set of gallery pages, using a script I wrote myself that handles the overlay to display a larger version of the image. It’s responsive to mobile and I’m quite proud of it. I bundled it up into a zip file and put it up for download on my tools for you page. It also allows you to use separate files for the thumbnails and the full image, or just have it squash the full image into the thumbnail space, whichever you prefer. (I use separate thumbnail images. They’re smaller so load faster on the gallery page, plus I can focus on an interesting part of the art if I want.)

2 Likes

I use a pretty simple format for mine. It’s rows of thumbnails with links to the full image.

As simple as I could make it, with PHP and an optional JS keypress listener: my gallery of inane photomanipulation.

The code is available for download.

Here’s my current gallery:
https://melvian.xyz/animations/

It’s just CSS grid, with manually cropped thumbnails (compressed with WebP) that are all exactly 512x256 in width. I originally was going to do square thumbnails but squares are extremely space inefficient.

However, I’ve been working on a brand new version of my site, and I’ve taken out the hover effect. Here’s what it currently looks like (in dark mode):

1 Like

Question for everyone: do you keep all your art in your galleries at all times, or do you swap or rotate your art displays now and then?

The way my new website will work is that the latest animation is shown on my home page and then you can go forward or backward if you’re going through past animations (this is in addition to the gallery). So I’ll be treating it as something like a webcomic series. I also like the approach of showing my newest stuff first because it demonstrates who I am, what my skills are and what’s on my mind now. Shuffling the order of my animations would feel extremely inconsistent as a result.