In this session we demonstrate how to use the Thesis 2 query box to create a grid of post thumbnails in two stages. The first stage is by using a query box to place the thumbnails on the home page where we show how to create a Carta column and adding a featured image to each query box. In the second stage, we create a custom template for the categories that we want the thumbnails for.
Rick: Tonight we’re going to talk about how to make a grid of post images essentially, right?
Rick: And I’ve got a website already all set up for this where I’ve got a bunch of posts with images. I’m doing this inside of the Carta Nude Skin but this process is going to be the same whether you’re in Agility or Carta Nude or in fact, even if you’re in Thesis Classic, this whole thing is going to be the same. Now, before I dive right into it, why don’t you tell me exactly what it is you’re trying to accomplish?
Member: Well, I’m going to have all of my single posts as far as all my products posts, you know they’re going to be each on a single post and then I just want the feature image to be under each category. I’m having an artists sites where I’m trying to sell my prints and I’m going to be having a prints category and original artwork category and bookmarks category and I want each of those categories to take the feature image of each product so that everything could be in a grid format.
Rick: Okay. So actually, there are two different ways to do this and I didn’t fully appreciate that was what you wanted to do but we’re going to take this example. This is a category archive page, right and it shows all of the Banana posts, all of the post that are categorized as Banana and this is a Cherry one. So what we’re going to do is we’re going to take Cherries and Bananas and we’re going to make them into a grid and we’re going to leave Apples and Oranges in the normal format. Does that sound like that would be something similar to what you want to accomplish?
Member: Yes, that’s fine. I understand.
Rick: Okay. And so this is not actually the query box. The query box would be something like, okay, I want to put a grid of my Apple posts on my static front page.
Member: Well, yes. My static front page, I actually want all the categories listed you know, as the latest post comes in, I just want each individual item to be posted there.
Rick: Okay, and you want it just as an image and a link or what do you want?
Member: Yes. I would like it to be an image with the title of the image right below it and then I’m going to have made a box with the price right below that.
Rick: Perfect. Okay.
Member: In essence, just an image with the title right below it.
Rick: So, we’re going to this in two stages. One state is we’re going to create a custom template for those categories you want to do that for and the second stage is we’re going to use the query box to put that on the homepage.
Rick: And actually, we’ll do the reverse. We’ll do the query box first and we’ll do the category archive page second. Now, are you using one of my skins?
Member: Yes, I will be using Carta.
Rick: Okay, so we’ll do it in Carta then.
Rick: So, we’re going to start right off here with the front page click to edit and right now, the front page is set up as a Single Column layout but what I’m going to do here is I’m going to assume that my images are 200 pixels wide and I’m going to set this up as a 3 Columns inside of the content. No, let’s see, I’m going to set up as 4 Columns inside of the content but I’m going to have a full width element which is sort of a blur about the main front page, that’ll span the whole thing and then I’m going to put 4 Columns below that.
So, what I’m going to do to start off with is create a new wrapper and it’s going to be the Carta Column Wrapper and we’ll call this Recent Posts, we’ll drag this up and drop it in my page and I’m going to drag it down below the Full Width Content and it is going to be 4 Columns Equally Sized. I don’t think we have to give it an ID, we’re just going to let it be like that and then we’re going to create those four columns so a Carta Column now. We’ve got the wrapper now we’re going to have a Carta Column and we’ll just call it Column 1, Column 2, Column 3 and Column 4.
Now, each one of these boxes is going to be a quarter, One Quarter Width of the Column and then I’m just going to shift drag these into that Recent Posts column wrapper. So now we need to create the query box so we’re going to create one query box and we’ll call it Recent Banana and in the Recent Banana box, it’s going to be category and it’s going to be the Banana category. We want to show one post and I think that’s all we need to do there for that. So we’ll drag Recent Banana into Column 1 and then we’ll do another query box and we’ll call it Recent Apple. You see where we’re going with this, right?
Rick: Another query box, Recent Orange and the last query box Recent Cherry and I’m going to drag those into those columns. Now, with this set up this way, I’ve got my Recent Banana set up for categories, Bananas, it’s going to show only one post and then you expand the tray to show what stuff you want to go in there. Now actually, what I want to go in here is, I only want the Headline so I don’t want the Excerpt, I don’t want the Edit Link, I don’t want the Author, I want the Headline and I want the Thumbnail Image and the thumbnail image is going to be a thumbnail.
We’re not going to use this Thumbnail Image, I’m sorry because this Thumbnail Image is already set up for the thumbnails in the other section. So what we’re going to do is we’re going to create a new one, a new Agility featured image and we’ll call this Category Image, I’m going to add that in there. We’re going to give it a thumbnail image, we’ll make it center aligned, we’re going to link it to the post and we’re just going to drag it into here above Recent Banana and in fact, we need to do that same thing for Column 2. Well, first we start off with the Recent Apple, it’s going to be Post, it’s going to be Category, it’s going to be Apples and we’re going to show one and then we open up the tray and we’re going to get rid of everything except the Headline.
Then we’re going to create our new Carta Featured Image and this will be Apple image, I guess. Add that box, it’s a thumbnail, we’ll center align it, we’ll link it to the post, shift drag it into Apple. Then we’ve got Recent Orange, it’s going to be Category, it’s going to be Oranges, we’re going to show one and then we’re going to create another image and this will be Orange, then it’s going to be thumbnail, center, link and we’ll drag it into Recent Orange and then we’re getting rid of Author, Edit and Excerpt.
The last one, Column 4, again Categories, Cherries, one and then a Cherry image and thumbnail, center, Recent Cherry. Then open that up and get rid of Excerpt, Edit and Author. Actually, if we save this template right now, it’s going to look pretty close to what you want it to look like. Go back and view the site and here it is. Now, I want to get in here and change the styles of this but what I’ve got is, all 4 images as thumbnails sitting right here and I’ve got the title under that and if you click off to it, it goes to that post. Does that make sense?
Member: Yes. So then, as I add a new post to each of those categories then they will automatically be delete a…
Rick: It will replace this one and with the next one. Right.
Rick: And you know, you could put the latest too, right? All you have to do is come down to this thing and in Recent Banana, choose two. Save the template and now, the Banana one is going to have two in it. So obviously, this is going to be a little package styling that has to happen but this is a sure fire way to develop a grid of images like this. Okay?
Rick: So, that’s to do it on the homepage and this is applicable to anybody in any kind of situation, right? You could do this very same thing if you had a magazine style site and you had recent posts about such and such, you know, that could go here. I mean, you could easily put a title above this, right so you could come in add yourself a text box and let’s just call it Product Title and then just give yourself an h2 tag and then say, Recent Products, disable that. You could even just shift drag and put it inside of Full Width Content and then just drag it down below that and now you’ve got a title that goes along with it, right? I’m getting stuff that needs to be styled but the structure of just ticking this in is so easy in Thesis 2 compared to Thesis 1.