Everything YOU should know about enhancing posts with images

Instead of ‘Where’s Wally’ we’ve had a case of ‘Where’s Sue?’

Sorry but I’ve been really busy writing bi-weekly posts on our Teacher Challenge blog.

So I’ve decided that you’d might like to see that types of posts and activities we’ve been doing on Teacher Challenge blog by cross-posting our post on Enhancing posts with images here.

I’ve kept the post as is so you can see exactly how participants are stepped through tasks.

But first I’ll tell you a bit more about the Teacher Challenge!

About the Teacher Challenge

Teacher Challenge blog is where we do free 30 day professional development challenges that step participants through weekly tasks that increase their skills while working together as part of a global community.

The Challenge is open to anyone who wants to increase their skills – blogs are used for reflecting your progress while learning and connecting with each other.

However blogs don’t need to be hosted by Edublogs to participate!*

Participants can complete as many of the tasks as they like and in any order.  And if you missed out, it is never too late to work through the challenges at your own pace!

Our first Challenge was 30 Days to Kick Start Your Blogging and here’s where you’ll find the Beginners posts:

  1. Kick Start Activity 1 – Beginner – Setting Up Your Blog
  2. Kick Start Activity 2 – Beginner – Effective and engaging blog posts
  3. Kick Start Activity 3 – Beginner – Introduction to working with pages
  4. Kick Start Activity 4 – Beginner – Connecting with others
  5. Kick Start Activity 5 – Beginner – Enhancing posts with images
  6. Kick Start Activity 6 – Beginner – Enhancing posts by embedding media
  7. Kick Start Activity 7 – Beginner – Getting more out of widgets
  8. Kick Start Activity 8 – Beginner – Building readership and blogrolls

Our current Teacher Challenge is 30 days to get your students blogging

Kick Start Activity 5 – Beginner – Enhancing posts with images

A picture tells a thousand words.

Effective use of images grab your readers attention and encourage them to read your posts.

