8. Adjusting images to complement blog width

This tutorial is based around a Blogspot issue but the information is great for any situation that uses HTML to insert an image!

When inserting an image through Blogger it will often display the image as much smaller than the width of your blog EVEN if you have chosen the large option. If you're like me, you'll want the images to be as wide as possible to show off your images properly. This is easy to achieve with a little tinkering to the code.

Image added through Blogger:


Image after the code is edited:


Step 1: Adding your image

While editing your blog post enter into HTML mode. Select the "Insert Image" icon and upload your image files. For this tutorial I've selected an image of some bread that I baked and was feeling particularly proud of that day ;) As seen in the above example, the image appears quite small by default.

wider_images

Step 2: Editing the code

To widen the image we'll need to edit the code a bit. The image will then automatically fill the entire blog post area without extending past it. Woo hoo!

Okay. Deep breaths.

This is where we get all fancy and do some serious coding. But it's easy! It's all marked out for you. It boils down to this: Blogger squishes your image unnecessarily and adds lots of extra code that DOESN'T need to be there. We'll take out the superfluous code and add in the magic code that automatically makes your image as big as it can go without extending past the blog post area. Dreamy.

Here is the code for the image we've added to the post through Blogger:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWx2mCSP65tOgjB5CRFR_iZnvmHln47F1Doq9qxcZOkPbTDgIrimtlIaQRsBMKCGj9Dnv34GvYpJxgMsJoC7JGq1zzX7Eyna8IQ1X4s8yZomsw83FONtJU_5xHi0VEZtrkAcPj7yanseo/s1600/bread.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWx2mCSP65tOgjB5CRFR_iZnvmHln47F1Doq9qxcZOkPbTDgIrimtlIaQRsBMKCGj9Dnv34GvYpJxgMsJoC7JGq1zzX7Eyna8IQ1X4s8yZomsw83FONtJU_5xHi0VEZtrkAcPj7yanseo/s320/bread.jpg" width="100%" /></a>

You DON'T NEED the parts I've marked out in red:
imageanchor="1"
border="0"

You DO NEED:
To change the img URL from /s320 to /s1600
Add: width="100%"

We are left with an image that is much larger and automatically fills the entire frame of your blog post area. BEAUTIFUL!

4 comments:

  1. How do I get from selecting my image, to the code?
    xx

    ReplyDelete
    Replies
    1. At the top of the post editing area there is an option for "Compose" mode or "HTML" mode. You can edit the code for the post in the "HTML" mode. :)

      Delete
  2. Sorry, I mean how do I find the HTML code for the picture I uploaded?

    ReplyDelete
    Replies
    1. Hi Amy!

      You should be able to right click and either select "Copy Image URL" or "Copy Image Address" (something along those lines, depending on your browser and operating system). Then you can paste the URL directly into your code. Let me know if you have any more questions!

      Delete

We are happy to answer any questions about the workshop material. Fire away, lovelies!