I figured it’d be best to come up with a simple solution, so I started coding something out in bash and it worked:

#!/bin/bash
# css.sh - generate common css and html
# Tyler Mulligan (z@interwebninja.com)
# Last Update: 02/16/2011
# MIT License

create_block_image() {
    feh -lr ${1:-.} | awk '{ print $3" "$4" "$8 }' | sed '1d' | while read l; do N=$((N+1));
        cbi_css $l
    done
    feh -lr ${1:-.} | awk '{ print $3" "$4" "$8 }' | sed '1d' | while read l; do N=$((N+1));
        cbi_html_a $l
    done
    feh -lr ${1:-.} | awk '{ print $3" "$4" "$8 }' | sed '1d' | while read l; do N=$((N+1));
        cbi_html_div $l
    done
}
cbi_css() {
    f=${3##*/}
    echo "#${f%.*} {
    display: block;
    background: url('$3') no-repeat 0 0;
    width: 0;
    height: $2px;
    padding-left: $1px;
    overflow: hidden;
}"
}
cbi_html_a() {
    f=${3##*/}
    echo "<a href=\"#\" id=\"${f%.*}\" alt=\"$f\" title=\"$f\">${f%.*}</a>"
}
cbi_html_div() {
    f=${3##*/}
    echo "
<div id=\"${f%.*}\"></div>

"
}

s=$1; shift; case $s in
  --image-block|--cbi|-i) create_block_image $@;;
  *) help help;;
esac

Which ouputs something like:

z@zygon:~/scripts/css$ ./css.sh -i img/
#dumbtubes-fav {
    display: block;
    background: url('img/dumbtubes-fav.png') no-repeat 0 0;
    width: 0;
    height: 14px;
    padding-left: 16px;
    overflow: hidden;
}
#submit_new {
    display: block;
    background: url('img/submit_new.png') no-repeat 0 0;
    width: 0;
    height: 106px;
    padding-left: 244px;
    overflow: hidden;
}
#dumbtubes-logo {
    display: block;
    background: url('img/dumbtubes-logo.png') no-repeat 0 0;
    width: 0;
    height: 70px;
    padding-left: 274px;
    overflow: hidden;
}
<a href="#" id="dumbtubes-fav" alt="dumbtubes-fav.png" title="dumbtubes-fav.png">dumbtubes-fav</a>
<a href="#" id="submit_new" alt="submit_new.png" title="submit_new.png">submit_new</a>
<a href="#" id="dumbtubes-logo" alt="dumbtubes-logo.png" title="dumbtubes-logo.png">dumbtubes-logo</a>
<div id="dumbtubes-fav"></div>
<div id="submit_new"></div>
<div id="dumbtubes-logo"></div>

To explain the way this CSS works, it uses the padding-left as the actual width, setting the width 0 and then pushes whatever content you have out of view using overflow:hidden to hit it from view. This makes it easy for search engines, keeping your HTML clean and CSS simple.

The bash script relies of “feh” a lightweight image viewer for linux that outputs a list of images and their dimensions. It also generates some sample HTML to quickly drop in and modify.

This is not an elegant solution and I’m not happy with the fact that it relies on feh. I’ve been slowly getting into python and I was amazed at how fast I was able to recreate this script in Python.

#!/usr/bin/python
# css.py - generate common css and html
# Tyler Mulligan (z@interwebninja.com)
# Last Update: 02/17/2011
# MIT License
from PIL import Image
import sys
import os.path

CSS_FORMAT = """#%s {\n\
    display: block;\n\
    background: url('%s') no-repeat 0 0;\n\
    height: %spx;\n\
    width: 0;\n\
    padding: %spx;\n\
    overflow: hidden;\n\
}\n"""

HTML_A_FORMAT = """<a href="#" id="%s" alt="%s" title="%s">%s</a>\n"""
HTML_DIV_FORMAT = """
<div id="%s">%s</div>

\n"""

css=""
html_a=""
html_div=""
for tf in os.listdir(sys.argv[1]):
    f = os.path.join(sys.argv[1],tf)
    if os.path.isfile(f) == True :
        img = Image.open(f)
        fid = os.path.splitext(tf)[0]
        (width, height) = img.size[0:2]
        css += CSS_FORMAT % (fid,f,height,width)
        html_a += HTML_A_FORMAT % (fid,f,fid,fid)
        html_div += HTML_DIV_FORMAT % (fid,fid)

print css
print html_a
print html_div 

This is just the basic idea, I didn’t spend more than 15 minutes on this rewrite, it does what I need it to do so far. It was suggested by friends if I make it any bigger, to look into a templating engine, such as mako. I hope this script can be useful to someone :). PS, HTML_DIV_FORMAT should be on one line, not sure why my syntax highlighter is trying to put it on 3.

On the left, you have your main options for screenshots and on your right, you have a preview. Each of the screenshots have hotkeys that you can learn by click ‘Capture’ on the menu bar. All of the options are pretty self-explanatory except the ‘Window/menu’ option, which you’ll learn to love fast.

