ActiveBlog

Komodo macro for automatically finishing img tags
by

, October 14, 2008

You know how you're supposed to add the height and width attributes to an img tag? I know, I know, this is the sort of thing we're supposed to use computers for. After all, it's tedious to look up that...

You know how you're supposed to add the height and width attributes to an img tag? I know, I know, this is the sort of thing we're supposed to use computers for. After all, it's tedious to look up that information, and it makes your HTML more brittle, since when you change the image the rest of the tag also goes out of date.  This is so first-normal-form, and yet apparently some people still hit the web via dial-up.

Well, here's a Komodo macro to automate finishing the tag.  If you change the src attribute, delete the rest of the tag and rerun. Never copy image attributes again. And hopefully in a decade or so this sort of thing will be obsolete.

<pre>

var scimoz = ko.views.manager.currentView; // scintilla/mozilla editor object
var currentPos = scimoz.currentPos;
var currentLine = scimoz.lineFromPosition(currentPos);
var lineStartPos = scimoz.positionFromLine(currentLine);
var lineEndPos = scimoz.getLineEndPosition(currentLine);
var text = scimoz.getTextRange(lineStartPos, lineEndPos);
if (/<img.*src=["'](.+?)["']/.test(text)) {
    var url = RegExp.$1;
    var img = new Image();
    img.src = url;
    var newText = (' height="' + img.height + '" ' +
                   ' width="' + img.width + '"');
    scimoz.insertText(lineEndPos, newText);
} else {
    alert("Can't get image info from URL '" + text + '"');
}

// Test line.  Put the cursor somewhere on this line, run the macro.
// <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/04/WhiteandKeynes.jpg/200px-WhiteandKeynes.jpg"
</pre>

Subscribe to ActiveState Blogs by Email

Share this post:

Comments

9 comments for Komodo macro for automatically finishing img tags
Permalink

I am not really expert in this. But can you post a macro which can update existing images with size attributes ? Does XHTML1.1 asks for these attributes ?

Permalink

And one more suggestion. It would be really helpful to have list / directory of user contributed macros.

Permalink

> I am not really expert in this. But can you post a macro which can
> update existing images with size attributes ? Does XHTML1.1 asks for
> these attributes ?

I don't have such a macro. Maybe there's a Mozilla XPCOM component that does that. I don't know, but it sounds like an interesting research project.

As for XHTML 1.1, that's a markup language, not an application. I assume it's still in the language, and I assume slow-connection browsers can still benefit from those attributes.

> And one more suggestion. It would be really helpful to have list /
> directory of user contributed macros.

http://community.activestate.com/forums/komodo-extensions

But I agree, it would be useful to have a directory of tagged macros.

Permalink

Nobody uses XHTML 1.1 (which should be served as "application/xthml+xml", not compatible with IE). 99.9% of websites are either tag soup, HTML 4.01 or XHTML 1.0 served as "text/html".

And yes, a macro that parses a page, detects IMG tags, and updates width and height attributes for said images would be great.

Permalink

By the way, this doesn't work for me in Komodo Edit 4.4.1. Did you test this on the 5.0 branch only?

I get this:
TypeError: scimoz.lineFromPosition is not a function

Permalink

This works fine for me on Komodo 4.4.1, both IDE and Edit, but on looking at the code, I see that

var lineStartPos = scimoz.lineFromPosition(currentLine);

should be

var lineStartPos = scimoz.positionFromLine(currentLine);

If you modified this macro to load a file automatically,
you might need to use a setTimeout to allow the new view to be registered as the current view before you can use it as such.

Permalink

Code updated as indicated by my comment of Oct 19/08.

Permalink

Hey I tried this macro but it doesn't work, Is it because I'm using a newer version of komodo edit?
I am a n00b at this but i could REALLY use an image width and height detector.

Could you possibly look at this code again and paste one that is fixed?

Permalink

The current version is fixed. Could you post the macro you're using in a pastebin service, and post the URL to it so I can have a look?

- Eric