#92: Building the Individual Gallery Pages

(Updated on )

We have a bit of a Photoshop mockup to work from here as we continue building the template for the individual gallery page.

First up, we styled the Next and Previous links. They are in absolutely positioned box in the gallery bar, so that we could center them on the page despite the other buttons and stuff already in the bar. They take on the same class as the Submit One button so there is constancy there.

Next up we have this very slim left column in which to get text. We start out with a 1/8 7/8 grid, but 1/8 is just a little too slim. We change it to 1/4 3/4 but that’s too much. So like the fabled baby bear, 1/6 5/6 was just right.

We do some typography work in that narrow column, adding in the title (in an <h1> tag of course, since it’s the most important title on the page), the description, and other sections. Most of the typography just falls into place based on our simple and sturdy typography setup.

The 5/6 grid is all for the image. Nice and big, which is great. It has a light gray background, just like how images have in blog posts (e.g. <figure>).

We think about getting a little fancy with how we style the tags. We look around on CodePen (here’s a link to the “tags” tag, META ALERT). We end up thinking that’s overkill and leave them as normal links.

We make the “full size” button work in one of the simplest ways we possibly can, open a new window that is the dimensions of the full size image and showing the image in it. It’s like a modal box from the early 2000’s! But I like it. It’s simple, it doesn’t need a bunch of code (like a lightbox would), and it’s obvious to interact with. It’s even better, if you ask me.