Mar 192013

(For the full video tutorial, become a Silver Member by clicking here)

Video Transcript

Okay, the world wide web is a great resource for images, and what we would like to do really is on our website have as many relevant images as possible, and as you can see this is a WordPress page using the weaver theme as I've shown you before with our covered posts and pages. This is actually a post that I've added something text to. Now just imagine that you would like to add an image to your post here. How would we do that? Okay, let's get back to the administration dashboard! Which is here. And I've loaded the page, or post actually, that will have the image that we want. So let's now put the cursor at the beginning of the text. My plan is to have an image on the left-hand side, and this text here would then wrap around the image. So, let's add media. I will, at the moment, show you how to upload media from your hard disk. So you clicked "add media" and you go to "select files", and as you can see, I've got quite a few pictures here to get to the website, so let's choose one of them... And just open it... And it loads it up. If you want the text that I've added to wrap around this picture you have to actually go over to the right-hand side. It's always a good idea actually to have an alt text. So I'll just go ahead and copy the title and add it to the alt text. It's good for SEO, it's good for people with impaired vision, and so it's well worth putting in an alt text. And alignment now if you want the image to be on the left-hand side just align it to the left, and you can actually add a link to that image, but generally you probably don't need a link. So you can set it to none, and then the size. You can have the original size, which is a fairly large size, or a medium one, which is 300 pixels by 193 pixels. Which is probably about right, so you'll have a look in a minute so we'll insert that into the post. And there we are! Shows us an image with our text on the right hand side of the image. Now let's update this and go have a look at the website to see what it looks like. Alright, so we move over now. I've already loaded the website on another tab, so we click on the tab and refresh. And here we are. You can see that the text is actually on the right hand side of the image. If there were more text there you would actually have this wrap around underneath as well. Let me show you that as well, and you can see how simply the text just wraps around the actual image. And it does leave the right amount of margins that looks quite good. Now you might say, "Okay, the actual image looks good on the left hand side, but I'd like to change it to the right hand side." So, it's fairly simple, all you do is go over to the image that you've entered in the dash board editing page and then just click on the image and you get these two little symbols at the top of the image. It sort of goes a little bit blue, and so what you do is click on "edit image", which is the left hand side. Click on it and then you have the choice now to actually put this image on the right hand side instead. So go to this radio button and click right hand side and then update it. Now it shows the image on the right hand side. You then update the website. We have to reload the website. And it has moved to the right hand side! So that is quite simple, adding an image. There are other possibilities as well. You might like to add an image right below this, but not wrapping any text around it. Just below the text. So we will go and add another media. So scroll down to the bottom and you will put the cursor at the end of the text. If you type in "return" cursor is now on another paragraph. And go and add media again, and again you can load files into the media library. Perhaps you have a new picture, so we go to upload files, select, and let's choose another picture. What about this one? Let's go with that one and load that one as well. Now this time we're not really interested in aligning the actual image anyway. So we'll have it in the center. So go to alignment, center, and as usual it's always a good idea to copy the title into the alt text to make sure everybody understands what this image is about. And perhaps this time we will still not have any links associated with it, but we will go with the full fize one because we have a lot more room. We're going to go for the whole span of the post. There we are. That is a full size image and you can now go up to see that we still have the original text and image and then we update. As soon as this is updated we can shoot over to our actual web page and then reload the page. And as you can see now, we have our original image with text and we can actually scroll down to see the full picture that we added. And as you can see, it's all about cats and pets. Which is a great theme anyways. So perhaps your theme for your wordpress website would be about your pet. And you can take pictures and load it up. Now while I'm on the subject of taking pictures... Most phones and camera phones and cameras these days have an incredible size photographs. The photograph taken with them will be quite large. It'll be probably in the megabytes of actual digital size, which will slow down your image loading on your website. So if you're using your camera to take pictures for the web, my suggestion is first to actually see if you can turn down the resolution of your camera. And also if you can reduce the actual size of the photographs, that will help. Secondly, down below the video I will list some software that you can download and you can use the software to reduce the size of the image files that you end up with from your camera. So the combination of the two, you should end up with an image file that's below 200 kilobytes. My suggestion is below 100 kilobytes is even better. And it won't keep your visitors hanging around if they have to hang around too much, they'll go and look at another site. So that is a little trick that you can do is to use software to reduce the size of your web photographs.