In this screencast we spend a bit of time thinking about what an individual Gallery screenshot page will look like. There is a bit of data that we already know we have. We have a title. We have a description. We have a set of tags that have been applied to it (it's custom taxonomy). We also have some custom fields on each Screenshot: the URL of the image itself and a URL of where it should like (sometimes). We also have data we can use on any other WordPress post, like author and date.

It's great to have this kind of content in separate fields. This makes our task as a designer much easier. We can output things wherever we want to in the template. Control! Imagine if everything was smushed into one content area and we had just one thing to use in our template that would spit it all out at once. That'd be a bummer.

For the layout, we decide to make the image as absolutely large as possible on the page. That's easily the most important and compelling thing and it deserves as much attention as we can give it. We reserve just a sliver of a column on the left for displaying the meta information. This is likely all the room we will need. Descriptions for Screenshots are never big sprawling multi-paragraph texts. I know, because I wrote them =).

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.