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.

Part 5 – Example #3 – Create a Grid of Post Thumbnails in Genesis

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we’re going to do in this lesson on Using Secondary Loops to Customize the Genesis Theme with PHP is use the same system that we used to create a list of posts from a single category to create a grid of post images.

Modify Existing Function

I’m going to copy this function and paste it. Now this is going to be byob_display_post_thumbnails. And in this case, we’re only going to have one query and one condition so I’m going to delete these two pieces. In fact, we’ll display category images.

So we’ll use ‘cat’ => 2 again, $red_query $red_args, if $red_query ->have_posts. We can delete these other choices because they don’t exist anymore and we can delete this one as well as everything down to this ul. Then this is our byob_display_post_thumbnails.

Add the Hook

So that’s the function. What we’re going to do is to put this on the front page so let’s look at the front page template. And we’re going to put them below the bottom widgets. It’s got an add_action ‘genesis_loop’, ‘enterprise_home_bottom_widgets’ so this is the hook we’re going to use.

But before we get too excited about it we can just see what happens when we upload the function. Upload it and then go to our front page and there they are. We’ve got our list right here, Red Apple Posts and they will show up above our front page.

Add a Priority to the Hook

But we don’t want them above the widgets, we want them below which tells us then that we need to use a priority. The add action itself didn’t have a priority so that means it’s automatically a priority of 10. If we give this a priority of 11 it should happen after the one in the front page. Let’s add that and upload it. Yes, it does work. So now we’ve got our Red Apple Posts here.

Add the Post Image to the Function

However, we don’t want the heading and we actually don’t want this. What we want is the post image and to do that we are going to be using a function called get_the_post_thumbnail. So get_the_post_thumbnail just like get_the_title and get_permalink brings you the information but it doesn’t print it out. What this is printing out is the featured image that’s assigned to the post.

How get_the_post_thumbnail Works

Now, if you provide no information about it whatsoever, if you just say get_the_post_thumbnail then what’s going to happen is the thumbnail image itself will display but the parameters here are first, $post_id. Inside the loop you don’t need the $post_id so you can leave that alone and $size here are the registered sizes or you can actually create your own custom size.

We’re not going to do that. We’re going to use one of our registered image sizes here and then you can add some attributes to it as well. In this case, we are not going to worry about the attributes.

Use Featured Image Size

All we’re going to do is use get_the_post_thumbnail and we want to use the same image size as is being used on the site because we’re going to want these things to stack up below it. It’s this image size here.

Let’s look at those widgets, Appearance and Widgets and Home Bottom. It is using the featured image size, that’s what we’re going to call it featured-image. That’s the name of the image that we want to get although let’s just double check that.

We can look under functions.php because they have added in these image sizes too. So, add_image ‘featured-image’, it’s 358 pixels wide and 200 pixels tall and it’s cropped. That’s what we’re going to use here.

In this case, we don’t want a “widgettitle” so we can take that out. We are not going to use unordered list for this either because it’s not really list items. We’re going to get rid of the lis as well.

So right now, we have a link with get_permalink and then get_the_title. Actually, we don’t want get_the_title, we want get_the_post_thumbnail and the only parameter we need to supply here is the size of the post thumbnail which was featured-image.

Review and Make Changes to the Function

It’s very much the same but instead of the title we’re going to get the post thumbnail and the featured-image size. Let’s save that, upload it and reload this. And it appears that I did something wrong. What? $red_args = array ‘cat’ => 2 $red_query, a href, get_the_post_thumbnail ‘featured-image’. What do we have down here? We have bottom widget-area and then we’ve got this section here so that’s happening but we aren’t getting our post thumbnail.

Add Post ID to the Function

So maybe I was mistaken, maybe the $post_id is not optional here. It says it’s optional. Interesting. echo get_the_post_thumbnail. Well obviously the $post_id is what’s giving this some difficulty, so what we’re going to do is use this right here, $red_query->the_post and then id.

That stands in for the $post_id, the $red_query->the_post has a whole bunch of stuff in it including the id so we are going to get $red_query->the_post and id and stick that in there and I’m going to assume that works. It did so that’s what it wanted.

Fix the Wrapper for the Images

Notice that these are not lining up? That’s because these are wrapped in a different wrapper than this is so what we want to do is repeat this wrapper. For that we need our “home-bottom widget-area” as a first thing here.

