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.
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
- Upload a file (e.g.
.../wp-content/images/mypicture.jpg) 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.
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:
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) / nExample: n = 3, w = 450
pad = (3 * 10) + ((3 - 1) * 12) = 54
thumb_width = (450 - 54) / 3 = 132If thumb_width is not an integer, round down.
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_widthto what the L, R, and N should default to as a small thumbnail. - Change
$lzi_default_full_widthto what the F alignment should default to for "full width" images - Change
$lzi_show_rss_imagesto false if you don't want to include image tags (unformatted) in the RSS feed output (this is the default)
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
First off, I love your image hacks! I use extensively on my site. However problems… I just tracked down page load errors to the hack and see you have a new version. 1.) I cannot download the lazy image plugin. (not found). 2.) Is there any way you can make the alignment option compatible with the old syntax (of the old hack ie. (l120)? I have maybe 50 or so images out there.
thanks for doing these hacks and let me know.