When you select this option, the screen freezes and you have a dotted box that selects whatever menu or window you’re cursor is hovering on.

This assures for a clean cut every time, quickly and easily.

And if you’re feeling fancy, you can garnish it by adding a cursor from the ‘edit’ menu:

MWSnap has some interesting tools that come in handy at random times:

I’d say the ruler is the one I use most often.

It’s floats above all other windows and lets you measures them by pixels. Don’t worry, it goes vertically as well.

And while I chose to use ColorPic for my color picking software. MWSnap’s color picker isn’t half bad.

There are only two downsides that I’ve found to this application. First being the lack of ability to crop… that to me is odd but I just open it up in IrfanView and take care of it that way. The other issue is multiple monitors. Unfortunately, MWSnap only recognizes the primary monitor. I don’t really have a work around for this, I just deal with it and drag windows I need to take screenshots of over to my primary monitor.

This software has saved me tons of time, I hope you enjoy it as much as I do!

Rename master has a very simple but intuitive gui with powerful options behind it. With some obvious wants and needs of a renamer such as a live preview of the rename and variables… Rename Master takes it a step further with their support for full regular expressions and thumbnail views.

Check this out:

Breaking down the screenshot above, we can see that I’ve chosen to do two things (as denoted by the underlined tabs), I’m using the “Add To” and the “Replace” options to formulate the name “Lemonade Stand ##.jpg” and remove those ugly S########.JPG names.

Also, you’ll see I’ve brought up the thumbnail preview that I mentioned above. This is not necessary in this process as I’ve already moved all the “Lemon Stand” to their appropriate folder but I just wanted to let you see how it could come in handy.

The ?n02? code wasn’t something I knew by heart when I first starting using this program, these variables can be generated by the program if you click the blue arrow button next to the text field.

There is so much for me to mention about this program… but I don’t want to waste your time, do yourself a favor and download it. It’s a single file, coded in delphi so it doesn’t need to be installed.

This program all works with mp3 id3 tags.

IrfanView is a program I’ve mentioned before, it’s great for flipping through series of images but it’s also great at doing many other things (some of which I’ll mention in future posts), like batch converting. In the following example, I’ll do a quick run through on a real life example, creating image thumbnails.

So, lets start off by opening a folder with pictures you’d like to thumbnail:

Open a picture with IrfanView and select ‘Batch Conversion/Rename’ from the file menu (B is the shortcut key)

Click the ‘Add All’ button (or optionally pick and choose the images you’d like to convert). And set your basic options. I made my output folder /thumbs, selected ‘Batch conversion – Rename result files’, made the output format GIF and set my rename mask to $N.t (which means [old image name].t).

Check the ‘Use advanced options’ box and click the ‘Set advanced options’ button.

I set my thumbnail size to 50% height and width but you can choose whatever you please. I also checked ‘preserve aspect ratio’ and ‘use resample function’ but those are optional.

Click ‘OK’ and you’ll be taken back to the previous window, click ‘start’ and bam, you’re done.

You can now navigate to your newly create thumbs folder

And marvel in the glory

This was a pretty simple example but I’m sure when you went to the advanced options window, the gears in your head starting turning. This program is a great tool, you should really play around with it and try to get the most out of it. I don’t think a day goes by that I don’t use it.

However obsessive, I made it my job, nay, my duty to summon the strength to save and sort ever picture that strikes the slightest bit of interest. This, as you could imagine was a tedious task. Right click, navigate to proper folder, rename image (if needed) and save. My commitment was strong but apparently no match for this mundane method. Slowly, I would stop navigating to sub-folders and just drop them all in a folder I like to call “Internet Garbage”. Currently in the root of this folder, there resides over 3,000 unsorted images.

DON’T WAIT TO SORT YOUR FILES! This is the best advice I can give to anyone. Sure it’s easy to save everything to your desktop but chances are, you’ll mix it up, lose it, delete or whatever. If you put in the extra 20 seconds navigating/creating a relevant folder, you’ll save yourself a boatload of suffering.

Getting back on track though… I came across a Firefox extension a while back called Save Image in Folder. This extension saves you so much time and trouble, that you’d actually be wasting resources by saving files the old fashion way.

Go Install that extension and come back for a tutorial if you too, would like to start saving some ‘Internet Garbage’.

After Installing the extension, right click an image (it can be any image, we’re just using this to set things up quickly). You can use this image if you’d like:

Select “Save Image in Folder… >> Edit folders…”

Select “New”, click the folder button next to the “Path” textbox and create a new folder called “Internet Garbage”. Create all your sub folders inside of that folder.

For this example, I used:

- Art
- Funny
- Gross
- Macro
- Nerdy
- Sexy
- Wallpaper

You can add more whenever you please.

Note: You can prefix or suffice the filenames however you’d like. It’s not a bad idea to prefix the files with a short date… but it’s all up to you.

Once you have all your folders created, it’s a good idea to sort them alphabetically by using the up and down arrows located on the side of the Options dialog.

Now it’s as simple as right clicking an image and picking a folder it’s most relevant to save to.