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 =).

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag