Page 3 - Templating
In this part, as you can probably tell by the title, I'll be going over the templating. This is the good bit, so less talking and let's jump in to it!
The artwork page is the page we can access by going to
?post_type=artwork. It's not very pretty at the moment (awww) so let's give it a home make-over. And also a code make-over. Actually, scrap the home make-over, let's just do a code make-over.
This is what it currently looks like:
This is what we're going to make it look like:
Essentially we're going to show each artwork post using only the gallery thumbnail image size we set up in page two. Then we're going to link those thumbnails directly to the larger image size.
As mentioned in the first page in this series, we're editing the TwentyEleven template, which uses
content.php to display it's content. Right after the WordPress package code at the top we're going to add some PHP code to check the post type. At around line 10, enter in the following code:
Then right at the bottom of the file, add this:
Save that file. Now if we go that code correct, it should, in theory, only show the line "Artwork, bro" if you're in the artwork post-type:
Delete the "Artwork, bro." line and paste in the following code instead:
The first line creates the article container that we'll use for each gallery entry. We're passing a custom class in to it called "thumbnail-container" that we'll make use of in our stylesheet.
The chunk of PHP code is what pulls out the images.
$FullImage grabs the featured image URL in the large size, while
$LargeImageLink selects the first image from the array.
$ThumbnailImage grabs the featured image in Gallery Thumbnail size.
Finally we've got some output below that in the form of a link and an image using our variables above. Now it's lookin' a bit better:
To give it bit of character, add the following code to your style.css file:
I've added another image to my gallery and this is now what it's looking like:
Sweet! So now we have our custom post types displaying as a gallery and linking to the full image. Let's make it a bit nicer and add in Colorbox. Then we'll set up a homepage using Sudo Slider to show the latest images in your gallery. Hit the links below to continue, or tap out now. I won't blame you.