A STUDENT’S GUIDE TO ADDING IMAGES TO NEW OR EXISTING BLOG POSTS

Adding Images to Your Blog Post

Presented byMichelle Krummel

Editing your post

First, log in to your account using your username and password.

Log In

Editing your post

First, log in to your account using your username and password.

Then go to your dashboard.

Control Panel will take you

to your dashboard

Editing your post

First, log in to your account using your username and password.

Then go to your dashboard.

Click on Posts.

Click on Posts

Editing your post

First, log in to your account using your username and password.

Then go to your dashboard.

Click on Posts.

Then click Edit. Note that you are only able to edit posts that you have authored. These will appear in blue.

Click on Edit

Adding an image

Insert your cursor to where you want to place the image. Insert cursor

where you want image

Adding an image

Insert your cursor to where you want to place the image.

Click the Add an Image icon.

Add an Image

Adding an image

You can add an image from one of three sources:

•From your computer

•From URL

•From Media Library

Image source

From your computer

Add an image from your computer if you have a copy of the image saved on your computer or on a removable storage device.

Click Browse and locate the file on your computer. Then click Upload.

From Computer

From URL

Add an image from a URL if you want to link directly to the image from an Internet site, without having to upload a copy of the image to the server.

Paste the URL into the box labeled Image URL. The other fields may be left blank.

Click Insert into Post.

From URL

From URL

Find the image you wish to link. Right-click on the image and select Copy Image Location. This will paste the image URL onto your clipboard.

Copy Image Location

From URL

Paste the URL into the box labeled Image URL.

Then click Insert into Post.

Paste URL

Insert into Post

From Media Library

Add an image from the Media Library if you have previously uploaded an image to the blog’s Media Library.

Click Show to select the image.

From Media Library

Show

From Media Library

Add an image from the Media Library if you have previously uploaded an image to the blog’s Media Library.

Click Show to select the image.

Then Insert into Post.

Insert into Post

Adding an image

If the edit box is too small, you can resize it by dragging the lower right-hand corner down.

Drag corner here to resize edit box

Adding an image

If the edit box is too small, you can resize it by dragging the lower right-hand corner down.

Drag corner here to resize edit box

Adding an image

Or click the Fullscreen Mode icon to view your workspace in full view.

Full screen editor

Adding an image

Click the Fullscreen Mode icon to return to exit full screen mode.

Full screen editor

Resizing an image

Click on the image and drag any of the handles to resize the image.

Drag handles to resize image

Resizing an image

Click on the image and drag any of the handles to resize the image.

Drag handles to resize image

Resizing an image

Or left-click the image and then click the Edit Image icon that appears in the upper left-hand corner.

Click image, then click Edit Image icon

Editing an image

You can rescale the image and edit the title, caption, and link URL for the image.

Or choose Advanced Settings for more options.

Editing an image

Under Advanced Settings you can enter the desired image size and add a border to the image.

Editing an image

You can also enter the HTML editor and adjust the image properties directly in the HTML code.

HTML Editor

Crediting your image source

Always remember to credit the source of any image that is copyright protected.

Add photo credit

Crediting your image source

Always remember to credit the source of any image that is copyright protected.

If you’re using a Flickr! image, scroll down to view the copyright information under Additional Information. Follow the link to read the copyright information.

Copyright Info

Crediting your image source

Hover your mouse in the Attribution section and a box with HTML code will appear.

Copy the code. We will paste this into the blog post to credit the author.

Photo credit code

Crediting your image source

Do not paste the code here (in the Visual Editor). If you do, your readers will see the code, not the link.

You must use the HTML editor to insert HTML code.

Visual/HTML Editors

Crediting your image source

Paste the code here (in the HTML Editor). Then return to the Visual Editor to see how it will appear to your readers.

Paste code here

Visual/HTML Editors

Crediting your image source

It would look better to have the link on the same line as the words, “Photo credit.”

It would also look better to reduce the size of the text, to set it apart from the rest of the text in the article.

Crediting your image source

It would look better to have the link on the same line as the words, “Photo credit.”

Use the backspace key to delete the line break.

Crediting your image source

It would also look better to reduce the size of the text, to set it apart from the rest of the text in the article.

Highlight the line of text you want to resize.

Crediting your image source

It would also look better to reduce the size of the text, to set it apart from the rest of the text in the article.

Highlight the line of text you want to resize.

Click the icon Show/Hide the Kitchen Sink to have access to more editing options.

Click icon for more options

Crediting your image source

Use the pull down menu to format the text.

Choose Heading 6 for the photo credit.

Format Text

Crediting your image source

Now the text is set apart from the rest of the article.

Previewing your changes

We are ready to Preview Changes.

Preview Changes

Previewing your changes

We are ready to Preview Changes.

Then return to the Edit Post page to save your changes.

Return to Edit Post

Publishing your changes

Update Post to publish your changes to the Blog and make them visible to your reader.

Update Post

Publishing your changes

All done!

CREDITS:

Presentation created by Michelle Krummelhttp://mrskrummel.commichellekrummel@gmail.com