Welcome, guest | Sign In | My Account | Store | Cart

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
 1
 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 */
Created by Skye Giordano on Wed, 16 Nov 2011 (MIT)
JavaScript recipes (69)
Skye Giordano's recipes (1)

Required Modules

  • (none specified)

Other Information and Tasks