Image handling with imagefield and custom pseudo-filter

This blog entry demonstrates the method for handling images with imagefield. Every blog entry has two fields for images:

• Main image This field can have only one value. The image uploaded here will be displayed at the beginning of the node body. We can use these images in other displays in the future, in 'recent posts' block or 'posts by user' block ect.
• More images This field is set to allow unlimited values. Images uploaded into this field will be displayed after the node body, but only during full node display.

Both fields use lightbox to provide 'zoom' feature. Images are 'grouped' by the ID of the node, this way visitors can leaf the *full-size* images while zoomed in.

Imagefield-imagecache pseudo filter

This is a theme function originally created by Adam Boros. It is implemented in CEUBASE, so all themes can use this feature. The 'filter' (it is not a filter actually) is designed to provide easy and flexible way to insert imagefield uploads inline the node body.

Syntax for any More images is the following: (img:X:PRESET:ALIGN)

where:

• X - the number of the image
• PRESET - the name of the imagecache preset to use
• ALIGN - alignment of the image
• ( and ) - in reality you have to use [ and ] but if i was used those than the filter would replace my example. :)

Note: the above syntax is not needed for Main image -- this image is automatically inserted. Only if user needs More images than the first one.

What is a preset?

Presets are set site-wide and provide modifications for the original image. Unlimited number of presets can be created and they can be modified any time. At the time writing this, there are 4 presets in the system:

• thumb scales and crops to 60x60px
• small scales to 120px wide
• medium scales to 180px wide
• large scales to 480px wide

What is alignment?

Alignment options are set globally in CEUBASE. 3 options are available: left, center, right. Margins for these alignments are also set globally in CEUBASE, however every theme can override them via .css, also it is not recommended. To see this new feature in action please see this 'Lorem' node. You can edit the node to see the replacement patterns in the body.