Build Your Own Business Website header image

Lesson 10 – Part 1 – Post Images in Thesis 2 and Agility

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects - , ,

Applies to - ,

Well good morning everybody and welcome to Lesson 10 of our How To Build A Professional Website Using WordPress and Thesis 2. Today, we are going to be talking about how to use plugins, widgets, boxes and packages.

But before we jump into those subjects, we’re going to first talk about something that I intended to talk about last week but inadvertently skipped over. It became apparent to me that the use of post images in Thesis 2 and in Agility was something that needed a thorough treatment.

4 Types of Post Images

There are 4 types of post images that you have to work with inside of WordPress and Thesis 2. There are post attachments, Thesis post image, the Thesis thumbnail and the WordPress featured image.

Post Attachment Images

In the very beginning of WordPress, the only way you could insert images into a post or a page was by means of inserting it directly into that post. And that kind of image is called a post attachment. And now you can put as many images as you like inside of any given post or page and every single one of those is a post attachment.

Sizing

Now the size of those images is determined when the image is inserted. Remember last week when we were inserting those images we selected the size as either large, medium or a thumbnail. But the size that’s displayed there is determined by the choice that you make when you insert it.

Location

And these post attachment images can only be located within the content area of the post. Let’s take a look at one that we did here last time…as I recall, we did the West Seattle View Home. And we inserted this image here inside of the post. Now when we did that, we did that as a post attachment and you can see that over here.

If we go to edit our page, that image sits right here inside of the content, right? And the limitation on this is that it can only be located inside of the content so it couldn’t be located say, above the heading or between the heading and some meta. It can only exist inside of the content area.

Thesis Post Image

The second kind of image we have is the Thesis post image. The Thesis post image came along several years ago when it was obvious that there were a lot of ways you could use a post image besides just inserting it into the content.

People came up with plugins for using thumbnails and creating thumbnails and then inserting thumbnails in different places. And Thesis included this inside of its theme and gave you the opportunity to specify a specific image to be the post image.

Sizing

The size of that image is dependent upon the size that you actually insert. So you’re not using the Media Library to insert it. You’re actually inserting the URL directly into the Thesis post image field and it displays the same size that the image is that you insert. So if you insert an image that’s too big then it’s going to show up too big. And if you insert an image that’s too small, the same thing is true because it’s just the absolute size of the image that’s inserted.

Location

You can place a Thesis post image by just moving the box around. So you can put the Thesis post image box above the heading or below the heading or anywhere you want inside of that template and the image will display. You insert it in the post image field.

Let’s come back and take a look at this post, scroll down here. These are the Thesis meta boxes. So you’ve got your meta tag, meta description, meta keywords. But then you scroll down here to the Thesis post image and you can insert the Thesis post image by clicking on that button and selecting an image to insert. Or by getting the post image URL from the Media Library and posting it here.

Options

And then you have the opportunity to give it some alt text and image caption. You can decide whether or not you want to put a frame around it and you can specify an alignment for that image. And this is how you would insert a Thesis post image. This was a revolutionary concept in WordPress when it came out and for a long time, it was the only theme that had this option.

Thesis Thumbnail

And then along with that is the Thesis thumbnail. The Thesis thumbnail is automatically generated if it’s from the Thesis post image. That means if you put a post image in or if you include a Thesis post image, then it will resize that and create the Thesis thumbnail for it. Or you can insert a different image in the thumbnail field and it will use that instead.

Specifying the Image

And so again, if you’re looking at the page edit screen here, we have the Thesis post image. And now we come down to the Thesis thumbnail and again, you can specify a different image. It doesn’t have to be the same image. If you don’t specify anything but you specify a Thesis post image then it’s going to automatically create a thumbnail.

If you specify a different thumbnail here then it will be whatever image you specify here. And again, you have the same kind of settings.

Sizing

Now the size of the Thesis thumbnail is either the thumbnail setting size that you set under media options last week or it is the size of the image that you inserted as a Thesis thumbnail. So it’s one of those two sizes.

Location

And the Thesis thumbnail placement is determined by the box placement. And so again, just like you can move a box around for the Thesis post image, you can do the same thing for the Thesis thumbnail. You just move the box to where you want it and that’s where the image will show up.

WordPress Featured Image

