Build Your Own Business Website header image

How to Position Images Within a Post or Page

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

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

In this session we discuss how to position images within a post or page. Moving images around in text requires you to know something about how images and floating of text work together. We show how to float an image next to text. We don’t recommend dragging the image around because it does not always produce the desired results. Then we discuss the distance between the image and text which is preset by Thesis. However, you can configure it using some custom CSS Code.

Video Transcript

Okay. Could I ask you another question?

Absolutely.

Okay when you set up an image on one of the pages you know it asks you, there’s a drop down menu with some choices. It sort of goes where you want or where… I’ve also tried moving the images around and that’s a real hit or miss process. I mean, sometimes it moves, sometimes they don’t, sometimes you take them where you want them to, sometimes they don’t.

Well, moving images around and text requires you to know something about how images and floating of text you know, work together. If you want an image to float on either side of this text, let’s say you want right here. What we wanted to have is on this site, we want an image that sits right here. So we’re going to place a cursor right there because that’s where that is and we’ll insert the image and we’ll tell it to float left. So let’s just do that, let’s insert the image, we’ll take it from this gallery again. We’ll show it. In this case, we’re not going to link it to anything, it’s just an image.

And so we want it to float left. You can see down there where it says left. So we insert that into the post, we hit update. Come over here and refresh it, there it is, floating left.

Now let’s say you want to float it right instead. You want the text over here and the image right there. You want think that the thing to do is to put the image in over here but it isn’t. The thing to do is to leave the image right where it is so we’ll delete that image again. If you want it on the right hand side, you still want to go to before the text and insert the image and we’ll pick the same image again. And this time, we want it to float right, again, no link floating right, insert into post, hit update, come over here. And now, it’s on the right hand side. Had you placed this… had you actually placed your cursor say before the I… it would not have produced the desired results.

Yeah, I found that out.

The way this thing works is that floating…you should put an image that you want floated before the thing you want to float around it regardless of which way you want it floated. Doesn’t matter you know, how you want to float it. It should go immediately in front of whatever you want to float. So let’s say you want it floated before you know, you want this thing floated beside the 12-week course. You’re going to come right there beside this and add the image and float it to the left, right there beside that heading. Now what’s going to happen is the heading is going to float and so is the text because everything that can float beside it will. So if we hit update and refresh this, you can see that both the heading and this text floats around it.

Okay. Now what about the…

Go ahead.

What about the distance between the image and the text? Is that… any change in that at all? Or the margin or whatever you call it?

Well you can change it but that will require you to write some custom CSS. The distance here between the image and the text is set by Thesis. So Thesis automatically creates the distance based on the size of the font. Now because I think this is a little bit more of a distance because I put it beside the…I don’t know. It’s not going to be the case. This is just align left, I think. Let’s see… okay.

So where image align size full size and it’s align left and so the margin on either side is automatically created at 1.5 ems. It doesn’t have anything to do with…yeah, that’s what it is.

And so, that is predefined by Thesis. Now you can use custom CSS to make it smaller, if that’s what you want. But that is pre-set by Thesis.

Okay.

And now theoretically, you can drag this.

Yeah, that’s what I’ve tried too.

Theoretically, you can drag it. You want to look at the place where the cursor is going. You can actually see the cursor location right below your mouse. It’s hard to see because it makes the image transparent but there’s a little cursor location that shows right there and that’s what you want to use to do that width is that little cursor location.

Now I don’t think this really gives you good results. So that’s not what I recommend that you do. I recommend that you just place the cursor you know, before the element and then place it there knowing that you can drag it. But it doesn’t always produce the desired results when you drag it. And let’s just see what happens when we drag this. Did I update that page?

No.

Let’s see, I guess not. Okay so in this case, it worked but it doesn’t always give you what you’re looking for so generally speaking, I would say you’re better off doing this by placing the cursor exactly where you want it. Also, I think… you’re also sometimes better off doing this… well, if you can read the HTML view, it’s a little bit better to get it exactly where you want it in the HTML view so that’s something else to consider as well. Yeah, you can see what’s happened is because I was moving that stuff around this, it got some extra space because when I was in this visual view, it you know, did some interpreting. And so, it went and interpreted it, created some additional HTML that when I deleted the image, it went away.

So it’s usually a little bit better to place this stuff inside the HTML view if precision if important, right? If you really want it right there beside that W you know, where you really want it to start right here easily then you can get a little bit better results by actually sticking the cursor exactly in that location in the HTML view.

Okay.

0 Comments… add one

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

Leave a Comment