Was just reading on Slashdot that the first real JPEG virus with a real payload was found in the wild, posted to USENET. It installs remote control software on your computer, allowing ne'er do wells to control it as if they were actually sitting at it.
This is a disturbing class of virus because you could be infected by viewing a picture on the Internet. Programs that use Microsoft's GDI+ library (a piece of code for manipulating graphics) are at risk. Microsoft has a long list of patched applications and updates too. So patch immediately.
It's also disturbing because this is a pretty common code library that a lot of newer applications use. Since it's a code library, it's shared among programs. So any program that displays graphics potentially is at risk, if they use the JPEG decoding function of the library.
As an experiment, I download SysInternal's Process Explorer to see what programs seemed to be using GDI+. Windows Explorer for XP does, but nothing else appears to. But I'm not as familiar with Windows application architecture as I'd like, so this isn't much to go on.
Your email program may also be at risk. I use TheBat!, which doesn't display graphics by default, but you CAN view attachments. Since it's German software, it's probably all hand-coded and not suceptable.
Bah. This sucks.
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.
» Installing LZIL
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) / 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.
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_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
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
Michel Fortin was kind enough to reply regarding my post on the Markdown mailing list. He pointed out inconsistencies in the syntax I had chosen, and suggested some more forward-looking approaches.
As a result, I was able to separate my code from Markdown, so it's now "quicky and independent", just right for my own website. A pretty instructional journey.
As I would expect, leaving the original Markdown image syntax alone would be preferable (this was my thought too), but I didn't know how to actually add the additional parameters I needed (width, alignment, etc). Starting from the actual PHP-Markdown source allowed me to develop the core ideas behind the image features I wanted, but my inexperience with PHP, WordPress--heck, all of this--was lacking. So I just hacked, copied/pasted code with Markdown to achieve this.
Michel suggested something I hadn't considered...using special URLs within the existing Markdown image framework, then running another filter AFTERWARDS that keyed off of that. It could look for my own pseudo-protocol identifiers, and then substitute my own formatting.
The problem is to get a link, the syntax is basically the image syntax embedded in the link syntax:
`[](link/url "link-title")
And it's rather cumbersome. And the image formatting I'm doing needs to invoke a class for the A tag and for the image tag.
In the interest of separating from Markdown and working in the future, perhaps the thing to do now is dump the ref-id functionality and make an independent filter. So that's what I'll do next!
My philosophy:
* Retain the formatting control from MDIH
* Retain thumbnail generation
* Don't interfere with Markdown syntax
* Maintain terse-as-possible syntax, which probably means it won't be compatible. So be it!
So here's what I did...
Tried stripping out all the code except for my own, and see what happens. Hm, there is a conflict between Markdown and my image syntax. I'll first run it AFTER Markdown, at priority 7.
Hmm, the images turned into links. Ah, it's sees the syntax. So I need to run my code before Markdown runs. So let me change the priority to 5.
That seemed to work. A lot of the special stuff that Markdown does is for other features, but I'm doing some pretty straight-forward replacement.
- One problem is that I can't show my !@ code inside a code block because it executes before Markdown escapes it. That sucks. The alternative is to change my image syntax so it doesn't look like Markdown, which is what I should probably do.
Let's evaluate the syntax. Can it be made more terse using the conventions expressed? And what would make sense for breaking away? The new syntax is...
!@ ( path_to_image:asize url "alt-text)
...without the space between the @ and (. Since the filter runs outside of Markdown, the magical code quoting doesn't work.
- I'm using the syntax
!@ --- (again, without the space) to designate a break. The ---, however, gets turned into a long dash. Therefore I installed TWO filters: a LazyImagesPre() which runs at priority 5, and a LazyImagesPost() which runs at priority 7. So I get the --- before Markdown does.
So that's the new syntax.
!@img(asize)
!@(image_path:asize)(url title) would break the match, and then it could run after Markdown.
I uncovered this picture while going through a pile of old 5.25" disks. It's my old Apple //e clone, circa 1984-5 on a mountaintop in Taiwan. Check out the bitchin' boom box!
