5. Images and links

Meg’s PressGO! objectives

1. To add and hyperlinks to your posts using the visual editor.
2. To access advanced visual editor options.

Your PressGO! objectives

What are you hoping to learn from this module? Your objectives can be the same as mine, but is there anything else you are expecting to learn? Write down your thoughts, discuss with a partner or small group in the class, or blog it!

Blog it here.

Introduction

When you write a post or a page, you can do it in either the ‘visual editor‘ or the ‘code editor‘. If you don’t know anything about writing html code, then stick to writing your posts and pages in the visual editor. The visual editor gives you many options such as adding bold or italics, bullets or images or hyperlinks, as well as more advanced options. In this module you will learn:

• How to add a hyperlink.
• How to add an image.
• How to access the advanced options in the visual editor.

Focus questions: Using a visual editor

Have you used a ‘visual editor’ on the web before? Maybe the ‘learning management system’ you use at school (such as MyClasses) or uni (such as BlackBoard or WebCT) has a visual editor embedded in it somewhere? Write down your experiences, discuss with a partner or small group in the class, or blog what you know.

Blog it here.

Adding hyperlinks

You will want to add hyperlinks to your blog when you want to share things you’ve found on the Web. This is easily done by copying the URL (or Web address) of the site you want to link to and then pasting it into your blog using the hyperlink creator.

Exercise: Direct link to another website

1. Start up a new post or page or open up an existing one.
2. In the visual editor, highlight the text you want to link through.
3. Go to the toolbar at the top of the visual editor and click on the ‘Insert/edit link’ button (the little one that looks like a chain link).
4. The ‘Insert/edit link’ box will appear.
5. Paste in the link URL from the site you want to link to.
6. Click ‘Insert’.

Adding images

There are two ways to add images in WordPress. The first is to create a hyperlink to the image wherever you found it on the Web. This is easiest and saves you space because the image is hosted elsewhere. But it does mean that if the image is ever taken down or deleted, you will lose the image, too. The second means manually uploading a picture (or other media) file to your WordPress uploads area and means that you will be hosting the image on your WordPress site, thus using up some of your free space.

Exercise: Direct link to an image

Add an image to your post by linking directly to it.

1. Find a picture on the Web that you like the look of (preferably something fairly small, and definitely something that isn’t protected by copyright).
2. Get the URL for the picture by either a) right-clicking on image and then clicking ‘Copy image location’, or b) right-clicking on image, then clicking ‘View Image’, and then saving the URL for the image.
3. Next, find a saved, draft post (Manage > Posts) or create a new one (Write > Write Post) and open it up.
4. In the visual editor, click on the ‘Insert/edit image’ button (the one with the tree on it in the toolbar).
5. Paste in the URL of the image, and fill out the rest of the fields as you wish.
6. Click ‘Insert’.

Exercise: Upload an image to the visual editor

Add an image to your post by uploading it to your blog and then inserting it.

1. Click on ‘Add media > Add an image’ in the area directly above the visual editor.
2. Click the ‘Browse’ button under the heading ‘From computer’. A box comes up showing what’s on your computer.
3. Find a picture (not too big!) from your computer and click ‘Open’.
4. Click ‘Upload’.
5. Give the picture a title, caption and description.
6. Choose the alignment of the image.
7. Choose how you want the image to be displayed, i.e., as a thumbnail size, full size or as a title.
8. Click ‘Insert into post’. Your picture will now appear in your post.

More visual editor options

In the visual editor, you can see various options including those for bolding and indenting text, creating lists, inserting images and running a spell check. However, if you click on the button, you will see more options, such as options for changing the heading level or colour of text, as well as pating and formatting option.

Reflection

Write down your thoughts, discuss with a partner or small group in the class, or blog it!

• What have I learnt?
• What is still unclear?
• What do I need to follow up on?
• Where to from here?
• What other stuff I have read or accessed to help me make sense of it all?

Blog it here.

Links and resources