Build Your Own Business Website header image

Example #5 – Create the Gallery

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

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

Our last customization example in this Beginner’s Guide to the Thesis 2.3 Skin Editor is to create a gallery. We are going to create it on the gallery page. This isn’t a traditional WordPress gallery, this is going to be a post image gallery.

Create a Custom Template

What we are going to do is create a custom template. Then we’ll copy the Page template into it and then we’ll modify that template.

Come over here to our Front Page and we’re going to choose “Add New Custom Template”. This will be “Post Image Gallery”. Create the template. We’ll use the Full template for this. Select a copy from template, then select the template and choose Full Page. That has now copies the Full Page template over.

Modify the Template

In this case, we don’t care about the byline. We don’t care about the author avatar or the featured image. And we don’t care about the post image. All we want is this section is the headline and the post box. We also don’t want page comments so we’ll just dump those out.

You can see we are missing our new footer so let’s create it quickly. We’ll add footer columns and then each footer widget that we created when we made our widgetized footer. Move the footer columns into footer container.

Create the Gallery Container

The next thing we want to do is add our column wrapper for this gallery. So come down here again to HTML container and we’ll call this, four columns. We’re going to think of this as being kind of generic.

So we’ll add the columns class and then columns four. We can use this on other templates as well if we want four columns someplace else. We didn’t do this with the footer columns because they are going to be on every template.

Take our four columns and move it over into the container. Drop it down below columns and above footer columns. Then grab a query box and this query box is going to be our ‘Post Image Gallery”.

Add Options

In this case we aren’t going to worry about schema. We can go ahead and use a div. We’re going to use options. We’ll use recent posts but we’ll show 16 posts and we’re not going to skip any. So then we shift+drag this over into four columns.

Add Headline and Image

Open up four columns and now we decide what’s going where. We’re not going to use the excerpt or the edit, or the author but we are going to use the WP featured image here. This is going to be centered, no wrap. And we’ll use the large image again.

Let’s close up our tray. We’ll put our headline here. The headline is going to be a p tag and we’ll link it to the title. So it’s going to be much smaller. Then here in our class we’ll add one quarter. Similar to what we did with the featured posts except now it’s just an image and a headline.

Save the template and let’s go back to the gallery page and edit it. Then we’ll choose the custom template which is going to be the Post Image Gallery. Hit update. We’ll add a little text here, “Check out our cool post images below”.

Review and Modify the Gallery

Let’s view the page. Now you’ve got this nice little gallery here with the images in there nice and close. If you wanted more space between the images, in this case we could make smaller padding but I don’t think I would. It looks good as it is.

Really if you don’t want the title there, you can alway just move the title out and just have the image.

Let’s see what this looks like in the responsinator. We may have already done everything we needed to do to make this work. The code we put in may be sufficient. Images are stacking properly. They are 100% wide there which is right. And here as well which is not right.

So we’ll have to add a columns four rule so that these don’t end up being that big. Let’s go do that. Come over to Custom CSS. It’s this right here, footer columns one quarter. We’ll say columns four one quarter and then we’ll copy that. Come down here and add it so now we go to 100% wide on the small screen. Save the CSS.

Let’s take another look. Flush the cache. Open an incognito window and reload our load. So there’s the 100% and there’s the 50% and so on and so forth. That worked out well. The large image allowed the image to be as big as was needed for these phones. The medium image would have been fine for these but would have made it small here.

Let’s just try it and see what the effect is if we use medium sized images instead. Make that change. It doesn’t have any impact on this because that’s smaller than the medium. But it may have some impact on the phone. There you can see the images are slightly smaller than the space available on the phone but they don’t change in size at all when you flip it around. They just look that way.

So you could decide whether or not you want the image gallery to be this way or not. Those are all the kinds of things that you can do. Really, you can do anything that you want with displaying numbers of post with a query box. And hopefully you’ve learned some basic responsive CSS concepts so that you can make your own structures and still apply them.

0 Comments… add one
0 comments… add one

Leave a Comment