LazyImageLayout and WordPress 2.0

LazyImageLayout and WordPress 2.0

For instructions on use, see the original post.

WordPress 2.1.x Issues

LZIL is compatible with 2.1.x, as far as I can tell! There’s also a new version, version 0.45, that adds a few new features:

  • Thickbox support: If you’re using Cody Lindley’s ThickBox CSS image gallery with jQuery, then you can use the new thickbox: selector instead of popimg:. Use thickbox:gallery to use the gallery features (gallery can be whatever you want).

  • Captioning: The Javascript popup code now adds some very simple captioning to pop-up windows. If you don’t like it, you can modify the plugin code and turn the $lzi_caption to false.

  • Improved CSS: I’ve made some updates to the CSS to show rollover states. Also, when there is no popimg: or other URL, a border is no longer shown. This gets rid of the false javascript cursor for non-clickable images.

  • Internal Bug Fixes: There was a bug in calculating the width of the image, which meant that the $lzi_full+width variable was set 10 pixels too small. It now matches. This is mostly useful for people using fixed-width site designs.

» download LazyImageLayout 0.45

WordPress 2.0.x Issues

  • April 14, 2006: Asperientje has released a version of LZIL that adds a few more features I never got around to implementing: centering images, borderless images, and so forth. Check it out!!! It’s an unofficial branch. UPDATE: If you are using this version of the plugin, you should contact Asperientje regarding issues with it, not me. I have not personally reviewed the code in his plugin.

  • Mar 02, 2006: The new version of LZIL adds the ability to delete cache files. Hooray! It’s also a little more informative on the Option page. Download 0.40. Please exercise caution when testing the cache delete functionality. I am also reviewing security of the plugin; if any PHP gurus want to give me some tips, I’m all ears! And yes, this one does now detect the wp-content path without using the fileupload_realpath database setting.

  • Feb 28, 2006: I’m working on a new version of LZIL that will detect the upload path in a different way. This has a new options page that doesn’t yet do anything, but will allow you to clear the cache and set other parameters without editing the plugin code.

  • The new WYSIWYG editor in WordPress 2.0 may cause formatting alignment issues with the current version of LZIL (0.36). The workaround is to edit your post in HTML mode.

  • The reported path problem was just a CSS bug in someone’s template. LZIL version 0.36 is still fine. I’m still not sure if WordPress 2.0 still has the fileupload_realpath setting in the wp-options table. Will have to install a new db and blog to know for sure. Last updated Jan 3, 2006.

  • QUESTION: Has ‘wp-options’ database table dropped fileupload_realpath and fileupload_url? There is currently no way to set these values in WordPress 2.0. Haven’t yet found definitive list of option changes. LZIL is dependent on these options to correctly find the image relative to the wp-content directory. Need feedback from testers.

If there are any problems, leave a comment and I’ll do my best to address them as quickly as possible. I’m planning on bringing LZIL up to spec with an admin panel plus several user-submitted enhancements, in January of 2006 when I can get a moment. LZIL may not be necessary with the new thumbnail features of WP 2.0, but I’ll take a look at what it does. Integration would be better!

Debugging Help

To make it easier for me to diagnose your problem, please make sure you do the following:
  1. Provide a URL to a page on your WordPress blog that is exhibiting the problem, and identify the area where it is occuring. Sometimes it’s not obvious to me!

  2. Tell me what browser you’re seeing the problem in.

  3. Tell me what version of WordPress are you using.

  4. Send me the !@ line that you’re using to show the thumbnail.

  5. Tell me if you’ve modified the CSS for images, anchors, or javascript related to displaying images (you don’t need to add any CSS of javascript for LZIL to work; it inserts it automatically).

<

p>Feel free to post a comment here, or email me if you are including sensitive server information.

