Category Archives: Images

Generating CSS Based on Images, also SEO-Friendly

I’ve typed out a lot of CSS that’s focused on using a background image to replace text. I’ve been using a cross-browser CSS trick that’s SEO-friendly, I’m not sure if it’s documented anywhere. I came upon the solution myself when I was searching for a clever way to do this years ago and it’s become the standard method for me. However, I dislike the tedious task of typing out the CSS and referencing the image pixels and at work, I don’t want my developers wasting that time either.

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 ([email protected])
# 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 "${f%.*}"
}
cbi_html_div() {
    f=${3##*/}
    echo "
" } 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;
}
dumbtubes-fav
submit_new

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 ([email protected])
# 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 = """%s\n"""
HTML_DIV_FORMAT = """
%s
\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.

Taking Screenshots the Easy Way

I’ve mentioned this software before but I feel compelled to show you all why this software has made my list of software I install on a fresh format. This software is MWSnap, a program for taking and manipulating screenshots. When you first open the program, you’re greeted with this:

MWSnap - Take Screenshots Easily

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.

MWSnap - Window or Menu

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 - Add Cursor

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

MWSnap - Tools

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

MWSnap - Ruler

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.

MWSnap - Color Picker

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: Batch Renaming Utility

I’ve tried many different batch renamers for all sorts of reasons. More often than not, it’s for sorting images. The other day I came across a directory of images that I had (stupidly) prefixed and I needed to change that back. With a few simple clicks using Rename Master I was able to restore them quickly and easily.

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:

rename-master-1.jpg

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.

Batch Converting Your Images

While I love Adobe Photoshop and the amount of power it has behind it’s actions, sometimes I like to use a lightweight alternative.

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:

Pictures I’d like to thumbnail

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

Select Batch Conversion/Rename

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).

Click Add All

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

Advanced options

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

New thumbs

And marvel in the glory

Hey, it’s me!

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.

Organizing Your Precious Internet Memories

Back when I first became a part of these internets, I’d get a lol or two via a link to a picture or a website. With the exception of a few of these pictures (thanks digg) most of these pictures have become distant memories of my past. After a while it occurred to me, why aren’t I saving these pictures?

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:

omg_spoon_cat.jpg

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

step-1.png

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.

step-2.png

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.

step-3.png

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