Does anyone have a script to automatically generate image tags from a directory of images?

Question

I do a lot of slicing in Photoshop, and it's tedious to manually write an <img /> tag for each of them -- writing in the filename, checking height and width, writing the alt tags, etc.

I can use Photoshop to generate the HTML, but they usually muck it up by not producing XHTML, or by wrapping it in tables, and so forth. I'm trying to make my life easier than that.

So I'm wondering if anyone uses a script that automatically generates img tags based on the directory? Or if some IDE that I don't know about does this? I just want it to generate a bunch of tags like so:

<img src="{filename}" alt="" width="{width}" height="{height}" />

Answer 1

First I want to commend you on having width and height information in an image. It's very good that you do this, everyone should do this. You could use any scripting language such as Python or PHP to do this with an image library such as imagemagick or gd. Without knowing what language or tools you're using to run your site I can't really provide an example.

In Python, using a template system you might do something like this:

<div>
     <% addImg("/images/myImage.png") %>
</div>

Which would generate the right image tag:

<div>
  <img src="/images/myImage.png" alt="MyImage" width="200" height="100" />
</div>

Somewhere in your python you define:

def addImg(imgPath):
  #do image processing here

Answer 2

If Photoshop does a decent job of this, it may be easiest to just process the output from there, using a regex or something to fix the problems in it. This would probably be simpler than trying to reimplement that functionality from scratch.

If you can post a sample of Photoshop's HTML output, I can supply a regex search/replace that'd convert it to what you're looking for.