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.
Dave 
MrJ 
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.
Hey Dozer, glad you like it! Sorry about the download link…I reorganized my directory structure a bit and obviously broke that link. Thanks for the heads up!
I don’t think I’ll be making an alignment version that’s compatible with the old version any time soon, as I separated the code from Markdown and chose a syntax that was less likely to conflict with it. If it’s any consolation, I had to go back and re-edit all my photo links also…see the portfolio section to get an idea of how many THAT was! :-)
Hi Dave,
I’ve been experimenting with your LazyMan Plugin. Hey it’s what I’ve been looking for. Thanks
Some issues though. The pop up feature in the code (popimg) doesn’t seem to do anything and the no border doesn’t work either. I am adding the code !@(yourphoto.jpg:N90 popimg “This is your photo”, I still getting a border around the 90 pixel image and a pop up window that says “This page cannot be found. When I add an absolute url for the image replacing the word “popimg” then I do get the new image in a new window. Also, Is there a way to get a pop up window with a pre determined size?
Thanks for your help.
Randy
Hi Randy,
Make sure the : in popimg: is present.
The N option removes the whitespace (as in no margin/no padding), but still draws the border. I may make a no border option soon, as well as a “no scale” option, but I’m a bit cramped for time.
Dave
I’m a newb, but I’m trying to use images that have underscores in their filenames (as well as some of the paths). It doesn’t seem to be working. I’ve prefixed the ‘_’ with ‘’ (ie. movie_posters).
Any ideas?
This might be an issue with Markdown interpreting the _ characters in the filename, if you have that installed. That’s because LZIL runs AFTER Markdown finishes its processing, and the LZIL !@ string just looks like regular text to it, free for plundering!
Version 0.31 (just uploaded) should fix that. It now runs BEFORE Markdown, and there doesn’t seem to be any ill effects. Markdown ignores stuff inside of other tags, so I think that should fix things.
Tried the underscore issue with the new release, but to no avail. Maybe I’m missing something…
Testing… the xo ship image is in a `_test_dir` directory. Also the `_aiface.jpg` image seems to work. They are the two left-most small images on this page.
I’m assuming that it __works fine with filenames that don’t have underscores__, right? Also, you shouldn’t need to slash the _ in the filename.
Test to make sure I have _ enabled again in Markdown:
> *this is using asterisks, and should be emphasized (italic)*
_this is using underscores, and should also be emphasized (italic)_
I’ll send you some email to followup.
Thanks dave..i got it working. The problem was that when I specified my upload directory, there was a space after wp-content. Hard to see in the post because of the font I used. Thanks again for fixing that bug. Now i’m trying to figure out how to use LZIL. It keeps posting the image off the screen to the right. I’m just fiddling with it now.
Thanks again
Well its not working. It shows the markdown on the post :
!@(pictures/posingduck.jpg url “Posing Duck”)
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor…
Any ideas ?
My installation and index directory are different if that matters
I have my index.php and installation directory in different places also, and haven’t noted a problem. Is it possible that you haven’t activated the plugin? When I visited the URL, I didn’t see the characteristic CSS and Javascript that LZIL emits on every page, so it doesn’t seem to be active.
Thanks for the reply and the e-mail. The reason it was not working was that the the_content function was changed in my indexp.php and after editing accordingly the plugin it works ! Thanks again.
OMG this is exactly what I’ve been looking for. I’m now a WP person for a year now and missed the popup image every now and then. Just tested this on my test blog and it worked like a charm first time out. Tomorrow I load this live on my other blogs.
I have 2 photoblogs still on MT this will help in making the move. Thank you for a great job!
I installed LZI 0.32 last night but when I try to display .gifs or .jpgs I get the error:
LZIL: unsupported image type:
with image type:1 for gif and image type:2 for jpg.
I’ve re-compiled php to make sure I had gd2 and libjpg correctly linked but I still get the same error. Is this a LZ config option?
thanks.
Hi Alan,
There’s no explicit configuration option inside LZIL you need to enable. The code actually checks to see if the file being referenced is supported by the version of PHP installed. I’ll double check that when I get home to see if there’s a new, exciting way for LZIL to fail.
Dave
I went through my php install again (php 5.0.2) and found that it wasn’t interacting with apache via the apxs2 calls properly. I recompiled and, after fixing some directory permissions in imgcache/ got the images displaying correctly.
However, I’m not sure that the behavior is correct. I have the image defined as:
!@(images/Photos/photo.jpg url “Photo ‘98”)
The proper thumbnail is built in imgcache/images/Photos and the image is correctly inserted in the blog entry. However, if I click on the image, I get a 404:
http://www.domainname.com/blog/url
So it looks like its interpretting the “url” tag as a real URL. I assume it is instead support to create a link to the image in images/Photos/photo.jpg.
Any idea?
Hi ALan,
Yes, that’s exactly what it’s doing…it’s by design. You can put any URL you like, or the special designator popimg:, or leave it out if you don’t want it to go anywhere.
The documentation probably doesn’t spell this out 100% clearly, but the intention is that if you want the link to go somewhere else (like, you’re using the image as an image link), you have the option to do so.
Again, if you leave out the URL, LZIL will just not use it. You can still use the title, so long as it’s in quotes.
Dave
i found this when i try to validate my rss, the error come from tag made by Lazy Image Layoutlike, view
http://feedvalidator.org/check.cgi?url=http://www.isnaini.com/wp-rss.php
isnaini: You can disable the image tag support in feeds. The feed support is sort of hacky…I put this in without researching what is allowed / disallowed in a feed. It clearly doesn’t work right.
Line 62: `$lzi_show_rss_images = true;`
Change `true` to `false` and see if that helps. You will lose images in your feeds though.
Hey Dave -
Last thing. I can’t get the “N” tag (to remove the border) to work. Any idea what may be causing it to be ignored?
I’m using:
!@(images/Photos/photo.jpg:N150 popimg: “Photo ‘98″)
Thanks.
The N option doesn’t make the borders go away…it removes the margin (in css, this is the whitespace you can use to pad around the element).
There currently isn’t an option to draw without the borders… it probably would happen when I rewrite the table layout code. In the meantime, you could edit the plugin code itself to adjust the stylesheet. It’s all the way at the end of the code.
Any ideas what to do with this???
Warning: imagejpeg(): Unable to open ‘/home/omar/public_html/xxx/images/imgcache//132-AVmedal.jpg’ for writing in /home/omar/pubic_html/xxx/wp-content/plugins/LazyImageLayout.php on line 345
Mark:
It means that your web host’s PHP setup isn’t allowing you to create files in your directory. If you are not running the PHP interpreter under your own user_id, then you will have to set the `public_html/xxx/wp-content/images/imgcache` directory to be world-writeable via a command like `chmod`. You will have to consult your ISP to find out how to do it on your paricular hosting environment.
You may have to create the `imgcache` directory manually also.
I’ve created the imgcache directory. I know how to change the file attributes, but change them to what? ( number value, that is… i.e.: 755, 777???)
BTW: Thanks for the plug-in and taking the time to help me with it.
~Mark*
To make the imgcache directory world writeable, use chmod 766…that should do it. That will set group and world to have read and write access, but not execute.
Sorry to report that it still doesn’t work, though the area is marked off in the message for the pic. The file /imgcache is chmod 766, file /images is chmod 755. All else *appears* to be as instructed. I get the following message:
“Warning: imagejpeg(): Unable to open ‘/home/omar/public_html/bullspeak/images/imgcache/132-AVmedal.jpg’ for writing in /home/omar/public_html/bullspeak/wp-content/plugins/LazyImageLayout.php on line 345”
Any other ideas? I’ll try anything.
~M*
thanks david, it’s now my rss feed is validate
This is a great idea! I have a small problem though.
If you check the URI above, I have one post in there testing out this plugin, called ‘test post’. The image is actually at that path (try appending the LZIL error path into the address bar and it will show the image), but when viewing the post it says “LZIL: file not found:”
What am I doing wrong?
Ok, not sure what I did exactly, but got it working . . .sorta.
Now it seems to be dumping the image ON the page. In other words, it appears to be in a floating div or something and floats over the boundaries of the particular post.
Oh, and the URI is: http://www.tekmonki.com/fotos.php
It looks like you got it all working! Any other problems? I’m looking at the site in FireFox, and it seems fine.
I’ve installed the program, everything should be working however I keep getting this:
/home/your/site/wordpress/images/images/personal/008.jpgerror every time I try to add an image. I’m just typing in the!@(images/personal/008.jpg url “Justin Trek”)…and I’ve also been getting an error on my actual site complaining aboutFatal error: Call to undefined function: get_preview_photo() in /home/.wadeheater/astralp6/creative-logic.net/wp/index.php on line 46
I checked through the plug in file hoping to find some way to edit the default path, but I can’t find one. Any suggestions?Hi Nicole
My best guess is that you need to edit the upload path in your wordpress options…LZIL uses that as the default path.
1. Login to the Admin, choose “Options” then “Miscellaneous”.
2. In the “Allow File Uploads” box, change the destination directory and URI address.
3. See if the error goes away when you add the image.
I’m not sure what’s up with the “undefined function” error you’re describing… you might not have a compatible version of PHP installed with the required image sizing functions.
See what happens with the upload directory.
Beautiful…that actually works great now. Thank you very much. :)
I’ve looked around at WordPress photo plugins across the net, and this one looks best and by far the most versatile~ I’m a beginner with this stuff, but I’ll try it out tonight – I’ll let you know how it goes~
Thanks for making it available~ ^^
I installed it and it seems to work, but the image simply won’t show…
See: http://www.locomote.org/index.php?p=229
Any ideas what’s wrong?
Hi loco mote
If you look at the source for your page, it looks like you have an extra space in the definition of your upload path. Check your Upload Path settings, and make sure there isn’t a space at the end of it.
It’s working beautifully now – makes my site look a million times better~!!
1 problem still though: I can’t put two pictures together…the second one simply doesn’t show up at all. If I push it down a paragraph, it shows without problem…
More tests show if I simply put a space between the two lines, then it works~ ^^;; I can just do that – thanks~ ^_^
I don’t know a thing about coding, but if someone with free time does I would love to see this with an extra bit where when you click on the thumbnail, it will pop up to that image in a full-screen slideshow of all the blog’s pics, with the titles as captions. Think it’s possible?
Hey Loco Mote
You’re probably using LZIL without Markdown installed, which makes it work a bit differently as far as spaces go. Noted for a future revision… thanks for posting your notes!
As for an automatic slideshow, anything is possible! But you’ve got to find someone with the time and interest…unfortunately, that person isn’t me at the moment. There are other wordpress plugins like Exhibit and Gallery that I believe offer this kind of function. I wrote LZIL to be pretty limited but easy to use in posts.
Anyway – it kicks anus as is~ Thanks~ :)
Well I just upgraded to WP 1.5 and I cant make it work properly in firefox 1.0. The thumbnails are like 10 px narrow.
In IE6 it looks OK. Any ideas ?
I haven’t yet upgraded to WP 1.5. Can you post a screenshot of the IE6 versus Firefox layout somewhere?
I’m trying to make LZIL work with WP 1.5. In the installation instructions it does not mention where to load your images to. I created a directory in wp-content/images but dont know where this imagecache is?
Hi Andy,
My best guess is that you need to edit the upload path in your wordpress options…LZIL uses that as the default path. I don’t know where this is in WP 1.5, as I haven’t upgraded yet.
I’ll update the installation isntructions to make that more clear.
It crashed on me when I upgraded to 1.5~
The error message is:
“LZIL: couldn’t create cache directory, error==1
/home/cotsford/public_html/locomote/wp-content/imgcache”
I tried just making a folder called imgcache through my ftp, and the whole thing went totally wacky – giving me empty borders where the pictures should be and this message at the top of my post:
<blockquote cite=“Warning: imagejpeg(): Unable to open ‘/home/cotsford/public_html/locomote/wp-content/imgcache/250-sky.jpg’ for writing in /home/cotsford/public_html/locomote/wp-content/plugins/LazyImageLayout.php on line 345
Warning: imagejpeg(): Unable to open ‘/home/cotsford/public_html/locomote/wp-content/imgcache/150-flagnseagulls.jpg’ for writing in /home/cotsford/public_html/locomote/wp-content/plugins/LazyImageLayout.php on line 345
Warning: imagejpeg(): Unable to open ‘/home/cotsford/public_html/locomote/wp-content/imgcache/440-seagull.jpg’ for writing in /home/cotsford/public_html/locomote/wp-content/plugins/LazyImageLayout.php on line 345”>
Got-it~
There was a problem with CHMod.
1 other thing…is it possible to make the popup image display screen-size rather than full-size?
I figured it out…just use url rather than popimg, and it will open in a window, so if it’s IE it’ll just scale down automatically.
I don’t understand this at all, but on my blog, if I activate Markdown, the pictures all go crazy. As long as Markdown is deactivated, everything works. I just have to trial-and-error to get it to show up correctly~
Loco,
Wow, you’ve been busy!
1. You don’t create the imgcache directory yourself…let LZIL do it for you. As you’ve found, you’ll mess up the directory permissions if you don’t CHMOD it. LZIL attempts to emit useful error messages so you can debug things like this
2. The popimg: tag opens up the full resolution image…if your image isn’t large, then the popup image won’t be large either.
If you are seeing a small thumbnail instead of a large one when you click the image, you are probably specifying the image in imagecache. Don’t do that!
I’ll have to add a check to LZIL to make sure people aren’t specifying the contents of the imagecache directory, and clarify the directions.
Hi Dave,
This plugin works well but I’ve only one problem. It shows thumbs just 10 pixels width(10×200). if you look at my page you can see.