41 Comments

  1. Christoph 18 years ago

    Thanks for LZIL. I works for me with WordPress 2.0! I have deactivated the WYSIWYG editor as I am a strong fan of Markdown. Hence I would like to see Markdown, LZIL and WordPress continue to work as a team.

    Cheers,
    Christoph

  2. Mr. Pink 18 years ago

    I found another bug for wordpress 2.0
    Linked image: becomes this:
    http://www.ikbenpink.be/wp-content/temp/LZIL2.png.png

    When it should been this:
    http://www.ikbenpink.be/wp-content/temp/LZIL.png.png

  3. Dave 18 years ago

    I’ll need to create an options page to allow selective override of the `fileupload_realpath` value

    Upgraders probably already have their fileupload_realpath set. I am having trouble finding documentation on what’s in and what’s out in WordPress 2.0, so I have to determine this experimentally.

  4. Matthew Fass 18 years ago

    hi dave
    i love the idea of this plugin but i’m having trouble getting it to work. The thumbnails are being created properly but they’re not displaying properly on the page. I’ve looked carefully at the source code for the page and all seems right and the image loads when i use the long url http://www.matthewfass.com/words/wp-content/imgcache/images/132-GFcard06.jpg. Could you help me with this? Many thanks.

  5. Dave Seah 18 years ago

    Matthew: I think it’s a path issue. Your blog lives in a subdirectory of your main site, so you need to make sure you set the WordPress General Options to point to it. LZIL needs that info to work properly.

    <ol>
    <li>Go to WordPress Admin</li>
    <li>Choose Options</li>
    <li>Choose General</li>
    <li>Make sure “WordPress Address” points to http://www.matthewfass.com/words/</li&gt;
    </ol>

    See if that clears up the problem.

    If that doesn’t work, try installing the debug version of LZIL and send me an email.

  6. Matthew Fass 18 years ago

    hi dave
    thanks for your help
    i got it working – and yes, it was a path issue.
    Matthew

  7. Semih 18 years ago

    Hi Dave,

    images cannot be shown on my pages. my blog adress is “www.desinner.com/blog” and my image directory is “www.desinner.com/blog/wp-content/uploads/2006/01” so I use this !@(uploads/2006/02/image.jpg) but it gives error “LZIL: file not found:” so is there something that I do wrong?

  8. Dave Seah 18 years ago

    Semih:

    My first guess is that you are probably not spelling the name of the file correctly. Please show me a specific post on your blog that is exhibiting the behavior, and I’ll be able to help you much more effectively.

  9. Marius Pop 18 years ago

    Hi Dave,

    I just installed the plugin to an upgraded wp1.5 ->wp 2.0
    And i saw that in the options table the fileupload_url wasn’t set corectly, altough the site was /blog from the begining of it’s first install the value there needed /blog/ in front in order to have plugin working.
    So my guess is that new wp2.0 don’t use fileupload_url field at all, and that’s why you need to edit it by hand.

    Here is a quick fix that worked for me:

    UPDATE wp_options SET option_value = ‘/blog/wp-content’ WHERE CONVERT( option_name USING utf8 ) = ‘fileupload_url’;

    just replace /blog/ with /your_path_after_blog_url/
    (For ex: http//site.com/path_to_blog/ you will put /path_to_blog/wp-content)

    Also if WP 2 dont have this variable here is command to insert it (or if the above retunr an error).
    INSERT INTO wp_options VALUES (’‘, 0, ‘fileupload_url’, ‘Y’, 1, ‘/blog/wp-content’, 20, 8, ‘’, 1, ‘yes’);

    Thanks,
    Marius

  10. Person-that-needs-help :) 18 years ago

    Hello, I’ve used your LZIL plugin for wordpress 2.0, and it worked fine. And I’ve recently upgraded to wordpress 2.1, and I’m not sure (since I haven’t paid much attention to the posts), I’m 80% sure that the plugin was working fine. However, today when I checked carefully, I get an error…

    LZIL: unsupported image type:2
    /home/cutematt/public_html/wordpress/wp-content//uploads/2006/01/Bulldog.jpg

    The line I used was:
    !@(/uploads/2006/01/Bulldog.jpg: popimg: “Text Here”)

    The upload path / destination directory I have is:
    /home/cutematt/public_html/wordpress/wp-content

    The image I wanted was: http://www.cutematter.fh-net.com/wordpress/wp-content/uploads/2006/01/Bulldog.jpg

    Much Thanks,
    Person-that-needs-help.

  11. Dave Seah 18 years ago

    Hi PtnH:

    I wonder if the extra “:” you have after “Bulldog.jpg” is messing you up. I’m not sure what LZIL will do in that situation…it might just die.

    As with all requests for help, please include a link to the non-working page.

  12. xpan 18 years ago

    Hi,

    I just wanted to ask if there is a way of absolut aligning the image at the top of the post. If you can see in my blog (http://blog.xpan.gr) “comments” and “date” are right aligned to the image when the text is not big enought to wrap the image.

  13. Dave Seah 18 years ago

    Hi xpan!

    If you are talking about the Photo3 entry, you can try this:

    !@—-

    That will insert a <br clear=“all”>, which would fix the problem. Example:

    `!@(images/blahblahblah.jpg popimg: “My Image)` 
    `This text is too short to wrap.` 
    `!@—-`

    Give that a try, and let me know if it fixes your problem.

  14. heiste 18 years ago

    I just installed LZIL on wordpress 2.02 and it works like a charm. Thanks very much for tis great plugin

  15. dozer 18 years ago

    I’m using LZIL .36 still.  I recently moved to a new server and there is a new problem.  The thumbnail is not getting created.  Can you tell me things I can look for?  (Since I haven’t posted anything for a while I’m not sure if this problem is related to the move to a new server or the upgrade to WP 2.0).

  16. Dave Seah 18 years ago

    It might be that the wp-content folder is not world-writeable, which doesn’t allow LZIL to create the imgcache directory or create thumbnails. There might not be an LZIL warning message for that…I should add that to the installation routine.

  17. dozer 18 years ago

    I am checking out the wp-content folder but am confused.  In the folder ‘blog’ (my wordpress installation) I have a images folder and a wp-content folder.  So when you say the wp-content folder is not world writeable, it is really the images folder which needs to be writeable, correct?  The imgcache folder is in the image folder.

  18. Dave Seah 18 years ago

    That would be correct, but I see this isn’t the problem after all (LZIL does check that it can create the imagecache directory). I had forgotten that your problem was actually that you have your image folder elsewhere. So just set the $upload_path and $upload_url correctly on lines 280 and 281, and things should be OK. Remember that a path is a directory (/server/website/directory/somewhere/) and a url is what you type into a browser (http://blogwebsite/image) and aren’t the same thing.

  19. Helge 18 years ago

    This seems to be a wonderful plugin! However, the HTML code of my index file gets cut when I use the functions you’ve specified above, f.ex.

    !@(uploads/close-up.jpg)

    Do you know why?

  20. Dave Seah 18 years ago

    Helge: If you post a link to the problem post, that would be very helpful…otherwise, I have no idea what you’re seeing! A screenshot could help too…try emailming me via the contact form, and we can work it out.

  21. Mr. Pink 18 years ago

    i’ve have a little prolem, i’ve just installed a new theme but the text won’t allign next to the picture…, you can see it here. it’s not a bug in LZIL but something in my css but what?

  22. heiste 18 years ago

    Hi Dave,
    I’m using your lzil 0.4 and think its great (told you before). I was trying to mix it with lightbox  for some effect when opening the big pic. But I failed misserable. Do you plan to integrate something like that in future or do you can give me a hint. I managed to add the rel=“lightbox”. The background.png loads but the original pic does not load. if you need the changed lazyimagelayout.php let me know and I will post it. thanks in advance and sorry to trouble you

  23. Youx 18 years ago

    Heiste, i succeeded in making it work with lightbox.
    It’s not really what you may call a “clean” way, but it works.
    Just get to the line :

    $result =  “<a>”;

    and change it into :

    $result =  “<a>”;

    Lightbox needs two things :
    * the rel=“lightbox” tag
    * the path of the image in the href tag
    you probably forgot the second one.

    Could you look into integrating this in a clean way Dave? It would be reallt great, something like a lightbox flag – I’m not really aware of this php-markdown stuff –
    Thanks :-)

  24. Youx 18 years ago

    Seems like your wordpress had a few problems with my pasted code … the output is all messed up …
    So here’s a patched version :
    http://hugo.coding-badger.net/files/LazyImageLayout.php.txt
    There’s only one line changed, and as i said, it’s not a clean way.

  25. Dave Seah 18 years ago

    Hey Youx:

    I’m not familiar with lightbox, so I’m not sure what you’re talking about here or how it’s somehow my fault that I forgot something here. I just looked into LightBox and it does look pretty dang cool…I’ll look into it when I get some time, though that isn’t likely to be for a while.

  26. Youx 18 years ago

    Oh, not your fault or anything like this dave, but reading them again, I guess my posts weren’t really clear :)

    <ul>
    <li>I was first talking to Heiste, who had forgotten to put an href tag, and wondered why lightbox didn’t work with lzil then, so I explained him. ^^</li>
    <li>However, when I pasted the code to be changed, some weird thing happened, so my first comment renders strangely (at least here).</li>
    <li>Since it pasting in didn’t work really well, I put a link tp a copy of the modified LZIL, which should work with LightBox (but it’s just a quick fix)</li>
    </ul>

    Reading back this post, I’m not really sure wethere my new explanation is better or worse … oh well … :s ^^

    (btw yeah, lightbox is really neat :) )

  27. Teresa 18 years ago

    Hey Dave,

    I’ve been experiencing some problems with the LZIL script and I just don’t know where the issue is.

    The line I use is:
    !@(images/2006/08/1week3zm.jpg popimg: “window title”)

    The error I get is:
    LZIL: unsupported image type:2
    /home/cutematt/public_html/blog/wordpress/wp-content/images/2006/08/1week3zm.jpg

    The link of the page is:
    http://teresa.fh-net.com/blog/wordpress/

    The wordpress I use is:
    2.0.4 i believe. The latest one avaibale for download

    Browser:
    Both IE and Firefox

    Desired Image:
    http://teresa.fh-net.com/blog/wordpress/wp-content/images/2006/08/1week3zm.jpg

    Thankyou,
    Teresa

  28. Dave Seah 18 years ago

    Teresa: The error reported is a problem from PHP not being able to understand the image you’ve uploaded…LZIL attempts to use the GD code library to resize the thumbnails automatically, and if the library isn’t present in your webhost’s version of PHP, it fails. I was able to download and test with your test image through my blog, so I think it is your hosting configuration.

    Try a few other images and see if the problem persists for all JPEGs and GIF files. If GIF works and JPEG doesn’t, that’s a sign that maybe the GD library has limited support compiled in. Everything you’ve typed above looks correct to me. Thanks for being so meticulous in reporting the steps to show the problem!

    Good luck!

    Dave

  29. Teresa 18 years ago

    Thankyou Dave for the quick reply! I posted the problem… late last night? And I wake up and here the solution (/explanation) is explained ! :)

    Apparently some other hostee of my host has the same problem with the GD library thing, and my host promised to get the library re-installed today.

    Oh and by the way, I tried the LZIL script with a GIF file, and that didn’t work either. I guess they’ll all work when the library is installed.

    Thank you so much again!

  30. Mark 17 years ago

    Sorry to sound so dumb, but I installed this plugin and saw absolutely nothing pertaining to it in the backend…how do you use this plugin??

  31. Dave Seah 17 years ago

    Not dumb at all, Mark…this plugin isn’t actively supported, so this update is mostly for existing users. I modified the post to direct people to the original post for instructions. It basically is an in-line thumbnail embedder, but it’s geared for a more manual workflow (no upload management).

  32. kipsus 16 years ago

    I’m a great fan of Markdown and LZIMG.

    But one thing has been troubling me. For linked images :R parameter works great. For static ones it doesn’t.

    I looked up the source code and found that lzimg-right style is only defined for <a> and nested <img> tags but it gets assigned to <img> with no <a>‘s if there is no “popimg:”.

    Here’s what I mean:

    /* Used by LazyImageLayout */
            
    a.lzimg-left { floatleftmargin4px 16px 8px 0px}
            a
    .lzimg-right { floatrightmargin4px 0px 8px 16px}
            a
    .lzimg-nomargin { floatright;    margin4px 0px 8px 0px}
            a
    .lzimg-left imga.lzimg-right imga.lzimg-nomargin img {
                display
    block;
                
    border1px solid #ccc;
                
    background-color#fff;
                
    vertical-aligntext-top;
                
    padding4px;
                
    max-widthnone;    /* kubrick sets this to 100% for some reason */
            
    }
            a
    .lzimg-left:hover imga.lzimg-right:hover imga.lzimg-nomargin:hover img {
                border
    -color#1a90f7;
            
    <p><img src="yada/136-AA34CA.jpg" width="136" height="186" alt="yada" class="lzimg-right" /></p
  33. duicide 16 years ago

    the popimg: flag doesn´t work for me. i call it with !@(images/2007-09-29_3tonbar/IMG_1715.JPG popimg: “test”) but i can press the left mouse button as often i want, nothing happens…. markdown is installed.

  34. Dave Seah 16 years ago

    duicide: Check that the javascript is present. Do this by looking at the source code for the page with your test post on it. I can’t help if you don’t provide an example of it not working.

  35. Dave Seah 16 years ago

    Kipsis: Good catch! I had encountered the same thing recently…will look into that.

  36. duicide 16 years ago

    which javascript? :D this is the first time i read, that i have to enable it before. did you write this in your manual?

    example: http://durchst.de/pics_2007-09-29/

    i tried thickbox a few seconds before, and it works fine (3rd image for example).

    p.s.: no, i´m not the guy on the picture :D

  37. Dave Seah 16 years ago

    duicide: Ordinarily the javascript is produced by the plugin automatically, so you don’t need to do anything. However, I am not seeing it included in the source of your test page. I am also not seeing the CSS that goes with it.

    For some reason, your version of WordPress is not properly calling the “wp_head” action, which calls a function in the plugin called LZI_EmitImageCSS(). This may be due to a conflict with another plugin, so you might try disabling your other plugins except for LZIL to see if it starts working. If this happens, then you need to figure out which plugin it is. It would also be helpful for you to post what version of WordPress you are using.

    I’m assuming that you have not modified the source code for LZIL either in any way.

  38. Uffe Andersen 16 years ago

    I have some xhtml validation problems, when using LZIL. The javascript part, that is contained in the parsed page, needs to be enclosed in //<![CDATA[ and //]]> (hope the code survives parsing) and forward slashes inside the js-code need to be escaped. That leaves me with only this line:

    padding: <?=$lzi_default_img_padding?>

    which does not validate as XHTML 1.0 Transitional.

    I have a diff-file for my changes, but need somewhere to send it ;-)

  39. Uffe Andersen 16 years ago

    Forgot to mention, that I use LZIL with WordPress 2.5.

  40. Victor 14 years ago

    I appreciate that this is an old thread but the previous poster mentioned that we uses LZIL with WordPress 2.5 any advise about 2.9 ? Still good to go ?

  41. Dave Seah 14 years ago

    It actually works fine in 2.9.x…I’m using it on my Agenceum Blog, which is the latest WP. It’s a little old-school, and doesn’t have all the fancy admin interface things, but it still works for my workflow.