Build Your Own Business Website header image

Lesson 12 – Part 5 – Agility Display Configurations

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Now we’ll talk about the Agility skin’s display configurations. So let’s switch back to the Agility skin, select skin and stop previewing skin and go to the Skin Editor.

Tools Unique to the Agility Skin for Thesis 2

Agility comes with two tools that are unique to Agility and don’t exist inside of Thesis 2. And those two tools can be found down here under Add Boxes. I’m just going to move that away for a second.

Agility Featured Image and Agility Read More Link

We have the Agility featured image and the Agility read more link. We’re going to talk about both of these at length here but I include both the Agility featured image box and the Agility read more link box in my post boxes. And so you’re going to see those things here in Agility as we work our way through this.

Typical Page Template Display Configurations

On the typical page, I use the page post box. Actually, I have created 3 different post boxes. I’ve created the page post box. I’ve created the single post box and I’ve created a home post box. And those are the 3 post boxes I use and the page post box is the one I use on the page and on the front page.

The page post box has the headline and it has the large image so this is my Agility featured image rather than the the wp featured image. It’s the Agility featured image and then the content. And this is the same on both pages, on all of the pages and then on the front page. And also on the custom template, the no sidebars custom template. That’s the system that we use for the standard page or the typical page.

Images Available for use on a Page

Remember a couple of weeks ago, we talked about the 4 types of images that you might have in a post or page. The first one is the attachment image and that’s an image that you insert directly into the post using the media library. That’s an attachment.

The second one is the WordPress featured image and you set it by clicking this button, set featured image. Then there’s the Thesis post image which you can either set by using the Thesis post image thing down here or it’s already been there because you’re redoing an existing site.

And there’s the Thesis thumbnail which is similar to the Thesis post image. Those are the 4 kinds of images that can be associated with a post or a page.

Benefits of the Agility Featured Image Box

And the Agility featured image box works off of the featured image, not off of the Thesis post image and not off of the Thesis thumbnail. It works with the WordPress featured image. And I believe this box is the right box to use for a number of reasons.

Wide Choice of Image Sizes

You can choose which image size you wish to display. So any registered image size in WordPress can be selected from here. So you can see, in this right now, we’ve got the thumbnail, size medium and large.

Then we’ve got the Orbit slide and then we’ve got the Orbit small slide and Orbit custom. So these are 3 different slide sizes defined by the Orbit Slider. And then we’ve got the full size which is however big you uploaded it.

And you can pick any of these using this featured image. I’m picking the large because we designed the large image to fit in that space.

Choice of Image Alignment

You can choose an image alignment so you can say either none which means it’s just going to sit there on top of everything else. You can choose left which will allow text and other stuff to float up to the left of it. You can choose center which takes the image and centers it in the space but doesn’t allow anything to jump up on either side. And you can choose right which floats the image to the right and allows text to come up on the left.

Choice of Image Link

You can also choose to link the image to the post and you can also specify the link title. If the image is linked to the post, by default, if you hover over it, it will say view the post. But you can choose to put anything in there that you want. So this is the Agility featured image and I use this for inserting images in all of our different post boxes.

Typical Post Template Display Configurations

Now we’ll move on to our typical post which is our single template. Here we have a single post and the single post box does have a wrapper first for post heading. And in that post heading, I put the headline, the author, the date and the categories.

And I’ve included the large image and the full content. So an example of that is here. Here’s our single post. So we’ve got the title, the name, the date and the category. We’ve got the large image and then we’ve got the content. So that’s the layout of the single post box.

Home Page Template Display Configurations

Then you have the home page. And the home page and the archive pages share the same post box. That is your home page and your archive pages are identical in Agility, at least they look identical in that they use the home post box.

The home post box has a wrapper for post heading and a wrapper for post footer. The post heading wrapper has the headline, author, date and categories. Then it uses the thumbnail image and the thumbnail image, in this case, is floating left and is also linking to the post. And then it uses the excerpt. And then after the excerpt, it’s got a little footer in there with the read more link and the number of comments.

So when you look at it on its page, this is what the home page looks like. It’s got the title. It’s got the name, date and the category that it’s posted in. Then under that, it’s got the thumbnail image and beside the thumbnail image is the excerpt. And then the read more link and the number of comments.

Archive Page Template Display Configurations

And it’s exactly the same way as the archive pages. So if you click on the author archive, you can see all the posts written by Rick Anderson and it is laid out exactly the same way as the articles page is laid out.

The same thing is true with the category archive page, say, the category working with an architect. It’s only one post in that category but it’s laid out the same way.

Agility Read More Link

Now the Agility Read More link gives you additional styling options. First, of course, you can wrap it in some kind of a tag. Secondly, you can give it a class and third, you can change the read more text. So it doesn’t have to say read more. You could go view the rest of this post or whatever text you want. Aand that will change this link right here.

And in fact, maybe what we’ll do here is instead of read more, is we’re going to say, “View the rest of this article”. So view the rest of the article… save the template. And if we come over and view this, there’s what it says now. View the rest of the article instead of read more.

So that’s the theory, that’s how the pages are organized and how content gets displayed. Now we’re going to add blog functionality to the site.

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