This is the first piece of a Hangout on Air that was done for Wealthy Affiliate Members. The one hour live hangout was divided into three parts to make it easier for people to watch.
In this training we cover how to handle images in WordPress. I covered how to align an image and how to add links, both internal and external links, to an image inside WordPress.
I also talk a bit about how to size images and why you would want to change the size of an image.
I hope this training is helpful to those of you that are struggling with images inside the WordPress Interface.
Feel Free to Follow my YouTube Channel: Online Lab Guy
And our Page at Google +: +Online Lab Guy
Thanks for Watching!
0:00 Image Alignment
2:30 Title Tag and Media file Display
4:00 Image Editor
6:00 Adding Affiliate Link to Image
7:15 New Browser Tab
8:20 Internal Linking
9:20 External Linking
10:45 Image Sizing in WordPress
13:15 Image Size Outside WordPress
The demo site that was used for this training can be found at http://wealthyaffiliatesonline.siterubix.com
this is a demonstration site and has not been optimized for SEO or keywords.
The two pages referenced are http://wealthyaffiliatesonline.siterubix.com/keyword-search-software/
and the internal linked page http://wealthyaffiliatesonline.siterubix.com/jaaxy-keyword-tool/
Referenced in this Training
Wealthy Affiliate – http://wealthyaffiliate.com/
GIMP (Gnu Image Manipulation Program) – http://www.gimp.org/
Pic Monkey – http://www.picmonkey.com/
Canva – https://www.canva.com/
Caesium – http://caesium.sourceforge.net/
So the top questions that we had here were all about images. People want to know how to put an image into their WordPress site, how to align the images, how to link images and links in general were a big question.
There were a lot of questions about image sizing and compression so we will talk about that little bit. Alt tags and title tags what they are, where they go. How you put them in, what they do.
Then there were couple questions about header images, header images are kind of tricky because it depends on what theme you use so we’ll talk about how the header images have to be customized and I’ll give you a couple of tools you can use if you want to create your own images and banners and things like that.
Adjusting the Image Location in WordPress
Alright, so I created this site a while back, I went through the certification courses and did all the tasks and I came up with this site. I have a page that talks about Jaaxy and keywords. On this post, I have a little image of the Jaaxy logo. You see that when I hover over this picture it says “Jaaxy, the world’s best keyword tool”.
If I want to change that image or adjust that image size, I would go into the editor, and I have this image here, which I will click on. When I click on that image, it pulls up brings up a little box. If I want to move it around, with WordPress 4.1, it’s given me a shortcut button. So I can align this to the left or I can center it which puts it above the paragraph or I can align it to the right or I can create no alignment which looks very similar to what the centering does.
Moving an Image in WordPress
For this particular image if I wanted to move it, I could do a couple of things. I could remove it from the page and then put it in a different place. So in that case I would go to where I want my image to show up, on which line, and then I would go to my add media up here in the upper left-hand corner.
I already loaded that image so it’s right here, so I would select that, now the first thing you can do is when you’re inserting the image you can put a new title tag on it. It’s picked up the fact that I have a 125 x 125 Jaaxy name on this particular image, so the title tag would be that if I didn’t change it, but I want to change that. So I change the title tag. Now when I hover over this image inside the post, this title is going to show up. I can, down here at the bottom of this, align right, left, center or none just like I had in the inside the post. So I’m going to align right.
By default it goes to the media file which points to this picture. So let me show you how that shows up. Right now I’ll leave it at media file and I can change the size. In this image the size is 125 x 125, I can’t make it any bigger, but I could make it smaller. I’ll insert that in the post and now you can see that the image has moved from the first paragraph down to the second paragraph.
If I wanted to change the alignment, again I click on the image, and I can center it right there. If you’re putting in banners, and you use the image and then put in an affiliate link, this is usually a one of the best ways to do it. So, I’m going to move that over to the right. There it is.
The Image Editor in WordPress
Inside the editor, there’s also this pencil, if I open the pencil it opens a whole box, I can add a caption to it. I add the caption, update it, now you see the caption shows up below the image. I’m going to go back in there, and I’m going to change the title attribute, I’m going to make the same thing as we have with the alternative text here.
Now, when I hover over this item, it pops up that little pop-up window that says “Jaaxy, the world’s best keyword tool”. That’s the title attribute. This is the description, and the alt text won’t show up on your page, but it will show up for the search engines, so it’s very important that you put that in there. It’s put right here in the alternative text.
What that does is it tells a page reader, and also tells the search engines, what the title and what the keyword is, for your image. So this is a good place to put in whatever keyword you’re targeting.
Location of an Image in WordPress
In addition to that you could also move the alignment around, so if I wanted to make that centered again, and updated. There it is, that basically does the same thing as this. Now I move it over to the right with that image, you’ll see that inside, it’s aligned to the right, right is highlighted now.
I wanted to put in an affiliate link to Jaaxy. I would go down here to the media file or the link-to line. It is currently linked to the media file, so right now if I go into my page and review my page, let me update it real quick. So now I’m going to view what I created. Now if I click on this it’s going to open up the image in its own window and take it to the media location of that image.
Linking Images in WordPress
I want that image to link someplace else and I’m going to do that by changing this box with the drop-down and I’m going to put in a custom URL and you can see that this box highlights. Right here, I would paste in my Jaaxy affiliate ID. I can go grab that real quick I think, and paste in my affiliate ID and update. So now, after I’ve updated the page viewed it when I click on this Jaaxy button here, this now becomes a button instead of an image and takes me over to Jaaxy.
Opening in a New Tab
The one thing that it didn’t do was open a new tab on my browser. Typically when you have something that leaves the page or that leaves your website, like an affiliate link, you want to give people a way to get back, by opening a new tab in your browser. Inside here you want to open a new tab.
Usually, the advanced options is closed. If you open the advanced options will see a little “open link in new tab box” there, and now if I click on it, you can see that my original page is still open, as well as the Jaaxy box or the Jaaxy page. If I close the Jaaxy page I’m back on my website which is the way you pretty much want things that leave your site. If you’re linking from page to page, and here you don’t want to leave your site, you just want to leave that turned off.
While I’m at links, I can show you another. This is called internal linking. I have another page that I’ve talked about keyword tools on this page. I’m going to grab the link for that page and on the original page that I was on; I’m going to find reference to Jaaxy somewhere. So here, “keyword search software”, so I’ve highlighted those words, those are going to be my linking text then I’m going to go up here in the header and I’m going to insert a link. I already saved off the other page that I want to link to so I’m just going to paste that in there.
I can open a window, a new window if I want, but since I’m staying on my site I don’t want to do that, I can leave that one unchecked. You can see that it’s gone from regular text to highlighted and underlined text and if I click on that from this page that will take me over to the other page. You would do something similar if you want to put in an affiliate link, you would find some text ( I doesn’t look like I have Jaaxy in here anywhere).
If I wanted to link to the post inside Wealthy Affiliate that talks about longtail keywords or the one that links to the alphabet soup technique, I would highlight that. I would go out to Wealthy Affiliate grab the affiliate link from alphabet soup page, which I just grabbed, so now I have this highlighted. I go up here to my link. I insert the WA link and in this case I’m leaving the site so I want to open a new window, and add the link. So there, I have “longtail keywords” actually leaves the site and goes to Wealthy Affiliate. If I do that I can show that to you.
So now “longtail keyword” here will jump out to the alphabet soup page inside Wealthy Affiliate, you’ll notice that it opened a new tab, up here in the top. This is my original page. This is the page that opened and jumped to Wealthy Affiliate. If I was not logged in to Wealthy Affiliate after roughly 5 seconds it would pop up a sign up page and that would be attached to my link, my affiliate link inside WA.
Sizing Images for your Website
I have another site. It has some interesting images in it. This particular image is a pair of roller-skates. Right now in order to view this page, I have clicked on my media file right here in the side menu, the media library. This image, if I look at it, you’ll see that the dimensions here are 640 x 400. I can edit that image if I want to by clicking below the image, in which case I can crop this image and in order to do that I would just highlight a box and I can crop it. So now I’ve changed the size of that. If I want to save the new size (the cropped image) I could do that it would still be 640 x 400.
If I wanted to change the actual dimensions of the item, click on edit image, and now I can scale this image up or down. I can’t scale it up unless it was originally larger than 640 x 400 but as I change these numbers, notice that the 600 changed from 640 to 600, the 400 changed to 375. So what it does is it shrinks the image but it doesn’t change the width versus height ratio (the aspect ratio) and then if I wanted to restore it back up to the original size, I could do that, and save that when I’m done. Usually when you’re done moving, changing image size or something like that you want to hit update.
The interesting thing is though that inside your WordPress website that does not change the amount of space that this image will take up, so if you’re trying to do this to speed up the load time of your site, this is not the way to do it. What you would want to do would be to put in a smaller image.
Resolution and a Free Image Source
Inside my files, I pull down some images. This right here, some of you might remember this from one of the posts I did recently, has got these lovely pink toes. If you look down at the bottom of this image, it says that it’s 5472 x 3648, that’s a monstrous image. I took it out and I put it through filter. I changed the size of it and I have the same image, but it’s 1024x768.
If you start with a large image and you shrink the size of the image, the higher resolution you start with the better image will look at the end. Just keep that in mind. I did the same thing up here for these Cow Feet in roller-skates so if you look at the original image you see that it was 5472 x 3648. I’m looking down at the bottom, that’s the size of these that come from this particular vendor.
This particular vendor happens to be called Gratisography, you can see that right here. Gratisography has free images for you. You don’t have to provide attribution. You can use them anywhere you like. Some of you might want to write down Gratisography, it’s a nice little site.
Okay, so you can see that in some cases I’ve had large images and I reduced them that way. If I were to use software some kind that would resize images for me, I suspect that I would probably use GIMP. GIMP is a free image editor. It has almost all the power that Photoshop has. But it’s free. It does have a serious learning curve with it but I like resizing images inside GIMP.
If you want to use one that’s a little easier to use, Pic-monkey is a wonderful free tool. That you can pull your image into, you can resize it, and you can move it around you can crop it. pic-monkey P I C M O N K E Y. Another one that’s fairly new, but is a great little image editor, is called CANVA. Those are ways that you can actually change the image and resize your image so that it takes up less space inside the website and will allow your website to load much more quickly. Smaller images will always load faster.
If you actually want to get into an image and shrink the physical size from a file format size, Caesium is probably the right one to use its C A E S I UM and its available from source force, it so its caesium.sourceforge.net. Any time you download from places like that, make sure you check and make sure that the automatic download features that they’re going to add are unchecked so you don’t download anything extra that you don’t want.