Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 14 – Part 5 – Ex. #3 – Create a grid of Thesis Post Thumbnails

Difficulty Level -

Filed Under Topics - , , , , ,

Listed Under Lesson Subjects -

Applies to -

The next thing we’re going to do is look at our example number 3 where we are going to create a grid of Thesis post thumbnails. Each one of the images in that thumbnail is going to link off to its post. When we do that, we are going to be using the Thesis theme post info function.

I’m just going to take this and copy this function then we’re going to say, byob_thumbnail_grid_list. Let’s put that in the shortcode right now, byob_thumbnail_grid_list so byobtgl and we’ll keep the categories in the posts_per_page the same, the query the same.

Display Thesis Theme Thumbnail

What we’re going to be doing here is changing what is being displayed. Here we chose to display the thesis_teaser, however had happened to have been configured. Now, we’re not going to display the Thesis teaser, what we’re going to do is display the Thesis thumbnail. To do that, we are going to use the thesis_post_image_info function. This grabs the information from the variety of different sources for the thumbnails so it gets from options, it gets the size of the thumbnail and from the post, it gets the address of the thumbnail.

Two Kinds of Post Image Info

It has two different kinds of post image info, it has the regular post image info and it has the thumbnail post image info. We are gathering all of the thesis_post_image_info for thumbnails and we’re placing that array of information in the variable that we’re calling post_image. The variable again doesn’t matter, it can be anything that we want. Holy smokes! I can’t believe I left the microphone turned off. Sorry about that everybody, I’ve been going along here with this microphone turned off.

What we’re doing here is we are creating a grid of the posts thumbnail images then you’re going to have links to the individual posts. What I did was I created this new function which was just a copy of this older function and renaming it. I renamed it byob_thumbnail_grid_list and I renamed the shortcode for this one to be byobtgl and put this function name in the shortcode. Instead of thesis_teaser here, what we’re going to do is grab the thesis_post_image_info and place that information the variable called post_image.

Now, this function thesis_post_image_info gathers information from a variety of different places in the database about the thumbnail image so it goes to your settings and it gets the thumbnail image location relative to the heading, it gets the address of the thumbnail image, it gets all kinds of information that function does and in this case, it will place all of that information as an array in this variable called post_image.

Echo Post Image Output

Now that we’ve placed that information there, we want to display the image itself. The way we display that image is by echoing a specific part of this variable which is called output. The Thesis theme creates this output in the thesis_post_image_info function and it wraps it in HTML, it gives it a class it does all the kind of things that you want it to do including giving you the address. But it’s not just the address, it’s the address plus HTML that complies with the settings that you set in Thesis design options. What we’re going to do here is we’re not echoing all of post image, we are just echoing the post image output.

What that’s going to do right now is display just post thumbnails. If we hit save, upload that, come over to the page, look at thumbnail grid and we edit this page. Now, if we put that shortcode byob_thumbnail_grid_list, that should show us the 6 most recent images from the Apple posts except it’s just displaying the image.

Now, displaying the image isn’t that great. What you really want to do is you want to display the image but you want to be able to click on that image and have it take off to the post so we need to add that to this.

WordPress Template Tags

We are going to use two different WordPress template tags for this. We’re going to use get the permalink and we’re going to use get the title. You remember that we had that in our very first example at the very beginning, you put the_title in here to be displayed. What we’re going to do now is, I’m going to cut this out of code I’ve already written just to speed this up a bit.

Now we are creating a link and we are getting the permalink of the post. That’s what this get_permalink does, we’re telling it that it has a relationship of bookmark and we are giving it a title “Permanent link to” then we’re getting the posts title and that is the opening a tag. Below that, we’re going to echo the closing a tag.

Now we’ve echoed the closing a tag and essentially what we’ve done is we’ve wrapped the image in a link so now you’ve got a standard ordinary image link. We hit save this document, upload it and refresh it. Now, if we hover over it, you can see it gives us the tool tip, Permanent link to Northern Spy, Permanent link to Irish Peach. If you click on it, it takes you over to the Irish Peach post.

We have now 6 images here with that information in theme. You can embellish this anyway you want. You could also put a title before each one of these things so you could put the title of the post here in its place if that’s what you wanted to do. There’s really, any of the ordinary WordPress template tags for a given post or page that can go inside of this.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one