While a copyrighted image can grab the attention of the person whose copyright you’ve broken — and cause you considerable pain :(

In this fifth activity you will:

  1. Be introduced to copyright
  2. Learn about using Creative Commons images in posts
  3. Find Creative commons images and add them to a blog post
  4. Learn about uploading photos from digital cameras
  5. Learn about other way of creating your own images
  6. Write a blog post that includes images
  7. Visit the Discussion question for activity five
  8. Complete the extension activity (if you have time).

Step 1: Introduction to Copyright and using Images in posts

You can’t just use any image you like in a blog post.

Why?  Because unless stated otherwise the law automatically grants full “copyright” over any creative work a person makes.

And if you’re thinking Fair Use Laws.  Forget it!

It’s only really applicable in USA and won’t protect you from the rage that can be unleashed by someone whose copyright has been broken.

So what’s the solution?

  1. Use Creative Commons images
  2. Use your own photos
  3. Create your own images using a range of different tools

Step 2:  Using Creative Commons Images in posts

Creative Commons images are the safest way to source images online for blog posts.

Introduction to Creative Commons

Creative Commons, founded in 2001, is an organization which provides free content license known as a creative commons license that people can apply to their work.

When you license your work with creative commons, you are giving people the permission to use it without having to ask permission, provided they use it in the manner stated in your creative commons license.

The reason people use creative commons licenses is to make it easier for everyone to share and adapt creative work without the concern of copyright infringement.

Creative commons licenses are used for books, websites, blogs, photographs, films, videos, songs and other audio & visual recordings.

And for those that are wondering, unless a blogger includes a Creative Commons license, all content on that blog is automatically the copyright of the blogger.

Creative Commons images and Flickr

One of the most common sources of Creative Commons images used by bloggers is Flickr (an online photo sharing website).

Unfortunately many assume Flickr images are licensed under creative commons and allowed to be used.

This isn’t the case; images marked as “All Rights Reserved” are copyrighted and require permission from their creator.

Images marked as “Some Rights Reserved” means a creative commons license applies.

If you look at images directly on Flickr always check to see which license applies to ensure you only use the image in the manner specified by the license.

Checking the license on Flickr

Here’s a summary of what the Creative Commons license’s mean on Flickr:

Summary of Creative Commons licenses

Creative Commons and Image attribution

It’s a requirement of all Creative Commons Licenses that you attribute the original author.  This means you can’t just use a creative commons image without acknowledging the person who originally created it.

Within or at the end your blog post you must attribute the image and you must link the photo back to it’s original photo page.  We’ll show you how to do this soon!

Step 3: Finding Creative commons images and adding them to a blog post

There are several online tools that make searching Creative Commons Flickr photos less time consuming.

Here’s a couple of quick options:

  1. Compfight
  2. FlickrCC
  3. Wylio.com

Other sources of Creative Commons images include:

  1. Wikimedia Commons
  2. Search by Creative Commons

Here’s how to search and add images to posts using Compfight

1.  Go to Compfight

2.  Change to Creative Commons only, choose whether to search tags or text, add your search term and click Search.

Change your Compfight settings

3.  Scan through the search results and click on the Photo you like so that you can view it on its photo page on Flickr.

Flickr photo page

4.  Scroll down right hand side of photo page to view License.

5.  Hold your Ctrl key and left mouse click on “Some Rights Reserved” to open up the license on a new browser tab to read terms of its license on Creative Commons.

  • Only use if license is applicable for your situation.

Checking the license

6.  Now select View All Sizes from the drop down Action list and select the size of the photo you want to use.

View all Flickr Photo sizes

7.  Right click on Image and select Copy Image Location or Copy Image URL (depends on what web browser you are using).

Copy Image URL

8.  Now go to the post you are writing inside your dashboard and click on Add an Image icon

9   In the Add an Image window click on the From URL tab
10.  Add the image URL, image title, select the image alignment, add the URL of its Flickr photo page to the Link Image URL field and then click Insert Into Post

  • In this example the URL of its Flickr photo page is http://www.flickr.com/photos/53611153@N00/309709280/
  • You link to its Flickr photo page as it is a requirement of Flickr’s conditions of use and so that if any one clicks on the photo they can view the original source of the image.

Adding an image from Flickr to a post

11.  Add the photo attribution either below the photo or at the end of your blog post.

  • It’s a requirement of all Creative Commons Licenses that you attribute the original author.
  • This means you can’t just use a creative commons image without acknowledging the person who originally created it.
  • The text below this photo is are examples of how you can attribute an image — look closely at what websites the attributions links to!

Example 1:

Photo by Darwin Bell licensed under Creative Commons Attribution 2.0 Generic.

Example 2:

Original image: ‘swinger_girl_01b‘
http://www.flickr.com/photos/82546262@N00/205492421
Released under an Attribution-NonCommercial-ShareAlike License

Original image: ‘a piggy in the middle

http://www.flickr.com/photos/53611153@N00/309709280/

Released under a Creative Commons Attribution 2.0 Generic License

Please note:

  • Some School Districts block Flickr
  • In these types of  situations you’ll need to download the photo onto your computer and then upload it to your blog post.

Step 4: Uploading photos from digital cameras

Our digital cameras are designed for printing good quality photos and not for uploading directly into blog posts.

A photo from a digital camera can be as large as 2.4 MB, it’ll unnecessarily use up your blog storage space and take longer to load your image compared to an image that is resized before uploading.

It’s really important to resize them before uploading to your blog post.

The best option is to resize the photo to:

  1. 450 pixels wide – if you want it to take up the full width of your post area
  2. 150-200 pixels – to left or right align the image with wrapped text

Here’s some tools you can use to resize your photos:

  1. InfraView – here’s how you do basic image editing using irfanView
  2. Picasa – here’s instructions on resizing your photos using Picasa
  3. Picture Manager – here’s detailed instructions on how to use Picture Manager
  4. PIXresizer – Here’s instructions for resizing images using PIXresizer.
  5. iPhoto

Now your photo is resized uploading into your blog post is as simple as:

1.  Click on Add an Image icon

2.  In the Add an Image window click on the Select Files button

3.  Locate the images on your hard drive (use your Shift or Crtl key to select more than one image).

4.  Click Open to start uploading the images.


5. While your images are uploading you will see a progress bar.

  • If you upload more than one image you will need to click on the Show link to edit the image details and insert an image into a post (see below for instructions for inserting a photo gallery).

6.  In the image option screen you need to (see below for more details on each of these option):

  • type a title for the image
  • choose how you want the image align (None, Left, Center or Right)
  • select size of image you want to insert (Thumbnail, Medium, Large or Full Size)
  • and then click Insert into Post

7.  Your Add an Image window should be closed and your image should now be inserted in your post.

Step 5:  Other ways of creating your own images

Other options for creating your own images include:

  1. Image Generators such as ImageGenerator.org
  2. Comic Generators like MakeBeliefsComix.com,  kerpoof, ToonDoo
  3. Photo Editors like Befunky, fd’s Flickr Tools
  4. Tag Cloud Creators such as Wordle
  5. Graph Creators including GraphJam and Crappy Graphs

Mixing up your images using these types of tools can really spice up your posts!

We hope you have fun trying some of them out!

Step 6:  Write a blog post that includes images

Now we’ve talked about images it’s time for you to show us your skills by writing a blog post that includes images.

Here’s some ideas of what you might like to write about:

  1. Share what you have learnt about Creative Commons and finding Creative Commons images.  Tell us about your favorite sources of Creative Commons images.
  2. Share your tips of creating your own images.
  3. Write a review on ways of creating your own images using a range of different types of tools.
  4. What you’ve learnt from watching how other bloggers use images in their blog posts.

Don’t forget to include images in your blog post!

And remember to leave a comment with a link to your post so we can drop past to check it out!  We like to include these links to your posts in our weekly reviews!

Step 7:  Visit the Discussion question for activity five

Step 8: Extension Activity  – the WOW! factor

Add a photo of your own to befunky or irfanview, use as many of their editing features as possible to change the look of your image completely and give it the ‘Wow’ factor ie the audience who looks at this image would just say ‘”Wow’! How did you do that?”.

Add it to your post and explain what software and features were used.

Final Thoughts

Some readers have commented that blogging in another location is making it harder for them to find my posts.   Would love to hear your thoughts?

Would you like us to be cross-posting the posts from the Teacher Challenge blog onto The Edublogger?  Would that make it easier?

If you are enjoying reading this blog, please consider feed-icon32x32 Finding and Adding Creative Commons Images To Your  Blog PostsSubscribing For Free!

Teaching students about Creative Commons and appropriate use of images

Kathleen McGeady has shared some great advice on teaching students about on appopriate use of images and has given me permission to cross post it here.

What inspires me about her post is her attitude that there are important skills everyone needs to learn and you’re never too young to learn them.

Please note:

The background

2M class blogA few weeks ago I set up blogs for two of my most enthusiastic student bloggers, Rhiannon and Bianca.

I chose these students as they regularly left comments on our 2KM class blog and were committed to learning as much as they can about blogging.

After gaining their parents’ permission, I set their blogs up, adding myself as an administrator.

I had a discussion with Rhiannon and Bianca about what they’re going to blog about and how often they’ll post.

We then revised the features of quality posts as well as revising the cyber safety and netiquette guidelines they were already familiar with.

After some initial familiarisation sessions my students were off and it didn’t take them long to learn the basics of blogging.

Check out:

  1. Rhiannon’s blog
  2. Bianca’s blog

Before long, my students were keen to use images off the internet to enhance their posts.

Example of post with imageThis was a dilemma for me.

While my students are only in Grade Two and I don’t want to make blogging too complex for them, I knew that I would have to delve into the topic of copyright and Creative Commons to help my students develop good blogging habits.

Little do many people know, you can’t just use any images off the internet in your blog posts. Not only is this ethically incorrect but you could leave yourself open to copyright infringement.

Explaining Creative Commons and using images in blog posts

Wanting to make this process clear to my students, I typed up a document explaining copyright, copyright infringement and Creative Commons while also offering step-by-step instructions on how to use FlickrCC to upload and attribute images in blog posts.

Obviously, there is more than one way to do this but given the age of my students, I wanted to keep things as straightforward as posssible.

I’ve embedded this document below:

Feel free to use it with your students to teach them about these important blogging habits. (Please Note:  the instructions for uploading the image to a blog post apply to Edublogs blogs)

My approach to Student blogging

One of the things I love about teaching seven and eight year olds is that I can teach them about issues such as copyright, cyber safety, netiquette, social networking etc just before they reach the age where they would dive into these areas, prepared or not.

I feel like I can make an impact in setting my students on the right path for their futures.

I am constantly amazed at how my students respond when I challenge them and engage them with ICT and their results across the board never fail to impress me.

Set your standards high, provide the structure and the support that your students need to scaffold their learning and reap the rewards!

Final Thoughts

Thanks Kathleen for letting me share your post here.

Pleae make sure you drop past Kathleen’s post and share your thoughts on:

  1. Will the how-to document be useful for you and your students?
  2. Do you have any questions about blogging or using internet images?
  3. What results have you seen from using ICT and setting high standards for your students?

If you are enjoying reading this blog, please consider feed-icon32x32 Finding and Adding Creative Commons Images To Your   Blog PostsSubscribing For Free!

How To NOT Have Problems Uploading Photos And Using Up Storage Space

Digital CameraPhotos from digital cameras should always be resized to optimize their file size before uploading them to your blog.

Why?  Our digital cameras are designed to produce good quality photos for printing but aren’t optimal size for the web.

Reasons To Optimize Photo Size

Optimizing the file size of your photos before uploading to a post does three things:

  1. It means your photos upload quicker (and easier).
  2. Your pages load faster for visitors to your blog.
  3. You can upload more photo — lots of photo uploaded without resizing can quickly use up storage space before you know it!

Making an image smaller once you’ve uploaded it to a post doesn’t make the file size smaller.

If you don’t believe me — right click on both of the photos below and select Properties (for Internet Explorer) or View Image Info (for FireFox) to check their image size.

Here’s the original photo

Around 2.6 MB in size!

Original photo without resizing it

Below is the same photo resized to 450 pixels wide

Now 162 KB!

Photo of crocodile resized to 450 pixels before uploading

There’s no real difference!

But the bottom photo still looks good online and is 16% of the original size.

How To Optimize Image Size

The simplest option is to resize your photo to a width that works well with your theme using either:

1.  On A Mac use Preview and save as a JPEG with quality at or below middle (tip courtesy of Alan Levine).

2.  Picture Manager (PC) – Microsoft Office > Microsoft Office Tools

Ideal image size for common themes is 450 pixels wide.

If you are enjoying reading this blog, please consider feed-icon32x32 Finding and Adding Creative Commons Images To Your    Blog PostsSubscribing For Free!

Here’s My CHEATS Method For Adding Images to Blog Sidebars

I’m frequently asked how to add images to blog sidebars — so I thought it would help to share my quick and easy cheats method.

So what do you need to know to do this?

To start with you need to understand that you need to:

  1. Write HTML code which links to the location of your image
  2. Add your HTML code to a text widget in your sidebar

Now that I’ve said blah blah HTML code twice…you’re probably thinking that I’ve made it too hard already.

It’s not but I first need to explain what is HTML code and then show you it’s really easy when you know my trick 8-)

What is HTML?

HTML is short for “Hyper Text Markup Language” which is a language used to tell a browser how to organise the layout of a web page it has downloaded from the Internet.  It influences if text is bold, italics, a heading, bullet points.

When you write a post or page inside your blog dashboard you don’t worry about how to write HTML because the Visual Editor does it for you. If you click on the HTML tab it shows the HTML code in your text.

Here’s the Trick!

As I said you need to use HTML but that doesn’t mean you can’t cheat with writing the HTML code.

Instead use your Visual Editor to do the work for you!

Cheating is as simple as:

1.  Open up a draft post in your blog dashboard
2.  Click on Add an Image to upload your image to the post

  • Ideally resize your image before uploading to 170 pixels wide because this generally the best width for most blog sidebars

Add an image icon

3.  Insert the title for your image (this displays when a reader hovers their mouse over the image)

4.  Change the link URL — if you want to link your image to a website

Uploading the image and adding the required info

5.  Click on Insert into Post

6.  If you want to add any text below your image — just write it!

Adding text below your image

7.  Now click on the HTML tab and copy all the HTML code.

Code the HTML code from the HTML tab

8.  Go to Appearance > Widgets in your blog dashboard

9.  Click on the desired Sidebar to expand (so you can add the widgets)

Please note: In new blogs sidebars in your dashboard are empty and adding widgets automatically removes the default Edublogs widgets

Expand your sidebar area

10.  Add a text widget to the desired sidebar by dragging it from the Available Widgets on the left into the Sidebar area on the right.

Adding a text widget to your sidebar

11.  The widget will automatically open — add a title to your widget, paste the HTML code and click Save

  • If you want to insert lines for better text spacing you need to add the HTML code <br/ > (means insert line break)

12.  When you check your blog you should now see it nicely displayed in your sidebar!

Image in blog sidebar

Enjoy!

P.S. Don’t share this tip with Larry Ferlazzo as he pays me in chocolate for each image I add to his blog sidebar 8-)

If you are enjoying reading this blog, please consider feed-icon32x32 Finding and Adding Creative Commons Images To Your   Blog PostsSubscribing For Free!

Want A Comment Avatar That’s Globally Recognised By Most Blog Platforms? Here’s How!

Default comment avatarI confess!  I hate default avatars next to my comments on other bloggers posts.

It makes me feel both naked and like a newblie :(

I’m know I’m not the only one.  The solution is simple — set up a Gravatar account!

About Gravatar

Gravatar is a service that provides globally unique avatars.

Most standard blogging platforms support Gravatar.  So when you go from site to site leaving comments your gravatar image automatically displays –provided the email address associated with your Gravatar’s account is used.

Here’s how simple it is:

  1. Go to Gravatar and click on Get your Gravatar today!
  2. Enter your email address and click Signup  Signing up for a Gravatar
  3. Go to your email account and click on the link in your gravatar confirmation email to activate your account. Email sent from gravatar
  4. Now follow the instructions to set your username and password. Setting up your gravatar username and password
  5. Next upload your image by clicking on Add one by clicking here! Uploading an image to Gravatar
  6. Choose where you’d like to get the image from – for best results ideal image size for upload is 80 x 80 pixels
  7. Once uploaded click on Crop and Finish Cropping avatar image
  8. Click on G Rated as many sites only support displaying avatars with a rating of G. gravatar4

Presto!

Now whenever you leave a comment on a blog that supports gravatar (such as Edublogs.org, any Edublogs Campus site, WordPress.com, WordPress.org) your avatar image will automatically display next to your comment!

FINAL THOUGHTS

  • If you are changing your avatar, it can take a few hours for caches to clear. Try clearing your browser’s cache by holding the Ctrl key and pressing F5, which will help.
  • Check out Creating And Uploading Your Comment Avatar – for online tools you can use for creating your avatar image

If you are enjoying reading this blog, please consider Subscribing For Free!

Spam prevention powered by Akismet