Next in this Introduction to HTML for WordPress and Genesis 2 we’re going to talk about using images. You’re already familiar with inserting images in HTML and images are a very important part of what you’ll be learning here.
Add an Image in the Visual View
I’m going to place an image in here at the beginning of this text. We’ll just click Add Media and go to the Media Library. This image here is 150×200 so we can insert this image into the post. We have a place where we can add the title, some alt text and alignment. For that I’ll say, “Client standing outside his door”, and then specify a left alignment. We won’t link it to anything and we’ll specify our full size of 150×200.
Review the Syntax
Let’s insert that into the post, update it and view our post. Now we’ve got this image sitting here, right? Well, this image is an HTML element and if we look at that in our editor, you can see we’ve got our image. Its first attribute is class, that class is alignleft, size full, wp-image-25. That’s essentially it’s class list, those 3 classes are assigned to it. It’s alt text is “Client standing outside his door”, its src attribute or source attribute is the location of that image, its width=”150″ and its height=”200″.
Now, the attributes in images are important as there are a number of things these attributes do. You have that alt attribute which as I mentioned before shows up in the screen reader for visually impaired people and also shows up if the image URL doesn’t somehow resolve. The title is not actually in there but you could put a title in there and if we did that the title would be the tooltip when you hovered over it. Something new here is width and height.
Specifying Image Width and Height
Width and height here can be used either to size the image although generally you don’t want to do it that way. The main purpose for having the width and height here is that it’s telling your browser how much room to leave for the image which allows the page to load even though the image hasn’t loaded.
If you don’t specify width and height, the page can’t continue to load properly until the image is loaded. So you always want to include the width and height attributes to an image tag when you are inserting an image because it makes it load faster.
You can also use that width and height to specify a different image size than the image actually is but that’s not particularly good practice and I don’t recommend that you do that except for extraordinary circumstances. Typically, width and height are the actual size of the image that will be displayed and it sets aside space in the rendering of the page so that the text can continue to render even though the image is in the process of uploading.
Images as Inline Blocks
Let’s take out class for just a moment. We’ll take out the class attribute and save this. You’ll see what happens with it as an inline block because with an inline block what happens is the image starts and then the text starts after it and it stays in the line with the text. I’ll show you.
Let’s take this image here and move it down to here. This is how an inline block behaves, right? The image itself can’t fit in what’s left so it’s not really starting a new line, that’s not really what’s happening here. What’s really happening is that the image itself is taking up so much room that there’s this big space here but then the text continues.
Let’s look at it with it inserted like that instead. So this is the behavior of inline block where it just keeps on in the line and so the text come along and then you’ve got the inline block element and it comes along again. It doesn’t automatically create a new line, it stays inline with the rest of the text.
Now, the class that was there, that class “align-left” was the thing that made it display as a block and moved it out of the typical line of the code. So, we can come along here and just do that again class=”align-left”. Update and now it pushes it over to the left and it allows the text to float around it. That’s what we mean by floating or positioning something via a float, we just told it to align itself to the left which meant that it comes over here to the left and then it allows the text to jump up beside it.
Make the HTML Image a Link
Now, this HTML image could also be a link and we could have made it a link when we inserted it by telling it we wanted it to link something. But what we’re going to do here instead is we’re going to take this link, so the a tag, take that whole piece of the a tag and we’re going to cut it away from the link. We’re going to wrap the image with it and then we’ll take that closing a tag and put it after the image.
So now, what we’ve done is we’ve wrapped the image, the image becomes the content of the link tag as we’ve created an image link. Now when we refresh this that’s not linked up there anymore. If we hover over this, you can see it says, “Work with an Architect who Listens to You” and if we click on that, it takes us down to our spot.
You use image links all the time, those social networking buttons are often image links and images that you insert into pages are often image links. What I want you to get out of this is that an image link is a link that has an image tag as its content.
I just want to refresh your memory that the image tag itself is a self-closing tag, right? So the image tag is this right here and it starts with the img and it ends with that slash (/) and greater than (>) symbol. So that’s what makes it that way.
Two Types of Images
There can be two different types of images in a page. This type of image is an HTML image and an HTML image actually takes up space, it actually takes up room on the page. So text flows around it or it interrupts text. It is as big as it is and if an image is bigger than its container, that container will expand to take that image.
However, the other kind of images that are used on the site are called background images or CSS images and those images do not take up space.
If your background image is 1000 pixels by 1000 pixels but the space that you’ve made it a background of is 10 pixels by 10 pixels, that space is going to stay 10 pixels by 10 pixels and you’ll only see that much of the image.
The background image does not take up space, it does not expand its container. All it does is it colors the container that it’s in and it’ll show to the extent that the container that it’s in is large enough for it to show. That’s the difference between an HTML image which always takes up space and is always visible and a CSS image or a background image that does not take up any space and is only as visible as the size of its container.