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:

Styling Added

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:

<?php if ( 'artwork' == get_post_type() ) : // Check for artwork post type ?>
Artwork, bro.
<?php else : ?>

Then right at the bottom of the file, add this:

<?php endif; // Ending atwork post-type check ?>

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:

It sure is.


Delete the "Artwork, bro." line and paste in the following code instead:

<article id="post-<?php the_ID(); ?>" <?php post_class('thumbnail-container'); ?>>
// Artwork Thumbnail
$FullImage = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
$LargeImageLink = $FullImage[0];
$ThumbnailImage = get_the_post_thumbnail( $post->ID, "Gallery Thumbnail" );
<a href="<?php echo $LargeImageLink ?>" rel="gallery"><?php echo $ThumbnailImage ?></a>

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:

First Image in Gallery

To give it bit of character, add the following code to your style.css file:

/* Art Gallery
----------------------------------------------- */
.thumbnail-container {float: left; border-bottom: none;}
.thumbnail-container:nth-child(odd) {margin-right: 20px;}
.thumbnail-container a {box-shadow: 0 0 5px rgba(0,0,0,0.2); border: 1px solid #fff; display: block;}
.thumbnail-container a:hover {box-shadow: 0 0 10px rgba(0,0,0,0.5);}
.thumbnail-container img {display: block;}

I've added another image to my gallery and this is now what it's looking like:

Styling Added

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.