May 12, 2020

Images in Posts

I am a fan of images in posts, and working with images is something students really enjoy. In this post, I will make some general observations about using images in blog posts and then some technical tips about Blogger in particular.


One of my goals is for them to learn about image usage rights, and also to get into the habit of captioning their images and providing useful image information, which is something they are generally not in the habit of doing (school is very focused on bibliography... but not image citation, unfortunately). If you're curious how I work on that with students, here are some links:

  • First blog post assignment: Favorite Place. This is their first real blog post, and it puts an emphasis on the image. (It's also a really fun way for me to start interacting with students and learning about them.
  • In that assignment, I ask them to review this information: Finding and Using Images Online. My main focus is explaining about copyright versus CC licenses, and also showing them how to configure Google Image Search.
  • Then, I explain how to caption and cite images: Image Information. (This is also an opportunity for them to get more practice making links since since linking back to a webpage source is part of the image information.)
  • I also provide some tech tips about graphics (meme generators, animated gif makers, etc.), including some image search tools also, like Creative Commons Image Search and browser extension, plus Google Reverse Image Search (for tracking down larger image file sizes and also image information).
The technical side of including images in blog posts is easy; the hard part is really the culture of image use (and reuse) so that students become more aware of how they are using images and also better skilled at finding good images to use.

Upload versus copy-and-paste. One of the biggest problems my students run into is that they want to copy-and-paste images into posts, which Blogger interprets as a command to display the post by URL, i.e. hot-linking, which many web services (such as Wikipedia, etc.) do not allow. The error message does not display right away, though, which means students don't realize that they have a problem until later on, usually with a graphic that looks like this:

By checking the blog stream, though, I see where students have made this mistake, and I can check in with them to remind them that they need to use the upload option for images in their blog posts, not just copy-and-paste.


In terms of inserting images in Blogger blog posts, that happens through the image icon in the editing bar, which then presents you with the option to upload an image and insert it into the post. (There are other options too, but upload is the one my students are using since they are finding images online and reusing them.)

Then, you have some formatting options; click on the image to display the dialogue box. Again, there are two Blogger editors that people are using right now, old and new. The options are basically the same, but the interface is quite different. In the Classic editor, the options display on top of the image in a row, while in the New editor, there is a dialogue box.

Old version:

New version:

Luckily, the Blogger size defaults work pretty well because, in general, I don't think my students are inclined to click on the image properties. Instead, they insert the image and then add the image information as needed below the image or elsewhere in the post; some students get in the habit of putting the image information down at the bottom of the post like bibliography at the end of a paper, which is great!

HTML image width. For tall images, Blogger will by default display a tall-not-wide view of the image, but if you want even tall images to display at 400 pixels width (or more), you can do that by manually adjusting the HTML. Just select "original size" in the Blogger options, and then edit the HTML by adding your preferred width specification to the img tag. I usually don't teach my students much about HTML, but I like editing HTML by hand, and you can do that in a Blogger blog post anytime.

I think that's all I need to say about images in blog posts, but you can let me know if you have any questions. Next up.... embedding videos and video playlists!