As we all know, blogging is great and it can achieve so much. If you’re not a web developer, you’re lucky enough to have so many platforms from which to blog from; wordpress, tumblr, blog.com, blogger, typepad. The list goes on!

Now these are all great, but people often stumble a bit when it comes to the WYSIWYG (What You See Is What You Get) editors. If you’re not used to working with HTML and you need to make some specific alterations you will be stuck. So I figured it might be useful to write a few basic commands that will help solve some of the most common problems bloggers run into.

I’m going to reference the WordPress interface, but you will be able to transfer this to whichever platform you prefer to work on. So this is the basic layout at your disposal with a WYSIWYG editor:

wordpress WYSIWYG editor

Links

Ok so basic functionality is altering text formatting, making it bold, aligning left, indenting etc. But what about adding a link to a specific line of text that takes you to a different website? In most WYSIWYG editors you’ll get a link icon:

WYSIWYG link

SImply highlight the text you want to be the link and click this icon. You’ll need to add the URL of the site you want to link to, as well as tick the “open link in new window” option. If your editor doesn’t have this option you can add a little something directly to the HTML. in wordpress click the HTML tab on the top right of the editor. Search for the text you want to be a link and add some code. For this example the link text is going to be “smashing magazine” and the URL that we want it to point to is http://www.smashingmagazine.com.


<a href="http://www.smashingmagazine.com" target="_blank" title="Smashing Magazine">smashing magazine</a>

So to explain, html tags are elements that build up a website. The tag for links is the <a> tag. Within that you define the href (the actual link), a title (describes the link), and target which we set as _blank to open the link in a new tab.

Images

Another thing a lot of people struggle with is getting images to look good when added to the WYSIWYG editor. If you know the available space on the web page, and you happen to have some shiny software that allows you to create custom images of the correct size from 2 or more images you’ll probably not have much trouble. But if not there are some tricks you can use to help improve the layout of images on your blog.

FIrst, in wordpress when you upload an image you are given alignment options:
Align Image

The “none” option, depending on the theme settings, generally makes the image float to the left, and any following text is placed underneath.

The “left” option, as you might guess, also floats the image to the left. But if there is space to the right of the image, you can place text to the right of it.

The “right” option, again as you might guess, floats to the right, and any following text can be placed to the left of it.

Finally the “center” option floats the images in the center of the available space, and if space is available text can surround it.

This is fine, but what if you want to have two images side by side? Well you simply upload your first image, select “left”. Then in your editor, click to the right of the image so the cursor is to the right of the image and upload your second images and select “right”.

This should work nicely, unless your images are more than half the available space on the web page. Then you will have a broken looking layout with the first image on the left, and the second underneath but floating off to the right. Not idea right?

Lucky there are ways to fix this. My first recommended method is to change the Size option when you first upload the images. That way you can ensure they are not too big:

However if you know both images are more than half the available space, and you want them to both fit in snugly without a gab between there is a little bit of html and inline styling you can use to fix this.

First, upload your images side by side. One floating left and one right. Then click your HTML tab and find the images. You will find them looking like this:


<img title="your image" src="http://www.moosch.co.uk/images/your_image.jpg" alt="your_image link" width="400" height="100" />
<img title="your image" src="http://www.moosch.co.uk/images/your_image.jpg" alt="your_image link" width="400" height="100" />

You will need to remove the width and height values of both images so your code will look like this:


<img title="your image" src="http://www.moosch.co.uk/images/your_image.jpg" alt="your_image link"  />
<img title="your image" src="http://www.moosch.co.uk/images/your_image.jpg" alt="your_image link"  />

Now we need to add the styling that will put the width of both images to 50% of what is available on the web page. So we add this before the closing of the tags ( /> ):


style="width:50%; height: auto;"

I also set height to auto, so the images scale without distorting. Nobody likes that. Once added your image coding will look like this:


<img title="your image" src="http://www.moosch.co.uk/images/your_image.jpg" alt="your_image link" style="width:50%; height: auto;"  />
<img title="your image" src="http://www.moosch.co.uk/images/your_image.jpg" alt="your_image link" style="width:50%; height: auto;"  />

And it’s as simple as that. Your images will sit side by side without a gap in the middle.

User Profile Image

One thing a few fellow bloggers have asked me is how they can have their picture on their wordpress posts. This is a super simple one. The easiest way is to sign up to Gravatar using the email address you use for your wordpress account. Once your account is created, upload and crop your image and hey presto, you will see your image on the posts your user publishes, just like this:
Gravatar Image

There are obviously a lot more things you can do with your WYSIWYG editor, but these are the most common things. If you can think of any more, or you would like me to include anything else that you have struggled with please comment below.

Thanks 🙂