Mod My Blog Monday: Fun With The HTML Image Tag

Oh dear, I'd lose my head if it wasn't screwed on!

Since I wrote yesterday's posts I kept thinking "hmm, I'm forgetting something, there's something I'm supposed to do.. What is it?!" and it was driving me insane! Until tonight, when I realised... I'm meant to do a Mod My Blog post on Mondays! Oops! So here we go ;)

Fun with the HTML Image Tag


Changing The Image Size

OK, I'm going to make the assumption that you're fairly familiar with Blogger's image modding functions, where for sizing options you can choose from small, medium, large, extra large or original size. Well, what if you want a specific size instead of one of those options? Easy peasy!

Here's an image of Benny appreciating the cushions I made, it's set to Blogger's "small" size.

So, what bits do we need to change? Click Edit HTML and you should see something like this:

The image tag is highlighted in yellow, with the width and height attributes highlighted in blue.

The number (240 or 320 in this case) is the number of pixels that the image is wide or high, and we can change these to set the size of our image.

Here's the same image at 100 pixels high:

To achieve this, remove the width attribute (in this case delete the bit of code width="320") and change the height attribute to height="100".

Here's it at 100 pixels wide:

To do this, remove the height attribute (height="240") and replace the 320 with 100, so width="100".

You'll notice that in the two above examples the image is smaller, but not squashed. This is because by removing the unused attribute, the browser compensates and works out what the other should be.

To demonstrate this, here's the image at 100 pixels wide and 100 pixels high:

To do this, change both the width and height attributes to 100. You can see that this image *is* squashed a bit, because we set both the width and the height ourselves.

Of course, instead of using 100 pixels, use whatever size suits your needs!


Removing Borders from Images

This one is very easy and can help to make your images look tidier! Again, we're working in the Edit HTML view.

Try this way first, it's very easy and works most of the time -
add the border="0" attribute to your image tag:

For example,
<img src="my_image_path.jpg"/>

changes to:
<img src="my_image_path.jpg" border="0"/>

If that doesn't work, you might need to overwrite the border code in the CSS. This can be a little fiddlier,

Again, the image tag is highlighted in yellow with the CSS style attribute in blue. 

In this case, there's nothing about a border in the style tag, which makes life easy! Just add border-style:none; to the style attribute.

Change it from this:

style="cursor: move;"

to this:

style="cursor: move; border-style: none;"

If the tag already contains the border-style attribute, just change it from whatever it is (probably solid, but perhaps dotted or dashed, etc) to none and it should work just the same!

Easy, right? :D

Setting the ALT Tag

Now, you might be asking what is this ALT tag you speak of? And why do I care?

Basically, it supplies "alternative text" for an image. If the image doesn't load, this text shows up in its place. In most browsers, if you put your mouse cursor over an image, this text shows up.

BUT! Even more importantly, search engines like Google can't decipher images, but they CAN read the ALT tag text! So it can also help your blog to show up in web search results!



Just add the alt attribute to your image tag, like this:

<img src="my_image_path.jpg" border="0" alt="Benny sitting on my handmade cushions"/>

If the image tag already has an alt tag, edit the text to suit yourself!


Happy Modding! :D

Please let me know what you'd like to see on Mondays! I've covered the main things I wanted to talk about now, so it's up to you! Email me at marissa.milne [at] gmail [dot] com with your questions!