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>
Comments
> 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.
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.
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.
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?
