Based on the macro at http://community.activestate.com/forum/html-editing-img-tag-expansion-etc I hacked together this alternate version that will auto insert the width: and height: of an image background in a CSS rule turning this:
background: url(http://server.com/myImg.jpg) 0 0 no-repeat;
...into this:
background: url(http://server.com/myImg.jpg) 0 0 no-repeat; height: 252px; width: 200px;
JavaScript, 42 lines
Download
Copy to clipboard1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | var view = ko.views.manager.currentView;
var scimoz = view.scimoz;
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 (/.*url.*\(["']?(.+?)["']?\)/.test(text)) {
var url = RegExp.$1;
var currentView = ko.views.manager.currentView;
var cwd = currentView.document.file.dirName;
var prefix = (text.indexOf("http") == -1)? "file:///" + cwd + "/" : "";
url = prefix + url;
var img = new Image();
img.src = url;
// Try 10 times
var lim = 10;
var i = 0;
var writeTag = function(i) {
if (i >= lim) {
ko.dialogs.alert("Sorry, can't find the height and width of the image");
} else if (!img.height || !img.width) {
ko.statusBar.AddMessage("No img info at attempt " + i, "editor", 500, true);
setTimeout(writeTag, 100, i + 1);
} else {
var newText = ('\r\n\theight: ' + img.height + 'px;' +
'\r\n\twidth: ' + img.width + 'px;');
scimoz.lineEnd();
scimoz.insertText(lineEndPos, newText);
}
}
writeTag(0);
} else {
alert("Can't get image info from URL '" + text + '"');
}
// TESTING: Put the cursor somewhere on one of the following lines, run the macro.
// background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/0/04/WhiteandKeynes....) 0 0 no-repeat; /* ABSOLUTE FILE PATH */
// background: url(../images/bgtile.jpg) 0 0 no-repeat; /* RELATIVE FILE PATH */
|
