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.

Comments

  1. Josh Eaton
    Permalink to comment#

    Chris, in your final code, and in some of the subsequent videos, I see a .gridswitch class, and it’s only used on the grid for the Gallery Single Screenshot template single-screenshot.php.

    Could you explain what you use that class for?

    • Chris Coyier
      Permalink to comment#

      All that class does is float the columns to the right instead of the left (and adjust padding accordingly). I think the reason it was there is because I was toying around with putting the information column on those single gallery pages on the right instead of the left. By switching the grid around, that means I could still put the information column (that contains the header and description and stuff) FIRST in the source order, where it should be.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.