The default title for Gallery2 item uploads is the file name of the image. It easier to name your files well from the beginning from the safety of either than edit the URL, titles, and keywords for your item after they are uploaded. My naming convention for a file name is photo_set-photo_subset-people_or_objects. For a photo of my parents, my bride and myself at my wedding, I used “wedding-party-parents-rachel-stephen.jpg”

When creating titles this script does the following via regular expressions:

• Removes ‘copy’ (a common OS-X filename suffix)
• Removes underscores at beginning
• Removes underscores at end
• Removes double underscores
• Removes left and right parenthesis
• Removes all single digit numbers and letters
• Replaces underscores and hyphens with space

When creating keywords from titles, this script removes the following common words and inserts commas between the remaining words:

a, about, above, across, act, add, after, again, against, all, along, also, amid, among, an, and, any, are, around, as, at, back, be, been, before, behind, below, beneath, beside, besides, between, beyond, but, by, came, can, cause, change, close, come, concerning, considering, could, cover, cross, despite, did, differ, do, does, down, draw, during, each, even, every, except, excepting, excluding, far, few, find, follow, following, for, found, four, from, get, give, go, grow, had, hard, has, have, he, her, here, high, him, his, how, if, in, inside, into, is, it, just, keep, know, large, last, late, left, let, like, little, long, look, made, make, many, may, might, minus, more, most, move, much, must, my, near, never, no, now, of, off, on, one, only, onto, opposite, or, other, our, out, outside, over, own, part, past, per, plus, put, regarding, right, said, same, saw, say, see, self, set, she, should, side, small, so, some, still, such, take, tell, than, that, the, their, them, then, there, these, they, thing, this, three, through, to, too, toward, towards, try, two, under, underneath, unlike, until, up, upon, us, use, versus, very, via, want, was, way, we, went, were, what, when, where, which, while, who, why, will, with, within, without, would, you, your

Usage

You can either edit the setup variables in the script or use URL variables (such as “?field=g_keywords&begin_id=3000″). That example would insert keywords (test insert, not commit) based on the titles of all items after item 3000.

Requirements

• Some familiarity with the PHP language
• Login credentials: server, username, database name, password
• Item ID to begin with (default is 0, that is “all items”)
• If you want to change my default title word removal listed above, familiarity with regular expressions

Download Gallery2 titles and keywords SEO script

NOTE: You will need to rename the “.txt” file to “.php” in order to run it on your server. Also this script will edit not only item names, but also albums. I’ve included copious comments in this script to aid in customizing it to your needs.

The need

Professional web developers have been aware of CSS sprites or CSS rollovers/hovers since 2004 (The rollover term is taken from JavaScript and the hover term is taken from CSS). They are the background graphics that change position based on mouse hover thus eliminating the need for JavaScript image swaps and image caching since the “mouse on” and “mouse off” are one image. I have been using sprites for years. It is a more tedious process than clicking Swap image on a DreamWeaver drop down menu, but it produces more accessible and more clean code. The most tedious part of creating CSS sprites for menu navigation is aligning the static (in-active) and hover (active) images. This script solves this problem by taking two images and merging them into one. I hope this increases your productivity and creates a more standards-compliant web.

There are online CSS sprite generators out there. My Photoshop script is not as remarkable as these 20 image sprites, but it’s much simpler, and you can assign a keyboard shortcut to it. Also, all my sites are designed in Illustrator which is a slightly different work flow than most. I find that Photoshop is an awful layout program.

Download CSSsprite.jsx

Installation

A JSX script is similar to a Photoshop plugin or an action, but are commands in Photoshop’s JavaScript based script interface. Download and copy this script within the Presets>>Scripts folder of your Photoshop application folder:

• OS-X: Macintosh HD/Applications/Adobe Photoshop CS3/Presets/Scripts/
• Windows: Program Files/Photoshop CS/Presets/Scripts

The Script will appear under File>>Scripts>>CSSsprite on the menu. You can assign a keyboard shortcut to this script. I prefer Control+Command+S. This shortcut fits well with the Save for Web shortcut, Command+Alt+Shift+S.

Usage

Open two files (and only two files) with the same height and width (if they are different sizes, the offset of your hover button state will not be half of the height). Select the non-hover background image, making it active–thus making the hover background image de-active. Run the script from the Scripts menu mentioned above. This will place the hover background image on the bottom of the sprite. This script does not support adding a third state to the sprite, but you could add a third and fourth state. To do this, first combine the third and fourth state, and then combine that image with the normal/hover sprite.

For your information: States for this script

The following is a list of Photoshop commands that are executed in this script:

• Convert Image Mode to RGB
• Make horizontal guide at 100% of canvas height
• Switch to inactive document (-1 in document array)
• “Duplicate Layer. . .” Layer Menu via right click
• Switch back to inactive document (+1 in document array)
• Double canvas size vertically
• Transform/Move top layer down (50% of canvas size)
• Zoom In (twice)