I think it has only been in the last year and a half since WordPress came up with the WordPress featured image. It is the WordPress implementation of a very similar concept to the Thesis post image.

Insertion

And the WordPress featured image is inserted using the featured image function. And again, it’s one of those meta boxes on the edit page but it’s here, featured image, set featured image.

Sizing and Location

Now when you set the featured image, its default size is the thumbnail size. Again, the size that you set under media settings. And in Thesis, its placement is determined by the box placement. Again, just like all the other ones, you can put the box where you want it and that’s where the thing will show up.

Featured Image Example

Now I’m going to switch this image from being a post attachment as it is right now to a featured image. So I’m going to delete this image here and then I’m going to set the featured image. And I’m going to set it from the Media Library and it’s that one there. Yeah, 640 by 427 so that’s going to be my featured image.

And you can see the button down here says set featured image, not insert into post but set featured image. So you click on that and now the featured image shows up down here.

Location

Now if we update this post, you’re going to see that the net result is very similar because of the way I have Agility set up. Let’s view the page. I have Agility set up on the page to put the featured image directly below the title. But that can be placed anywhere we want to place it.

Thesis 2 has 3 Boxes for Displaying These Images

Thesis 2 comes with 3 different boxes for displaying images like that. It has the Thesis post image box, the Thesis thumbnail box and the wp featured image box. Let’s come over to Thesis Skin Editor… let’s make sure that we allow. And then that stuff is inside the content area, content area page… well yeah, we can still look at the front page. Full width content, main content area and inside the wp loop, in the page post box are your image options.

Now these are the three boxes that Thesis has for you, for images. It has the wp featured image. It has the Thesis thumbnail and it has the Thesis post image. And you’ll note that there are no settings for these.

WP Featured Image

There’s nothing for you to set when you use these and if you use the wp featured image, it will automatically insert the featured image size.

Thesis Thumbnail Box and Post Image Box

If you insert the Thesis thumbnail then that thumbnail size will show up and then the post image size will show up. And these are the three different boxes that you can use to place images.

Using the Agility Skin’s Featured Image Box Instead for Displaying Images

Now I don’t think you should use any of those three boxes because I don’t think those three boxes provide you sufficient flexibility for letting your side out which is why I created the Agility featured image box. So I’m just going to drag these out of the post box. And what I created was this Agility featured image.

Select the Size of Image to Display

The Agility featured image gives you the opportunity to select the size of featured image that you want to display. So in this case, you can select the large featured image, the medium, the thumbnail or the full size. Now if you had created custom image sizes, you would also have those choices available to you here. So you can select any registered image size using this Agility featured image box.

Specify the Alignment

You can also specify the alignment. Notice that that was not an option in the other boxes. But in this case, you can specify an alignment.

Link to the Post

You can determine whether or not you want the image that shows there to link to the post which is something that you do on the home page and on archive pages. And in the case of that image linking to the post, you can create a specific link text. So by default, it says view the post but you can put something else in there instead.

I created this tool because it gives you what I consider to be the range of flexibility that you want with the kind of website we’re creating. And so this is what I use. I don’t use anywhere inside of Agility the Thesis thumbnail, wp featured image or the Thesis post image.

Choosing Type of Image to Use on your Site

And in fact, even though I’ve described for you all of these different images that are available to you, what I recommend you use is just the WordPress featured image and skip the Thesis featured image system.

Now in the case that you are updating an existing Thesis site or you’ve used the Thesis post image and Thesis thumbnails on the site already, in that case, you may want to continue using them. But you also may want to just convert all of those things over to the featured images and then use that function here.

It’s a little more complicated if you’re upgrading an older Thesis site to Thesis 2. But in terms of what we’re doing here today, starting a site from scratch, I think without question the right choice is to use the WordPress featured image and then use the box that I’ve supplied you with.

If you aren’t using Agility and you’re using some other skin, I do also have a box that you can use that does the same thing. Let’s just come over to the site for a second and look under plugins, boxes and packages for Thesis theme 2. Here you’ll find I have the Featured Image Box I created for Thesis 2. So you can use that in any other skin that you’re working with and it will do the job for you as well.

Hopefully, that was a well rounded introduction to the use of the post image in Thesis 2 and in Agility.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment