How to … crop and resize

When you buy a new camera, the size setting is generally large. This means you can take a photo using 1000’s of pixels and the image could print out well as a large poster to put on your bedroom wall.

Do you need images this large for your blog?

No, you only need images no bigger than a postcard size.  If you own a camera, then change the size to standard or small.

Let’s now practice cropping and resizing your image.

Step 1. Go to start button, open computer then pictures under libraries and finally the sample folder. Should be a big picture of a mountain in the desert in USA somewhere.

Step 2. Hover  over the image and ask these questions from a previous post

  • type – JPEG?
  • dimensions – under 500×500?
  • size – in KBs?

If the answer is no to dimensions or size then we need to crop and/or resize.


Step 1. Right click on image and open with Microsoft Image Picture Manager.

Step 2. Top left> picture> crop

Step 3. Now you see the dark black handles allowing you to drag your picture in to where you want it cropped.

Step 4. Now to resize the image if needed. Over on the right hand side you can see original size and new size. Is the new size less than 500×500?

  • Yes, then file>save as> give it a new name and check it is still JPEG.
  • No, click OK and now follow resizing steps below.


Step 1.  Top left> picture> resize

Step 2. Change to predefined web small then click OK. File >Save as> give it a name

Step 3. Now it is time to write your post then jump to step 4 with these instructions.


How to … add photos from the internet

Smiles are overrated.Sometimes you will need to use an image from the internet to make your post stand out.

Can you use any image on the internet?

No you can’t.

You can use images that are creative commons where the owner has given you permission to use the image as long as you include attribution. Here is a chart about the different licenses for images. There are many websites and search tools on the web for finding images that are creative commons. Some of these give you the attribution in an easy format as well. The one I have found easiest to use is compfight.

Back in activity 4, we activated the compfight plugin. To check whether you have done this correctly, check the icons above your post icons. If you see this, then you can use compfight.

To add a creative commons image to your blog post is now only one click away. You also have attribution  included.

How to add the image and attribution.

  • 1. Write your complete post and save as a draft.
  • 2. At the end of your post on a new line, click on the compfight icon.
  • 3. Put in your search term and find a small image that you want to use.
  • 4. Click on the S under the image.
  • 5. Now the image you chose and the attribution is at the bottom of your post.

Moving and aligning your image

You will notice most images I use are in the top right corner of my post with writing to the left of that image. How do I do that?

  • 1. While in your post dashboard, click and drag the image so the cursor (a little black line behind the image) is at the beginning of the first line on your post.
  • 2. Click on the image and click on the first icon you see. This will take you to an area where you can align the image to the right.
  • 3. Click on the advanced settings tab of this page and put 10 in both the vertical and horizontal boxes. This will now give you a space around the image so your writing doesn’t run right into the image.
  • 4. Now update.

Now that you have added two images to your blog – one that you took and one somebody else took – what were some of the things you found easy or difficult when adding images?

Creative Commons License Photo Credit: Sean Molin via Compfight

How to … add a photo you took

These instructions are for adding a photo you have taken yourself (or your teacher or parents have taken) and is saved on your computer. You need parental permission if the photo actually includes you or some of your family members.

Step 1. Write  your post completely – check spelling and punctuation especially the word I which should always be a capital letter.

Step 2. Add your categories and tags then save the draft of your post.

Now let’s check out the image you want to use – you need to make sure the image is not too large, otherwise it will take up too much memory on your post.

  • Is the image a JPEG image?
  • Are the dimensions smaller than 500x 500?
  • Is the size in kB rather than MB?

Would I be able to use this image? Tell me in a comment and explain why.

Step 3. Hover over your image – is it the right type, dimension and size? If yes, go on to step 4. If no, you will need to resize the image.

Adding image to your post

Step 4. Go to your post and click at the beginning of the line where you want your image to be placed.

Step 5. Click on the Add Media icon above your post icons.

Step 6. A new window opens and you can either drag and drop your image into the area or find and select your image on the computer then click open.

Step 7. A progress bar shows you how far your photo has loaded.

Step 8. Now all you need to do is:

  • Add a title for the image – caption too if you want!
  • choose how you want the image aligned (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

You should now have a great post with an image you, your parents or teacher have taken.

Post ideas – cyber pet

In the last post, you learnt how to create a cyber pet to put in your sidebar and to play with at home (not at school!)

But your readers might like to know a bit more about your pet.

  • Why did you name it Llarry Llama?
  • How did it get its colour purple?
  • Where did it come from?
  • Why is it staying at your place?

Perhaps you could be creative and write a story or a poem about your cyber pet. You could also include your pet in the post.

To include pet in post.

  1. Write your post about your animal. Save draft.
  2. Get the code for your animal either at the website or from inside your text box in your widget area. Copy it.
  3. Come back to your post and change the post tab from Visual to HTML or text
  4. Paste in your code underneath all your writing.
  5. Save draft or publish.

How to … add a cyber pet

Here is a post with step by step instructions for adding a cyber pet as a widget on your blog sidebar.

1. Go to this website which is the gallery at widgetbox.

2. Click on cyber pet.


3. Click on Bunnyhero labs


4. Choose the pet you want by clicking on it.


5. Now customize your pet by changing colour, adding a name for the pet and putting in your name as the adopter. Change the text colour as well if you want. You should be seeing on the right of the page what your changes will make your pet look like.


6. Make sure the number for the width is about 250 if you are putting your pet in the sidebar. Finally click on the first button </> This is the embed code button on many websites.


7. When the following screen appears click on the green copy button. This copies the code to your clipboard on your computer.


8. If you have done all the above steps correctly the final screen will look like this.


9. Now the last step is to copy the code into your blog widget area. Go to your blog dashboard> appearance> widgets

Drag a text box to the sidebar where you want the pet to appear. Put in a title if you want and paste in the code that is on your clipboard – use control V.

Save and then close. Go to your blog, refresh the blog and you should now have your pet in the sidebar.


Do you know of any other great websites with widgets other than widgetbox?

What other widgets would you like on your blog?

Many thanks to Sue Waters for telling me about the program SnagIT which I have used for the arrows and numbers on the images. Next learning step for me will be creating a video as well.

Activity 8 – Widgets

Chumby - TimeThere are hundreds of different widgets you can add to the sidebar of your blog. But you need to think about the design of your blog as well.

  • some widgets are noisy- music, games, pets
  • some take up a lot of space – games, shelfari
  • some distract your readers – noisy games

There are some widgets I would like to see on your blog and these are provided by Edublogs so are easy to add to your sidebar.

How to add Edublogs widgets

  1. Go to blog dashboard> appearance> widgets
  2. Open your sidebars
  3. Now just drag and drop into the dotted boxes
  4. Move widgets around, just drag and drop within the sidebars

Widgets to add: class blogs, links, recent comments (10), recent posts (10), categories  If you can already see it in the sidebar, don’t add a second time.

You want to add a pet to your blog? Follow these instructions.

Here is a post showing many other widgets you could add to your blog sidebar. The instructions for adding the code is found at the bottom of the post.

When visiting other blogs from classes or students, which widgets did you find distracted you from the posts on the blog?
Photo Credit: William Hook via Compfight