Result
This gives you a two-layered Photoshop file with second layer the CSS hover layer. Save the file as GIF, PNG, or JPEG using File>>Save for Web.

Notes
Adobe Photoshop JavaScript is the only cross-platform scripting language for Photoshop. This script was only tested Photoshop CS3 Extended (Mac). Our firm does not use Photoshop for web layout–only for image manipulation. We use Illustrator for layout.

I would like to thank the creators of ScriptingListenerJS and ActionToJavaScript.

You may be interested in this PhotoShop script that creates a sprite from all the images in a folder.

Suggested extensions for making coding easier

Web Developer

The Web Developer FireFox extension was the first FireFox extension I ever installed. It was mid-2004, and I was frustrated with Cascading Style Sheets. I was using CSS, not for the first time, but I was using CSS for margins and padding and widths– all those things we used spacer gifs and tables for back in the web’s infancy–for the first time. The sole reason that I would have even paid for this extension was the Outline tab and it’s “Outline Block Level Elements” The fact that I could actually know where one element ended and another begin was a godsend. There are many more uses for the plug-in. Almost too many to name here. The highlights that I use (or used to use) regularly are:

• Outline and highlight block level elements, deprecated elements, frames, links, and other tag and CSS elements
• Disable images
• View the CSS for a particular element by clicking on that element
• Disable cache and cookies
• Display various page and screen sizes for testing (what does this site look like on an 800×600?)
• Disable background images (ever browsed though MySpace, which reminds GeoCities circa 1997)
• View the CSS for a web page while browsing
• Edit the CSS style sheet of web page without reloading
• Validate HTML, CSS, feeds, and links

Firebug

I have only mentioned Web Developer first because it was my gateway drug of FireFox extensions. I use Firebug more often now that CSS is even more prevalent then it was in 2004, thus simplifying the HTML and making hand-coding HTML much easier. Firebug focuses solely on the content of a page and doesn’t have the browser related features such as disabling the cache or resizing the browser window. It shines when you want to tweak HTML, CSS and JavaScript contained in a page, all on the fly.

The way Firebug works is by clicking the “Inspect” button and selecting an element on the page. The HTML and CSS associated with that element is then displayed. The inheritance and overriding of CSS attributes can be seen (hence the cascading in cascading style sheets) and any CSS attributes can be edited or disabled.

Firebug helped make my CSS leaner. Before I discovered it, I often ignored the inheritance features of CSS and repeated the same attributes numerous times, since inheritance is an abstraction that is hard to remember without either modeling (which Firebug does) or precise documentation. Firebug shows this inheritance, thus making the relationships between.

Firebug will measure and illustrate all the offsets, margins, padding, and sizes for you–similar to what you would have in a WYSIWYG editor. Since offsets, margins, and padding can often overlap, there is a “Layout” tab that allow editing of these qualities and shows their relationships.

Link Checker

If you’ve ever clicked through a large site in order to test all the hyperlinks, you’ll find this simple add-on convenient and productive. It will highlight valid and invalid links of a page. Once Link Checker is installed, you’ll have to add the toolbar button yourself.

Measure It

You could use the guides in Firebug, but most times, one just wants to quickly estimate the correct margin or padding. This add-on gives the height and width in pixels of a rectangle that can be drawn atop the webpage.

ColorZilla

ColorZilla adds an eyedropper tool to the status bar that allows color sampling and copies RGB values (in five different ways) to the clipboard. This means you don’t have to go back to Illustrator or PhotoShop to grab RGB values for your CSS.

A note about Internet Explorer

Unfortunately, the majority of web users browse with Microsoft Internet Explorer and thus testing a site with IE is necessary. At work, I create my websites on an Apple Macintosh and have an old Dell laptop with IE 6 installed to test websites with Internet Explorer. A tool that I have not used extensively, but does help sometimes in debugging under IE is Internet Explorer Developer Toolbar.

Diagnostic Styling

This isn’t a plug-in or browser add-on. Using Diagnostic CSS Styling helps point out, for the most part, incomplete tagging. CSS allows you to style based on attribute values. For example, if you use “#” for links that you do not have a URL for, then you can highlight these with a red border.

So what’s one to do?

A friend of mine actually sent me a link to Mike Davidson’s site on sIFR 2.0 (Scalable Inman Flash Replacement) two years ago. I had forgotten about it until my creative director wanted a headline in a pixel font in a database driven site.

The concept

sIFR can replace short amounts of text with text rendered in the typeface you choose–whether or not your users have the font installed on their computer. A flash movie is created on the client side and uses JavaScript to pass text to it from the HTML (that’s correct, no coding the text twice). That means with a few lines of Javascript, you can use any fancy font you want for headlines and pullout quotes.

–Stephen M. James
www.smjdesign.com