Lazy Image Layout 0.36

Lazy Image Layout 0.36

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.

Grendizer 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.

Gundam

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)


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

Agent IntrigueKorves BaseMEK's Interface


Crixa XO ShipCrixa TitleDueltris Screen


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

74 Comments

  1. dozer 20 years ago

    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.

  2. Dave 20 years ago

    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! :-)

  3. Randy 20 years ago

    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

  4. Dave 20 years ago

    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

  5. Marc 20 years ago

    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?

  6. Dave 20 years ago

    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.

  7. Marc 20 years ago

    Tried the underscore issue with the new release, but to no avail.  Maybe I’m missing something…

  8. Dave 20 years ago

    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.

  9. Marc 20 years ago

    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

  10. Nikolas Kyramarios 20 years ago

    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

  11. Dave 20 years ago

    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.

  12. Nikolas Kyramarios 20 years ago

    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.

  13. Charlene 19 years ago

    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!

  14. Alanf 19 years ago

    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.

  15. Dave 19 years ago

    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

  16. Alanf 19 years ago

    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?

  17. Dave 19 years ago

    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

  18. isnaini 19 years ago

    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

  19. Dave 19 years ago

    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.

  20. Alanf 19 years ago

    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.

  21. Dave 19 years ago

    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.

  22. Mark Jones 19 years ago

    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

  23. Dave 19 years ago

    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.

  24. Mark Jones 19 years ago

    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*

  25. Dave 19 years ago

    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.

  26. Mark Jones 19 years ago

    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*

  27. isnaini 19 years ago

    thanks david, it’s now my rss feed is validate

  28. Jk 19 years ago

    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?

  29. Jk 19 years ago

    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

  30. Dave 19 years ago

    It looks like you got it all working! Any other problems? I’m looking at the site in FireFox, and it seems fine.

  31. Nicole 19 years ago

    I’ve installed the program, everything should be working however I keep getting this: /home/your/site/wordpress/images/images/personal/008.jpg error 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 about Fatal 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?

  32. Dave 19 years ago

    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.

  33. Nicki 19 years ago

    Beautiful…that actually works great now.  Thank you very much.  :)

  34. Loco Mote 19 years ago

    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~ ^^

  35. Loco Mote 19 years ago

    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?

  36. Dave 19 years ago

    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.

  37. Loco Mote 19 years ago

    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…

  38. Loco Mote 19 years ago

    More tests show if I simply put a space between the two lines, then it works~  ^^;;  I can just do that – thanks~  ^_^

  39. Loco Mote 19 years ago

    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?

  40. Dave 19 years ago

    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.

  41. Loco Mote 19 years ago

    Anyway – it kicks anus as is~  Thanks~  :)

  42. kyramas 19 years ago

    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 ?

  43. Dave 19 years ago

    I haven’t yet upgraded to WP 1.5. Can you post a screenshot of the IE6 versus Firefox layout somewhere?

  44. Andy 19 years ago

    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?

  45. Dave 19 years ago

    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.

  46. Loco 19 years ago

    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”>

  47. Loco 19 years ago

    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?

  48. Loco 19 years ago

    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~

  49. Dave 19 years ago

    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.

  50. Semih 19 years ago

    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.

  51. Dave 19 years ago

    Hi Semih,

    It looks like the output is correct (the width is specified to 132 pixels, the default). However, there is a conflict with the CSS at /themes/default/style.css that’s causing this to mess up. LZIL uses a class called “image-left”, which might be defined in the template. I think this is the cause.

    I’ll upload a new version of LZIL (0.33) that changes the class names to something more lzil-specific…this might fix your problem, and future conflicts.

  52. Dave 19 years ago

    Loco,

    Regarding markdown messing up the formatting of your site, I see the same squished thumbnail problem that Semih reported. Hmm. Maybe this is wider-spread than I thought.

    The main difference in using Markdown with LZIL is where you put carriage returns in your paragraphs. This is a side effect of how Markdown crunches out whitespace.

    * When using markdown, put the !@( … ) tag on its own line, followed by a carriage return, then followed by the paragraph you want the image to be aligned with.

    * When NOT using Markdown, eliminate the carriage return after the !@( … ), and make sure there are no spaces between the beginning of the text and the end of the LZIL !@( … ) tag. This will avoid that funny “the top of the image deosn’t align with the top of the text” effect.

  53. Rustam 19 years ago

    Hi!

    Really great work ! I’ve just install it on WP1.5 and all works fine :)

    Would it be good to make another option to the tag, for example !@(img.jpg:n132 url “Title” “Thumbnail description”), and post this description inside the thumbnails’ border with proper css?

    Anyway, thanks very much and sorry for my english – it’s not my native language ;)

  54. Rustam 19 years ago

    And there’s one thing – LZIL don’t work properly with rss feeds :(

  55. Dave 19 years ago

    Hi Rustam

    Yes, I’d like to eventually include captions for photos, but it would require me to rewrite a portion LZIL and I haven’t had time to do it. It’s on the “todo” list. It probably will just show the title under the caption.

    I don’t use RSS myself, so I’m not exactly sure what it’s supposed to do or how to support it properly. Last I checked it was generating valid RSS, but with no images inside.

  56. Rustam 19 years ago

    Probable there is good filter : add_filter(‘the_content_rss’, ‘’,1);

    will try tomorrow… may be it will works good…

  57. Latente! 19 years ago

    hey, take a look

    Warning: getimagesize(/home/virtual/site117/fst/var/www/html/blog/wp-content/paleta1.jpg): failed to open stream: Permission denied in /home/virtual/site117/fst/var/www/html/blog/wp-content/plugins/LazyImageLayout.php on line 273


    klhsñhcwiohfcwvlkdfnv

    LZIL: unsupported image type:
    /home/virtual/site117/fst/var/www/html/blog/wp-content/paleta1.jpg

  58. Latente! 19 years ago

    works in WP 1.5???

  59. Dave 19 years ago

    Latent:

    It should work in 1.5.

    Your error “permission denied” seems to indicate a file permission problem on your host ISP. So it looks like two things happenned:

    (1) PHP can’t open the file you specified
    (2) As a result, LZIL can’t do anything…it got an “empty” file as a result of the “permission denied” error.

    You should double-check your file uploading and permissions setup on your web host. One way to check is to see whether you can actually see the file in a regular web browser, something like http://yoursite.com/blog/wp-content/paleta1.jpg

  60. Latente! 19 years ago

    great!!! now works.. the permisssion of the image was 000 ;-)

    now the image dont respect the next post and appear beside the next post title. i dont know how repair this…

    by the way, you are one of the few people in the world of internet that help me with so many data. thanks.

    sorry for my english

  61. Latente! 19 years ago

    OK. now the fra,me of the image appears.. but the image not. just a ?. the image link is missing.

    and another thing: the text aligment doesnt respect. all the text of the post ins over my template cross over it.
    thanks for you help

  62. Dave 19 years ago

    Latente:

    It’s hard to tell what’s wrong without seeing the page and its source. Your URL doesn’t seem to work (http://www.latenteblog.com/)…at least, it’s not working for me.

  63. Latente! 19 years ago

    Dave, thanks for all teh Help. just one question more: there´s a way to put imagen of less than 132 px?? can I puta image of 80x80px??

  64. Dave 19 years ago

    Yes, LZIL has several built-in options for sizing (width only). Check the documentation for more info, but to make a 80 pixel wide image, you’d do this:

    !@(path/to/image/mypic.jpg:L80 popimg: “my picture”)

    Likewise, to put it on the right side, you’d do

    !@(path/to/image/mypic.jpg:R80 popimg: “my picture”)

    You can change the default size to something else by modifying the code…there are several variables defined at the top of the plugin file that you can modify easily.

    Dave

  65. Digital Ruse 19 years ago

    Wow, this is really nice.  There are only a couple of things holding me back from using it full time.

    1.) It would be cool to have an option that the image(s) are centered and the text is on either side.

    Example:
    ———————-
    I love cheese, I like these cheeses:
    [space]
    [CENTER][IMG][IMG][IMG][/CENTER]
    [space]
    But that isn’t the half of it…
    ———————-

    2.) An option to have it so that the plugin will assume that all your thumbnails should be pop-ups.

    3.) Something that doesn’t make thumbnails look linked if they don’t pop-up.  I know it just goes to a [removed]; that pulls up the pop-up if need be, but some people might think that your thumbnails are broken, and never try any of them if the first few don’t “work.”

    I eagerly look forward to seeing what you do with this.

    -DR

  66. Dave 19 years ago

    Hi Digital Ruse,

    Those are all great suggestions. Thanks!

    (2) and (3) will have to await the next version, which I’ve been putting off due to other projects.

    (1) You can have now if you have a fixed-width layout, and calculate the widths accordingly. There’s a formula in the instructions part of this entry.

    If you’re comfortable rooting around in PHP, you can change some of the default behavior pretty easily yourself. The code is pretty straightforward.

    Dave

  67. Digital Ruse 19 years ago

    Something else… is there a way to have it so that it recognizes spaces in file paths?

    !@(Lost Files/img.jpg:L popimg: “My IMG”)

    Gives this error:

    LZIL: file not found:
    /home/theruse/public_html/wp-gal//Lost

    Thanks
    -DR

  68. Digital Ruse 19 years ago

    Oh, and I did already try using   or &nbsp as a temporary solution and that didn’t work either.

    The only reason I found this problem is cause I am trying to avoid redundant images by combing your plugin with simple php gallery.  You can e-mail me if you don’t want to banter about this in your comments section. ^_^‘v

    -DR

  69. Dave 19 years ago

    Hey DR,

    Hm, I don’t think I have space support in. I could add it in a future revision.  I personally am not a big fan of spaces in filenames, so that’s why it’s not implemented. I’ll try to look into this later this week and provide some kind of private patch.

  70. MrJ 19 years ago

    Hi Dave,
    Just installed your plugin but both the thumbnail image and the popup image do not show, the image sizes are correct but appear as broken links.  This is the code I inserted in the post:

    !@(109.jpg popimg: “Shibuya 109”)

    I made a new folder called images in the wp-content folder and that is where my uploads are directed to.  I’m using WP1.5 with this plugin and Markdown plugin both activated.  Any ideas as to why it’s not working?

    Thanks.

  71. Dave 19 years ago

    Hi MrJ,

    Just checked out your site, and it looks like the plugin isn’t activating…maybe you’re doing some maintenance.

    A general debugging tip: When the images aren’t showing, take a look at the generated HTML source using “View Source” from the Browser’s menu. You can usually figure out what the problem that way…usually it’s a path problem. I can see on your site now that your stylesheet paths are having problems.

    I’m not sure why LZIL isn’t working…possibly, you have a conflicting plugin, or you have modified your index.php base template in such a way that it’s not properly invoking plugins.

  72. MrJ 19 years ago

    Dave,
    as I was working on that problem my site suddenly went haywire and shut me out.  I had to do a re-install and am in the motion of activating the plugin again.  I realised that I had downloaded v0.34 when I was having all the problems, just found the newer v0.35 (did you know that you have both of them on your site?)

    Anyway, will have another shot at it and will let you know how it goes.  I compared our source codes before to see where I might of gone wrong and did see notice one difference in the file path.  Hopefully all will go well this time…

    Thanks for your prompt reply.

  73. MrJ 19 years ago

    Dave,
    All systems are go!  It’s working now, I had the image path directory URI wrong (slaps forehead*).  This plugin is the answer to my image prayers- thanks very much!

  74. Dave 19 years ago

    Awesome! Glad to be of service, and I corrected the 0.34 link. I should lock the comments on this post so people start going to the newer one. Please go to https://davidseah.com/projects/lzil to leave comments.