Build Your Own Business Website header image

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 8 – Using Images in HTML

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

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.

So we’ve discussed using lists and links in WordPress and with that done we’re going to start talking about images in HTML. Images in HTML are also HTML elements.

Adding an Image in the Text Editor

Whether you’re in your visual view or your HTML view, you can place your cursor where you want to put the image and click Add Media. We’ll come down here and grab that and we’re going to use the thumbnail size image.

Attributes

We have a bunch of attributes here that we can start setting up just like we did for links. Let’s give it a title here, we’ll call it “Yummy Pastry”. The alt text is that text that screen readers are going to use and we can just say “Picture of our fruit pastry”.

Attachment Settings

Then we have some other attachment settings like whether we want to link to something. At this point we’re going to say none. We have what alignment we want to have and what size we want to have.

When we do that and insert it, what we’ve ended up with here is an HTML image tag that is as we’ve looked at previously, a self-closing tag. Note that you’ve got image with the closing like that and then it has the source which is the location of the image itself, the alt text then it has width and height.

Importance of Image Height and Width

This is now defining the width and height. What this is doing is telling your browser how much space to set aside for the image and WordPress automatically inserts width and height. If you don’t include that in your image tag, then what happens is the page has to stop rendering until the image itself is loaded.

However, if the image is not loaded and you’ve specified the height and width then the page will continue to render while it’s downloading the image. So it’s always best to include both the height and the width of the image in this case.

You should note that you’re not putting that height and width in because you want to specify the size of the image. The reason why you’re putting this in here is because you want to set aside room for the image. Now, if you feel like you need to specify the size of the image for some reason, we’re going to take care of that in CSS but this will just define the room that is available for the image.

Class Attribute

Then finally, we have class. This is actually a class list where it’s align left and size thumbnail and wp-image-248. Each of these are classes that have been assigned to this image so this is the complete tag with the src attribute, the alt attribute, the width attribute, the height attribute and the class attribute.

Let’s update this and refresh our page. You’re going to see the image is sitting right here and because it has the class of alignleft added to it, it has floated over here to the left and has allowed the text to wrap around it.

Creating Image Links

So that is the HTML image and the next aspect of this is to turn this image into a link because very very commonly, HTML images are actually link to other things.

The way you make an HTML image a link is you wrap it in the link. So for example, let’s just take this link here that we’ve already created and we’ll take that opening link tag and cut it out of there and put it in front of the image. Then we’ll take the closing link tag and we’ll paste it at the end of the image. And now we’ve turned that image into a link and by clicking on that, it takes us down to the bottom or it takes us to another page or whatever we want it to link to.

You probably already recognize that you can also do that very same thing inside of the Insert Media setting anyway, right? I’ll show you. Let’s delete that and go add a new image here, let’s add this one. We’ll give it a title, “Green Coffee Beans”, alt text of “Picture of Unroasted Green Coffee Beans”, we’ll give it an alignment of left . Now instead of “Link to”, we’re going to say, “Link to a Custom URL”, you can put in any URL there, byobwebsite.com for example, update that.

Now if we come over and look at our text, here’s our link. There’s the link, there’s the image and there’s the closing link tag so you’ve got your opening link tag, your closing link tag and the content of that link then is the image. This is what’s called an image link. Again, let’s refresh this page and click on it. Now it takes us over to BYOBWebsite.

Images as Inline Blocks/Block Level Elements

Something to note about this is that images are inline blocks by definition. Now, Thesis in its default CSS declares images to be block level elements so I can’t really demonstrate an inline block image here because we have to override the Thesis Default CSS. But images start off in the adulterated world as inline blocks. That is to say that they can be arranged like this but they can also just be in line with text.

HTML Images vs Background Images (CSS Images)

Now, the one thing to know about this is that HTML images are different than background images. Background images are CSS images and they don’t take up any height or any width and they by default will repeat in both directions until they fill the space available to them but they don’t make a space any bigger than it is.

However, HTML images do have a height and a width and they take up space and the HTML space expands to be able to take the image especially vertically.

Now horizontally, more often than not now in responsive skins, images are defined as being a maximum width of 100% of their container and so images generally won’t expand beyond container boundary even if they’re defined as being larger. That’s an aspect of responsiveness but typically, HTML images expand their containers to wrap all the way around however big that image happens to be whereas CSS images do not do that. CSS images may not show up at all if their container that they are background image for doesn’t have any content.

0 Comments… add one
0 comments… add one

Leave a Comment