Lazy Image Layout 0.36

Please go to http://davidseah.com/projects/lzil for the most recent LZIL download! You may also leave comments there...this page is now locked.

Lazy Image Layout (LZIL) is my WordPress 1.2 plugin for formating images in my posts, using a terse syntax and automatic thumbnail sizing. It was developed to co-exist with PHP-Markdown 1.0. If you don't have Markdown installed, you'll need to make sure that the LZIL commands don't have carriage returns after them.

The way I generally access my blog is through either the WP admin interface or using Dreamweaver. I upload files using Dreamweaver, and use its code editor for managing the PHP associated with the site when that is needed. Because of this, I tend not to use the upload form of WordPress. You still need to set the upload path in your WordPress options, however...LZIL uses it to determine the base location of your images.

Anyway, here are the important features:

• terse syntax:
  
  • short: !@(imagename)
  • long: !@(imagename:align_width dest_url "alt-title")
  • dest_url and "alt-title" are optional, and either can appear singly.
• popup image support.
• automatic thumbnail generation and caching on-the-fly.
• can align left, right, with "no margin" option available for full-width images.
• doesn't use <div> tags, so will work inside of other blocks like <p>.
• attempts to provide useful error messages back to the user

To-Do List:

• Add :X (no resize) option
• Add SWF support
• Add no border support
• Rewriting using inline tables, so we can have captions (I think this is a proper use of tables in CSS, but tell me if I'm wrong)

The images below are a mixture of JPEG and GIF files.

» Installing LZIL

INSTALLATION

Requires WordPress 1.2 or later!

Drop the LazyImageLayout.php file into your wp-content/plugins/ folder, then go to the Admin Plugin Page to Activate it.

You must also enable and set your "upload file" directory in the WordPress options. In WP 1.2x, this is under Options > Miscellaneous > File Uploads : Destination Directory. This directory becomes the base directory that LZIL uses to look for images.

For example, if your destination path is /usr/www/users/dseah//wordpress/wp-content, you can should upload your images there. WordPress will suggest an upload path for you, so you can just accept it as is. The imagecache directory, which holds the thumbnails generated by LZIL, will also be created here.

The thumbnail resizing code uses GD2 image functions, so I think you need PHP 4.3 or better installed and configured.

Depending on how your web server is set up, PHP may create files in the cache directory that you can not delete. If you are using a cgiwrap version of PHP, you shouldn't have this problem if you are running under your own user_id.

USING IT

You only need to upload the full-size image. LZIL handles the creation of thumbnails for you. After that, this is the simplest way to insert the image using the defaults ( left-float, 132 pixel wide):

    !@(image_path)      

The image_path is the pathname relative to your upload directory's root. So if your upload directory is blah-blah-blah/wp-content/, and you've created a new file at the location blah-blah-blah/wp-content/images/special/mypicture.jpg in it, you'd type:

    !@(images/special/mypicture.jpg)

There's more you can do...read on!

JPEG, GIF, and PNG files are currently supported, though your install of PHP determines whether it will work. You need the GD2 library in PHP installed. LZIL should fail gracefully, but I haven't tested this extensively.

If a problem occurs, LZIL attempts to provide a useful error message. It will show up in red in your post, prefixed by the LZIL: identifier.

BASIC SYNTAX

Inserting Inline Images
This will show a Left Aligned, 132px thumb that will jump to link_url with the alt and title attributes set to "title".

    !@(image_path link_url "title")

Specifying Optional Alignment/Width Tags
(If you don't specify this tag, it defaults to Left Aligned, 132px):

    !@(image_path:L240 link_url "title")

Using the No Margin Alignment Tag
This will show a 450px wide thumb that will jump to link_url

    !@(image_path:N450 link_url "title")

*note that "no margin" here doesn't actually get rid of the border.

Specifying Popup Images
This will show a Left Aligned, 120px wide thumb that will open in a popup window. Tested with IE6, Safari, and FireFox Preview Release 1.0.

    !@(image_path:L120 popimg: "title")

Inserting a hard break between images
Uses similar syntax to horizontal rules, inserts a <br style="clear:both" /> tag. It must be used at the beginning of a line, like this:

    !@---

EXAMPLES

1. Upload a file (e.g. .../wp-content/images/mypicture.jpg)

2. Write a post. For example:

   (This is using Markdown 1.0 syntax, incidentally)

   When I first saw these goggles, I immediately felt the urge of become a properly-accessorized mad scientist. With these goggles, surely I could rule the world! But I was with friends and was self-conscious about admitting this publically. So I passed them up.

3. Insert the image tags. For example:

   !@(images/mypicture.jpg url "My Title")
   When I first saw these goggles, I immediately felt the urge of become a properly-accessorized mad scientist. With these goggles, surely I could rule the world! But I was with friends and was self-conscious about admitting this publically. So I passed them up.

This will create a left-aligned, 132 pixel thumbnail by default. The thumbnail is named 132-mypicture.jpg and stored in the wp-content/imgcache directory.

Every time you specify a new width, a new thumbnail will be created in the cache directory. However, you always refer to the original file in your post, not the thumbnails.

Note that the path doesn't include wp-content. That's because the images are all stored relative to that directory. (See Using It above).

IF YOU ARE NOT USING MARKDOWN...

• The only difference is that you do not put a carriage return after the LZIL line...just embed it into your paragraph.

  !@(images/mypicture.jpg url "My Title") When I first saw these <a href="goggles.html">goggles</a>, I <emp>immediately</emp> felt the urge of become a <strong>properly-accessorized mad scientist</strong>. <emp>With these goggles, surely I could rule the world!</emp> But I was with friends and was self-conscious about admitting this publically. So I passed them up.

MORE EXAMPLES

The way I use this so far is to pile all the image tags at the top of the paragraph I want to align them with.

This will put a single default thumbnail on the right side:

    !@(images/mypicture1.jpg:R url "My Title")

This will put 2 thumbnails on the left of the paragraph, each 120 pixels wide:

    !@(images/mypicture1.jpg:L120 url "My Title")
    !@(images/mypicture2.jpg:L120 url "My Title)
    When I first saw these [goggles][gog], I *immediately* 
    ...

This will put 2 thumbnails on the right:

    !@(images/mypicture1.jpg:R120 url "My Title")
    !@(images/mypicture2.jpg:R120 url "My Title)
    When I first saw these [goggles][gog], I *immediately* 
    ...

This will put 1 thumbnail on the right and one on the left:

    !@(images/mypicture1.jpg:L120 url "My Title")
    !@(images/mypicture2.jpg:R120 url "My Title)
    When I first saw these [goggles][gog], I *immediately* 
    ...

This will draw an image with no margins:

    !@(images/mypicture1.jpg:N450 url "My Title")
    When I first saw these [goggles][gog], I *immediately* 
    ...

If you're lazy, you can just leave out the width to right-align it at the default width:

    !@(images/mypicture2.jpg:R url "My Title)

A pop-up image:

    !@(images/mypicture2.jpg popimg: "My Title)

A linked image:

    !@(images/mypicture2.jpg http://davidseah.com "My Title)

This will create a nice table of images using the default 132-wide thumb, with a break every third image, assuming you have 450 pixels of width:

    !@(images/mypicture1.jpg url "My Title")
    !@(images/mypicture2.jpg url "My Title")
    !@(images/mypicture3.jpg:N url "My Title")
    !@---
    !@(images/mypicture4.gif url "My Title")
    !@(images/mypicture5.gif url "My Title")
    !@(images/mypicture6.gif:N url "My Title")
    !@---
    !@(images/mypicture7.png url "My Title")
    !@(images/mypicture8.png url "My Title")
    !@(images/mypicture9.png:N url "My Title")

If you've chosen image sizes that should fit exactly into the alloted horizontal space, you follow the steps below:

1. First do some calculations:

   n = number of thumbnails in a row
   w = original available width
   pad = (n * 10) + ((n - 1) * 12)
   thumb_width = (w - pad) / n

   Example: n = 3, w = 450
   pad = (3 * 10) + ((3 - 1) * 12) = 54
   thumb_width = (450 - 54) / 3 = 132

   If thumb_width is not an integer, round down.

2. Create the list:

   !@(images/mypicture1.jpg:L132 url "My Title")
!@(images/mypicture2.jpg:L132 url "My Title")
!@(images/mypicture3.jpg:N132 url "My Title")
!@---

   The N means "No Margin", and it's right aligned. This will make everything look nice.

ADVANCED USE

If you edit the file (LazyImageLayout.php) directly, you can set some default values that are more suitable for your layout, enabling you to be even lazier:

At the top of the file, where the Global default settings comments are:

• Change $lzi_default_width to what the L, R, and N should default to as a small thumbnail.
• Change $lzi_default_full_width to what the F alignment should default to for "full width" images
• Change $lzi_show_rss_images to false if you don't want to include image tags (unformatted) in the RSS feed output (this is the default)

» Troubleshooting

TROUBLE SHOOTING

I'm not seeing my images!

This is almost always a path problem. You need to go to the Admin page and set under Options the "upload path" to point to your wp-content folder.

You can also look at the source code for your blog page to see where the image is being fetched from. It might be a minor typo.

LZIL also doesn't handle filenames with spaces in them; I'm old school when it comes to naming files on a webserver :-)

I'm having trouble with image popups not working

Remember also that the syntax is to use popimg: ... note the colon after the word! Also, if you have heavily modified your templates...make sure you didn't remove the call that actually activates plugins!

I'm having trouble with underscores ("_") in filenames

Markdown is probably converting them before LZIL has a chance to use them; underscores are special characters used to designate "start using italics" or "start using bold". Version 0.31 now runs BEFORE Markdown executes, which should fix that.

I'm having trouble with spaces in titles...the title gets truncated!

Earlier versions of LZIL had this bug. It should be fixed now in Version 0.21

I'm having trouble with quote characters in titles

This is a problem because the title is passed to the Javascript function as-is, and the quotes mess things up. Version 0.31 should address this.

LICENSE

LazyImageLayout - A WordPress 1.2 Plugin
Copyright (C) 2004 David Seah

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

Enjoy!

Dave Seah
http://davidseah.com
September 26, 2004

MDIH Separation

Michel Fortin was kind enough to reply regarding my post on the Markdown mailing list. He pointed out inconsistencies in the syntax I had chosen, and suggested some more forward-looking approaches.

As a result, I was able to separate my code from Markdown, so it's now "quicky and independent", just right for my own website. A pretty instructional journey.

As I would expect, leaving the original Markdown image syntax alone would be preferable (this was my thought too), but I didn't know how to actually add the additional parameters I needed (width, alignment, etc). Starting from the actual PHP-Markdown source allowed me to develop the core ideas behind the image features I wanted, but my inexperience with PHP, WordPress--heck, all of this--was lacking. So I just hacked, copied/pasted code with Markdown to achieve this.

Michel suggested something I hadn't considered...using special URLs within the existing Markdown image framework, then running another filter AFTERWARDS that keyed off of that. It could look for my own pseudo-protocol identifiers, and then substitute my own formatting.

The problem is to get a link, the syntax is basically the image syntax embedded in the link syntax:

    `[![alt-text](image.jpg "img-title")](link/url "link-title")

And it's rather cumbersome. And the image formatting I'm doing needs to invoke a class for the A tag and for the image tag.

In the interest of separating from Markdown and working in the future, perhaps the thing to do now is dump the ref-id functionality and make an independent filter. So that's what I'll do next!

My philosophy: * Retain the formatting control from MDIH * Retain thumbnail generation * Don't interfere with Markdown syntax * Maintain terse-as-possible syntax, which probably means it won't be compatible. So be it!

So here's what I did...

1. Tried stripping out all the code except for my own, and see what happens. Hm, there is a conflict between Markdown and my image syntax. I'll first run it AFTER Markdown, at priority 7.

2. Hmm, the images turned into links. Ah, it's sees the syntax. So I need to run my code before Markdown runs. So let me change the priority to 5.

3. That seemed to work. A lot of the special stuff that Markdown does is for other features, but I'm doing some pretty straight-forward replacement.

   • One problem is that I can't show my !@ code inside a code block because it executes before Markdown escapes it. That sucks. The alternative is to change my image syntax so it doesn't look like Markdown, which is what I should probably do.

4. Let's evaluate the syntax. Can it be made more terse using the conventions expressed? And what would make sense for breaking away? The new syntax is... !@ ( path_to_image:asize url "alt-text)

...without the space between the @ and (. Since the filter runs outside of Markdown, the magical code quoting doesn't work.

1. I'm using the syntax !@ --- (again, without the space) to designate a break. The ---, however, gets turned into a long dash. Therefore I installed TWO filters: a LazyImagesPre() which runs at priority 5, and a LazyImagesPost() which runs at priority 7. So I get the --- before Markdown does.

So that's the new syntax.

!@img(asize)

!@(image_path:asize)(url title) would break the match, and then it could run after Markdown.

Markdown Image Hack 0.3 Tests

!@(images/test/nyah5.gif popimg: "nyah") Some Updates:

• Added GIF and PNG support. The thumbnails are still saved as JPG though.
• Restructured code so MDH_DoImages_reference_callback actually calls MDH_DoImages_callback, instead of duplicating all the image reference code
• Cached images are now store in a wp-content/imgcache directory
• Added clear:both code: !@---

See some more examples

My Favorite Software, Part I

LAST UPDATED: September 26, 2004

I'm picky about the tools I have installed on my computer. Every once in a while, I flip out and look to see if there's something better out there than what I'm using. I'm fairly happy with what I'm using now, so here's what I'm using right now on my Windows XP box.

TEXT EDITOR

My text editor of choice is still TextPad, currently version 4.3 on my boxen. It's loaded with all the features that a 2000-era text editor would have: syntax highlight, multi-document management, and regular expression searching. It's also got a useful binary view mode, which is useful when figuring out file types quickly (I just append ".bin" at the end of the filename). It's still missing a few things that I'd like: function recognition, code folding, and maybe FTP connectivity. NotePadPro is perhaps more capable, and SciTE looks like a possible replacement. But TextPad doesn't overload its toolbar with giant ugly buttons, and it loads and feels faster than just about any other full-featured text editor I've tried.

EMAIL

I use TheBat! 3.0. I've been using it since around 2001, when I first became incensed at total unimpressiveness of Eudora 4.x. Outlook and Outlook Express, with their dodgy record on reliability with large mailboxes and tendency to lock you in via broken data exchange, not to mention the continuing security problems...not even a consideration. I tried PegasusMail and some others that escape my memory, and it was TheBat that I stuck with. It's fast, it has great backup and restore, and once configured to do away with its "stock ticker" thingy, it's lean and mean. It also will show you meta information, such as full headers and email parts, much more readily than just about any email program I've used. And it takes pains to make itself less susceptable to evil executable attachments and HTML (it actually has its own HTML rendering engine, instead of using the Internet Explorer engine which seems to have a new exploit every week). As a result, the program isn't as pretty compared to other mail clients, but it's cleanly designed.

ZIP UTILITIES

The earliest version of Stuffit for Windows was a simple shell extension. You double-clicked a file to expand it, which it would in same directory as the archive. To compress files, you selected them and right-clicked to choose "Stuff" or "Stuff with Options". When it added ZIP compression, it became my current favorite archiving tool. I still use it in the way I describe. The current version I'm using, version 8.0, adds a lot of useless stuff like an archive browser with huge buttons and marginal additional utility. But it beats the shit out of WinZip and its wizard-driven ilk, and it doesn't created corrupted archives or extra mystery folders as its early progeny did. Archiving with Stuffit, once you turn off all the new stuff, is fast and seamless. I'd just get the regular version...I don't use any of the other features.

But what about corrupt archives? For years, I thought I had lost an important archive from 1996. But one day, having discovered a separate archive was also bad, I started to doubt the integrity of the unzipping software. Although the name of the archive format, "ZIP", hasn't changed, there have been internal changes. there was a chance, I thought, that modern Zip programs had forgotten how to unzip the old standards. There's one last-ditch program called Info-Zip that might serve your needs, and recover partial archives. Apparently it was written by archive maintainers, who have to deal with ancient 80s-era zip files. So compatibility is very important to them, as you can imagine.

DATA SYNCHRONIZATION

SynchronEx will let you compare the contents of two folders, and synchronize them so they are the same. The registered version can do one-way syncs (for backup) . Unlike most synchronizing programs, you can get the control you want by editing a script with a regular text editor. You execute the script by double-clicking or right clicking to do the sync. It will by default just pretend to run the sync to tell you what it would do...if that works, then you can choose to actually execute. The nice thing about SynchronEx over others is its transparency of operation and nearly-seamless integration into Windows Explorer. There's no need to hunt around for a program. Just right-click and select SYNC and it goes. It will work across the network just fine too, so I use it for production backups to my file server. The first time you install it, you'll wonder if it actually did anything, but read the information that pops up on the screen. While it's initially kind of confusing, it's well worth the effort to learn.

ONLINE TOOLS

• QuickEscape quickly escapes HTML text for when I need it.
• This version of XMLTidy comes in handy when I need a quick XML reformat and the data isn't sensitive.

Updated Markdown Image Hack 0.2

I've made some improvements: better syntax, image popup code, embedded CSS styles, and it now can use [id] references. Code is still ugly though, and still in the Markdown source :-)

Check it out.

Atkins 1, Twinkies 0

I felt a pang of anxiety when I read that Interstate Bakeries Corporation has entered Chapter 11 (via BoingBoing). They manufacture Twinkies!

I haven't had one in years, finding them far too sweet, but they're one of America's Great Pop Cultural References. The deep fried twinkie is a testament to this food's continuing ability to frighten and intrigue carb addicts everwhere. And without them, our slang would not be quite as sweet.

Perhaps they will be transmuted to organic form or become haute cuisine, but I'd hate to see the original Twinkie go away. So do your duty and buy a box (just don't eat them all at once, geez). Pick up a loaf of Wonder Bread while you're at it!

Demise of NPR in Rhode Island?

My sister commented that her local NPR station, WRNI, seems to be up for sale...distressing! That reminded me of this article about the rise of 'middlebrow culture' and how the nature of public radio changed when threats to their endowment allowed them to seek advert--er, underwriting from other sources. Also, how the demand for talk and news has displaced classical music over the years. Great article.

WordPress Email Form Hack

UPDATE: You can download a much more useful plugin at from Ryan Duff's site: wp-contactform. There's also a version with more validation of the email address (through DNS, no less) called PXSMail, which I haven't tried.

My own contact page now uses wp-contactform...I hope my email contact woes go away now :-) For historical purposes, I'm leaving the old information up.

UPDATE: Use Ryan Duff's WP-ContactForm Plugin instead.

I decided not to put my contact address directly online, but my original instructions kinda sucked. So I modified the php email script at StarGeek to work for my contact page.

To make the basic form look like the rest of this site, I copied index.php as email.php and replaced everything in the content div with the contents of this text file

Instructions

Just replace with your email address, and this might work for you too. Use email.php for your email links, and this should work. The original script makes some assumptions about how sendmail is setup on your server, so you'll need to dig into it. I'm not a PHP or linux expert, so your mileage may vary.

The CSS class might not work for IE users though unless you are applying text-align:center in a containing DIV outside of this block, or so I'm told.

Other Notes

I also was reading about a built-in email validation function at ScriptyGoddess, so I put that in too.

Hold That Thought!

!@(images/04/0930-pickle.jpg popimg: "Pickle Jar 2.0") I'm sometimes distracted by too many project ideas. When the ideas pile up, my productivity sinks because I keep thinking about them, and multitasking slows me down. To keep focused, I evolved a mind trick called The Pickle Jar that, despite its hokey name, actually works for me. It got me through my thesis, when writing was the last thing I felt like doing.

The Pickle Jar is an actual glass jar that once held pickles. Next to it is a square pad of paper, about 4 inches on the side. To get unrelated thoughts out of my mind, I write down a brief synopsis down, fold it twice, and put it into the Jar.

The physical act of writing down, folding, and then "pickling" the idea for later consumption is weirdly cathartic. Since I'm no longer in danger of forgetting the thought, I can relax. The act of formulating on paper has also satisfied the urge to follow up on it. The size of the paper also prevents you from writing too much...there's just enough room to get the essence of the idea down.

The best part: You can see that you've got the ideas queued up, but it's hard to retrieve them. They're in a jar! Getting at the idea entails trying to stick your hand in the jar (which shouldn't fit, if you've chosen your glassware wisely), or dumping them out in a mess and unfolding all of them. It's just inconvenient enough that I tend not to look unless I really am in the mood. The use is similar to that of a piggy bank, in that it encourages easy deposit but prevents casual withdrawal. So you tend to deposit and get on with your life, which in my case is getting back to #&!@*! work.

One side effect of the Jar... after pickling, some of those ideas don't really seem that interesting anymore, so I end up tossing most of them.

Sadly, my official Pickle Jar was destroyed or lost during my last move, so I'm going to try using WordPress as the idea containment system. I suspect it might not work, but I'm curious to see if the physical act of pickling is as important as I thought.

(Update: I repurposed a canning jar as the new Physical Pickle Jar. See the picture!)

Inline Image Hack Continued

ACHTUNG!

The Markdown Image Hack has been retired. Please check out Lazy Image Layout instead!

The code has been separated from Markdown, and is now a stand-alone plugin called LazyImages.

Continuing with the markdown/pictpress hack, this post with serve as a to-do / issues list.

• Download MDIH 0.3, the MDIH 0.3 changes, or follow the development history.

• In version 0.2, note that the syntax has changed, so you will have to update your old posts if you were using 0.1. But no one was, so I doubt it will be a problem :-)

• done I want to add a special popup value for the link url, which would automagically put the full size image in its own tasty window. I'm not sure where I would insert the javascript code for this in a portable way. For all I know, there is built-in javascript already in WordPress, so I should do some more digging.

• done What about GIFs? So far, this is JPEG only! I can either snoop the file's extension, or maybe there is some kind of "magic number" routine that can identify filetype in PHP. That would save me some string processing work :-)

• fixed I just realized that I have the syntax kind of backwards. I should put the link as the second parameter, and have all the image control in the first link. This came to me when I found myself wishing I could use the global link defs in markdown. Maybe something like...

  !@[image_uri](url "title")(L 120)
!@[image_uri][id](L 120)

  ...where the parameters get their own little extension parens. I think I can write a regex that treats that last as optional, and it can default to a standard left-justified thumbnail. Or maybe I don't use regex at all on the individual backreference level and just get the entire match, and EXPLODE it. That would make life easier :-)

• done Use global link defs, because I love 'em.

• done It would be useful to have a CLEAR ALL indicator. The half-assed way I'm designating alignment (due entirely to my weak grasp of regular expressions) could be extended to support this, perhaps by using lower-case to mean "float" and upper-case to mean "clear, then float".

• handled The way alignment and width are glommed together is because I wasn't sure how to handle extra or out-of-order parameters gracefully using regular expression references, so I put them into one thing. Since they are all required, though, I could just have a separate alignment parameter. Though I kind of like them as one thing. I don't want to require too many parameters, because that defeats the purpose of Markdown.

  If I use syntax changes, I could introduce longer keywords, but that gets away from the spirit of markdown. Maybe L for left float, and LB for left float break?

• Put a quick upload form on the Write and Edit admin pages, so they are automatically uploaded to the right directory? It should be possible to hook into the post page, since I've seen other plugins claim to do it. This would simplify uploading, especially if the upload manager automatically uses the post_id to create a containing directory. That would totally rock. The links inside the markdown syntax could probably just access files by name, and you'd never have to use a directory again.

• done Change the cache file naming scheme so cache comes FIRST in the name. I thought at first that I wanted files to sort alphabetically so related files were in a nice block, but that kind of sucks when you are looking for just the important originals. Also, put them in their own directory.