Please go to https://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.

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.

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

(This is using Markdown 1.0 syntax, incidentally)

!@(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 publicly. 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 [goggles](goggles.html), 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 publicly. 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 https://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.

<

p>##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

!@(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