So div class=”home-bottom widget-area”. So we’ve got our section widget although I believe that featured-content is also necessary so we need to add the featured-content to that class of “widget”. So “widget featured-content”.

And “widget-wrap” we’re fine on. We need an article with a class of .”entry” and “itemscope” and an “itemtype”. So the next thing we’ll do here is inside of “widget-wrap” is article class=”entry”.

We won’t worry about the schema right now but just bear in mind that we would want to add schema to these images but I believe that’s all we need to do here in order to accomplish having a grid of images.

Float the Grid of Images to the Left

No, I didn’t do it. Why aren’t those floating anymore? It’s the “widget-wrap” that’s floating, it’s the section that’s floating, .home-bottom .widget. There’s the width, there’s the float .home-bottom .widget and so then we’re down to our next ones, “home-bottom”, “widget”, that should be floating left, it’s got a width.

No, this actually has to exist for each individual one, that’s what I did wrong, $red_query->have_posts is it happening for each? Let’s just look at that one more time.

Each section is its own so we need to take this while $red_query->have_posts out of there and bring it up to here. So while $red_query->have_posts we’ll ,do this and this and then we’re going to close that out below that section. Let’s get rid of this extra space there and then section wants to indent.

So now we’re putting our “home-bottom widget-area” in and then we’re wrapping each of these sections in the while have_posts which is what makes all of it float correctly.

Now you can see it’s all sitting there. We’ve got a nice little grid of images here and if you click on them it’ll take you over to that post.

How to Limit the Number of Posts in the List

Let’s say you wanted to limit that to 6. This is where we add an additional query $arg. So ‘cat’ => 2 and now we’re going to say ‘posts_per_page’ => 6. Let’s just double check that syntax. Yes, ‘posts_per_page’ that’s what it is.

Andrea asked, “Does the third concatenation symbol in the echo statement affect it?” Let’s just look at this and then we’ll see. First we need to save it. There we go, now we only have 6 showing. Let’s see, you thought that was why I was having a problem, okay I got you.

Anyway, this is the way in which you can do a bunch of post images, now we can always come in here and change this. Actually, this whole system, what I just did, was really dependent upon this section with class names, the div, this HTML.

Responsiveness of the Results

This HTML is what makes it possible for us to borrow the styles here and that’s what makes it responsive. As we move down here, all this stays responsive because we used all the same HTML.

Had we used our own HTML for these things, we would have to come up with our own CSS to make it responsive as well. Since we borrowed the CSS from the skin itself we don’t have to worry about it, it’s all going to be responsive automatically.

Limit Display of List to the Front Page Only

There’s something I forgot to take into account and that is this is happening on every page not just the front page so we need that conditional statement here.

Add a Conditional Statement

So what we’re going to do here is add that conditional statement if is_front-page and I can do this in reverse really. It’s a slam dunk. If it’s not the front page, return. So I’m asking it the negative, if it’s not the front page don’t do anything and if it is the front page keep on going with the rest of this.

If you’ve got lots of things asking if is_front-page, another thing that you can do is…well, we’ll create another function.

This is something similar to what we did in an earlier lesson. Function byob_front_page_customization. This is actually more efficient, it’s going to be faster because it only has asked the question once. Let’s come back up to here, now we’ll get rid of the negative. So we’ll say, if is_front-page then add_action ‘genesis_loop’.

It’s often the case that you’ll have functions that are supposed to act on a given page or on a given template or something like that. It’s best to wrap them up into a single function and then add those to the ‘template_redirect’ hook.

At the moment, I don’t see any benefit to a priority. So now what you’re doing is you’re asking this question only one instance. If you’re only doing it on one page then you wouldn’t do this but if you’ve got several add_action and filters and things like that then it makes sense for you to wrap them all up into a single function. Hook it to template_redirect and then let that function control rather than making the system read all of these functions one by one and deciding whether or not something is supposed to happen.

If there’s no action calling it then PHP isn’t storing this in memory. It isn’t trying to remember or anything like that so you can streamline your code by doing this sort of thing.

Let’s upload that and take a look at our example again, it should be working just fine. It’s essentially the same thing except that I’m asking this question only once and if I never get around to an add_action I only have to read this function so I save some processing, save some memory.

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

Leave a Comment