Monday, May 2, 2011

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!

Benny sitting on my handmade cushions style=

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!


c.w.frosting said...

Hi Rissa, Visiting from Making the World Cuter's follow along! Definitely appreciate the blogging to stay sane. I finished a PhD in science last year & am finishing my MD next year, joint degree program. Your post here is exactly how I approach blog mods. Great that you're explaining it for all!

-caroline @ c.w.frosting

Jennifer said...

Wow! Changing the html image! Makes sense to do it in steps to prevent the squishing!! Awesome! Hey I have an image question! It takes forever to load them...should I be resizing and if so to what size?
Thanks girlie!

CraftyMummy said...

Love it when I learn something - this is gold! Thank you for the tips!

Post a Comment

I love getting comments, they make my day! Please let me know what you think or any ideas you have for me, I would love to hear them!

Before you comment - are you a 'no-reply' blogger? If you are, I can't email a reply to your comment! I really would love to be able to! If you want to change this, go to your dashboard, click "Edit Profile", tick "show my email address" and save!

I'd really love to be able to email you back! xx

Related Posts Plugin for WordPress, Blogger...