Build Your Own Business Website header image

Thesis Post Image and Thumbnails

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.

Part 1 The Basic Post Image Functionality

This is Part 1 of Thesis Post Image and Thumbnails series and in this session we discuss the basic functionalities of the post image and how thumbnails are automatically generated without you doing anything.

Video Transcript

We’re going to start off by talking about the Thesis post image and thumbnail and we’re really going to start by talking first about just the basic functionality of the Thesis post image. And I’m going to use this community news site as a basis for doing that, I believe. Let’s just make sure we’ve got a post in here with thumbnails… we do, okay.

So I’m going to edit this post here. Oh pardon me, actually I edited a page. Let’s go to a post and this exists for both posts and pages so we could’ve looked at it on the page edit screen but we’ll look at it on the post edit screen anyway. And this post image and thumbnail is set in this options meta box and the way it works is when you put the address of an image here, in under Post Image, Thesis takes this image and places it based on default information that you’ve specified, places it at or near the top of the post. And I suppose we should even just start off by talking about a couple of definitions. The post image, let’s see, let’s view this post. The post image is this image right here, the image at the top of this post. And the way I have this set up is the post image shows up above the title as its default organization.

If we come over to my blog over here, we have a similar situation where each of my blog posts has an image. But in this case, I’ve placed the image below the blog title. So this is the Thesis post image in both cases.

Now a thumbnail image is used in a teaser. So if we go back over to this blog page and we scroll down here, we get to these things called teasers which are conceptually not unique to Thesis but in this application, this is unique to Thesis. This teaser display of the post is not something that is inherent in WordPress. It’s a special Thesis feature and it displays a link off ot the post and the title and some basic meta information and a thumbnail image and some excerpts text. And this Thesis teaser is set up and specified in Thesis Design Options. So this is the thumbnail and this is the post image.

Okay so if we come back over here and take a look at what you enter, you enter the raw URL for the Thesis post image and then you can also enter some alt text and you should, in fact, enter alt text just from a SEO standpoint for no other reason. And here are some green apples. Okay so there’s some alt text.

And then what you can do is you can change the default behavior of a frame. That is, the default is automatically set right now to do not frame the post image. But I could instead, choose on this image to frame it which would then put a little grey frame around it. And in fact, let’s just go ahead and let’s update it just like this so you can see what that looks like. You can see there’s the little frame around it. Now I don’t really particularly care for the frame myself but you could put a frame around an image like that if you felt like it looked better. And this is not however the default behavior. That is, this is happening only on this post.

If we come over and look at this post, it doesn’t have that same setting and so it doesn’t have a frame. So what we did here was when we added that frame, we changed the default behavior.

Somebody asked how you would change the color of the frame. You would change the color of the frame by customizing CSS. There is… you would use your custom CSS file and identify that selector and then change the color of the frame using that selector. And because that’s code, that’s outside of what I consider to be a beginner question but we could certainly take a look at that on a Wednesday, if you like. I’d be glad to show you how to figure that out.

The next thing you can set is the horizontal and vertical position and again, these are set flush left with no text wrap and above the headline. That’s the default as this thing is set up. But you know, you could switch this to below the headline or before post and page content. You might think that below the headline and below post or page content is the same thing but we’ll pick the before post and then I’ll show you what it is.

What you have is often in these things, you have this post meta which is what that stuff is. And so if it was directly after the headline, it would be between the headline and the post meta. But in this case, it’s after everything just before the text as it’s set up this way.

Okay and so, that is the basic functionality of the Thesis post image and without any further setting whatsoever, Thesis automatically generates a thumbnail. I don’t have to do anything in this box here to get a thumbnail for this post. And in fact, if we go back to our blog… let’s see, let’s go to our blog and we scroll down here to find the Cara Cara Oranges, here’s the Cara Cara Oranges blog post. And you can see that that blog post has this little 66 by 66 I think it is thumbnail that has been cropped out of the larger image. And this happened automatically without doing a single thing to this section.It automatically cropped the image and created a thumbnail.

So that is the basic functionality of the Thesis post image and thumbnail.

0 Comments… add one
0 comments… add one