In this session we discuss the images in Thesis 2 including featured images, Thesis post images and attachments and how they are placed and displayed in a page. We discuss the featured image in detail. It is the image we recommend using because it is WordPress’ answer to post image and thumbnail. We also discuss how our BYOB Agility Nude Skin is also set to display the WordPress featured image.
Member: And what I wanted to ask you was about pictures. Because what I have been doing all along and I’ve been doing this since I’ve had WordPress which is since 2007, is I always either uploaded the picture to WordPress and put it in the post and that was it. It was nice and pretty and it will blow up and all that good stuff. But when I did this, I don’t know what Thesis has done. They didn’t work anymore because when I did the… I did your responsive theme Agility and I realized that from talking to you that there was no mechanism for the picture to show up on the front page. So I kept trying to do featured and WP Thesis and then it would double back on the host. And then you told me why didn’t I delete the one that’s actually in the front, you know the one that I’ve actually put in the post and that I actually inserted in the post. Wait a second, I said, “That all makes sense.” But then I realized like when you post a social media things, the picture doesn’t show up. And I think it’s because all along, I’ve never done it the right way. So this is what was explained to me, it confirmed me which is going to be a lot of work for me unless there’s a workaround. I should have been uploading it through either WP Thesis post, doing the thumbnail in WP Thesis post.
Rick: Well let’s just… let’s work on the concepts and the terminology here first.
Rick: So there is essentially 3 types of images that you could be using today. The first one is the kind you were using all along which is an attachment and it’s an image that is automatically… that you place inside of your content physically. So you put your mouse in there and you say insert image. And you go to your Media Library and you pick the image you want or whatever. And that’s one kind of image.
The second kind of image that Thesis users have had access to is the Thesis post image. Now the Thesis post image is a couple of things. It allows you to place the image before the title or immediately after the title but before the meta information. Essentially, you have places where you could put the image and it wouldn’t be inside the content specifically and it would be in and around the headline. If you had a Thesis post image, Thesis would automatically also create a thumbnail for you so that in the teaser view of your post, that thumbnail would show up.
Well, enter Thesis 2 and now you have a third option. And this third option is the one that I recommend because… and it’s the WordPress featured image option. Now, a WordPress featured image is essentially WordPress’ answer to the Thesis post image and thumbnail. You know, back when Thesis came up with this, you had to have a plugin in order to show thumbnail images and stuff like that. And so WordPress came along and created this Featured image concept and Thesis 2 has embraced the featured image.
So what the way Agility is set up is it’s set up to display the WordPress featured image and it displays the thumbnail view of the featured image on the homepage and it displays the full size view of the featured image on the regular single post page. And when you were seeing them, they show up twice because it was showing up once as the featured image and then of course, it was showing up once as an embedded image… as an attachment, as an embedded image in the post.
Now if you used the featured image feature, the social networking function should pick that image up without any problem.
Member: Now here’s my question. I’m actually on the back end while I’m talking to you.
Member: Remember when you just talked about featured… you can make the featured image a thumbnail on the front and then have a full… on the back end? You know, in the single post? How do you do that? Because the featured post is coming in beside that… I uploaded it to.
Rick: Well, the way WordPress works is that it automatically creates various sizes of the image that you upload to the Media Library. So let’s see… so if we go to…
Member: So my question is… I know that but I’ve never used… this is very new to me because I’ve always uploaded it and inserted it and then the backwards way. But should I totally forget about Thesis post image now?
Rick: You should totally ignore the Thesis post image. That you should totally ignore.
Member: Okay, that may be the problem because that’s how I uploaded the picture.
Rick: Well, so let’s look at… I’m going to let you show me your screen. So make you the presenter and I want you to show me that post.
Member: Okay, can you see it?
Rick: Yes, I can.
Member: Okay, see what I did? I uploaded it through Thesis post image.
Rick: Okay but you can delete that one.
Member: I can delete that one. Does that mean it’s gone from the uploader?
Rick: Yeah, if you just come down there and see that post image URL, if you just take it and delete it and save it, it’ll be fine. Go ahead and save it now.
Member: Does this mean I have to go back and fix all of my posts?
Rick: No, it doesn’t. It shouldn’t mean that at all. So now scroll down back down.
Member: It’s there still.
Rick: Oh no, see these are two different things. The Thesis post image and the featured image are two entirely different things.
Rick: That’s why I said we have… you’re talking about 3 different types of images. You’re talking about the attachment image, one you insert yourself, the Thesis post image which I’m telling you to ignore, and the featured image which I’m suggesting you use.
Rick: Okay, the featured image you have there is fine and now if you go back and look at your… if you go back to the Skin Editor and look at your single posts page…
Member: Okay, one second. The question is how does the featured image… how does it know in your skin that I want the front to have… let’s say, I want it to have it as a thumbnail…
Rick: I’m going to show you that.
Member: Okay, let me get to the skin. Hold on one second.
Rick: And I’m going to cover this in an organized way on Friday. But…
Member: Come on. Have you also… not to change… okay, here’s home. We’ll go to single post?
Rick: Yeah, go to single.
Member: Come on. Okay, this is what I was going to ask you that I probably screwed up because I haven’t fixed it. Okay, see where I have in large image, should I get to that and then…
Rick: No, no. See that where it’s… if you click on the little gear icon beside large image, see that’s where you can select the image size, thumbnail, medium, large or full. Now you do want large in a single one because that’s the full size image, right? So you would just…
Member: Right so I don’t have to put in… I don’t have to put in that WP feature that you have down here?
Rick: No, see again we have… the thing that says large image is the Agility featured image. If you go click on that again for a second, see it’s the Agility featured image box. See that at the top there? The Agility featured image box gives you a much wider range of choices than the WP featured image box down below. So this is something that I created that’s part of Agility which is why I’m not using the Thesis post image or the WP featured image box you see down there below. Instead, I’m using the custom one that I created for the skin which gives you the opportunity to select a size, select the alignment and that sort of thing.
Member: Now why do you have to specify what says… if you want a link…
Rick: Well, you want it to link to the post on the single post page because it would just be linking to the same page it’s on. You’re only going to do that on like the homepage. So if you close this now and go back to the homepage and again, open up that content area… let’s just take a look at how that’s laid out.
Okay, so if you click on that large image, you can see you’ve got the… it has exactly the same setting. Now you don’t want to… you wouldn’t change this box. You would just swap this box out for the thumbnail box if you wanted it to be different. So if you scroll down a little further, I think the thumbnail box is down there. See where the blue box says thumbnail image?
Rick: So those are the things to ignore.
Member: I got you.
Rick: That blue thumbnail image… go ahead.
Member: If I shift and drag…
Rick: You’re going to drop it in the post footer now. A little higher…
Member: I have to tell you, shift and dragging it is not easy.
Rick: To the home post box there, now you drop it. When it says… when it goes to bright yellow, that’s when you would do it or that’s when you drop it. And so now you take… pick thumbnail there and say link to post because you definitely want it to link to post. And go ahead and close it.
Member: And I got to get rid of the other guy.
Rick: Yeah, just drag it up to the top.