A STUDENT’S GUIDE TO ADDING IMAGES TO NEW OR EXISTING BLOG POSTS Adding Images to Your Blog Post Presented by Michelle 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

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 Krummel