Created CSS sprites from all non-animated images using http://draeton.github.io/stitches/ for now (let’s see if necessary to implement in build process)

code/Images/Images.js

@@ -122,29 +122,48 @@ Images.prototype.user_action = function() {
  */
 Images.Default = new function() {
   var Image = function(name, description) {
-    var dir = new helma.File(app.appsProperties['static'], 'sites/www');
-    var image = new helma.Image(new helma.File(dir, name));
-    this.__defineGetter__('parent', function() {return root});
+    var dir = new helma.File(app.appsProperties['static'], 'img');
+    var image, isSprite = false;
+    try {
+      image = new helma.Image(new helma.File(dir, name));
+    } catch (ex) {
+      image = new helma.Image(new helma.File(dir, 'spritesheet.png'));
+      isSprite = true;
+    }
+    this.__defineGetter__('parent', function () { return root; });
     this.name = this.fileName = name;
     this.description = description;
     this.width = image.width;
     this.height = image.height;
-    this.getUrl = function() {
-      // Cannot use global.Image.getUrl() here because these images are
-      // located in the top-level of the static directory.
-      return root.getStaticUrl(name);
+    this.getUrl = function () {
+      return app.appsProperties.staticMountpoint + '/img/' + name;
     }
-    this.render_macro = global.Image.prototype.render_macro;
+    this.render_macro = isSprite ? function () {
+      var shortName = this.name.substr(0, this.name.lastIndexOf('.'));
+      res.write("<i class='av-sprite av-sprite-" + shortName + "'></i>");
+    } : global.Image.prototype.render_macro;
     this.thumbnail_macro = global.Image.prototype.thumbnail_macro;
     return this;
   }
 
   var images = {};
-  var add = function(name, description) {
+
+  function add(name, description) {
     images[name] = new Image(name, description);
     return;
   }
 
+  function isSprite(name) {
+    return !{
+      'big.gif': true,
+      'dot.gif': true,
+      'marquee.gif': true,
+      'pixel.gif': true,
+      'smallanim.gif': true,
+      'smalltrans.gif': true
+    }[name];
+  }
+
   add('ant.png', 'Ant');
   add('ant-icon.png', 'Tiny Ant');
   add('big.gif', String.EMPTY);
@@ -163,6 +182,7 @@ Images.Default = new function() {
   add('smallchaos.gif', 'Made with Antville');
   add('smallstraight.gif', 'Made with Antville');
   add('smalltrans.gif', 'Made with Antville');
+  add('spritesheet.png', 'Antville Sprite Sheet');
   add('status.gif', 'status');
   add('webloghead.gif', 'Antville');
   add('xmlbutton.gif', 'XML version of this page');

code/Root/$Root.skin

@@ -284,10 +284,11 @@ div.skin div.title {
    text-decoration: none !important;
 }
 
-.connect img {
-   padding: 2px 0;
+.connect i {
+   margin: -2px;
    vertical-align: middle;
    opacity: .3;
+   transform: scale(0.7);
 }
 
 .helma-debug-line /*:has(script)*/ {

code/Site/Site.skin

@@ -124,7 +124,7 @@ prefix="Last update: " default="None so far" %>)</span></li>
          </div>
          <div style='float: right;'>
             <% image /smallchaos.gif | link http://antville.org %> &
-         <% image /helma.png | link http://helma.org %>
+            <% image /helma.png | link http://helma.org %>
          </div>
       </footer>
 
@@ -182,7 +182,8 @@ $(function () {
       width: 262px;
       height: 53px;
       margin-left: -40px;
-      background: url('<% image /webloghead.gif url %>');
+      background: url('<% image /spritesheet.png url %>');
+      background-position: 5px -139px;
    }
 
    .av-header-bg-offset {
@@ -195,6 +196,7 @@ $(function () {
       top: 7px;
       height: 38px;
       background: url('<% image /dot.gif url %>');
+      background-position-x: 1px;
    }
 
    .av-title {