Frame Building with XBorderFilter (Overview)

XBorderFilter, developed by Jens Tröger, is one of several image filters developed for use with JAlbum. BluPlusPlus uses XBorderFilter to generate frames around images. In combination with background images, XBorderFilter can create very complex and lovely effects in addition to standard single color frames.

The great flexibility of XBorderFilter leads to some complexity. While simple one-color frames are easy to create, more complex effects require a deeper understanding of how XBorder works its magic.

Note: The XBorderFilter documentation written by its author, Jens Tröger, is available here.

Terminology

A simple XBorder filter consists of a collection of XBorderFilter properties and values applied together to an image. A compound XBorder Filter consists of multiple simple XBorder Filters applied consecutively to a single image. The filter is applied to generated slide or thumbnail images; the original image is not altered. Each simple XBorder filter must be assigned a filter number (e.g. ‘filter1’). Filters are processed by JAlbum in sequence, according to the assigned filter numbers.

Basic Concepts

XBorderFilter works by placing a number of bands of color either outside the image (a frame) or inside the image (a border). The width of the bands can vary, as can the degree of transparency. The bands can be blended into each other, and corners can be clipped to create rounded corners (or even oval or circular images!). Shadows can be created in any direction. Brackets are lines drawn on top of frames that begin in the corners of the frame. Both the thickness and the length of the bracket lines can be controlled. An image file can be specified to serve as a background image behind a frame, shadow, or clipped corner. Finally, it is possible to combine XBorderFilters with other filters (logo, text, shadowtext, watermark, etc.) to create very complex and nuanced frame effects.

XBorder Properties

An XBorder Filter is created by specifying a series of properties (see complete property listing/description). Each property must be in one of the following forms:

  • property_name=true/false
  • property_name=a single numeric value
  • property_name=a series of numeric values separated by commas but without spaces
  • property_name=a path to a file used as a background image

Using XBorder Filters with BluPlusPlus

In BluPlusPlus, an XBorder Filter (whether simple or compound) is created by saving its properties in a text file with any desired name and the extension ‘.xbp’. ‘.xbp’ files are stored in the BluPlusPlus-->frames folder. Saved XBorder Filters can be selected for use in new albums on the BluPlusPlus-Frames tab. The following example of an ‘.xbp’ file illustrates how this works:

simple_02.xbp file
# simple_02.xbp
#-------------------------------------------------------------------
# Frame design and xbp file prepared by Gordon Dodge
#-------------------------------------------------------------------

# Add 4-pixel white and 12-pixel blue frames
filter1.class=XBorderFilter
filter1.frWidth=12,4
filter1.frCol=#5E80BE,white

# Add drop shadow (background shifted 100 pixels to avoid left
# border showing if used with Glacer style background)
filter2.class=XBorderFilter
filter2.shWidth=10
# filter2.shCol=#646060
filter2.shCol=$styleNegativeBackgroundColor
filter2.shTrans=10
filter2.shDrop=soft
filter2.bgOffX=100
filter2.bgCol=$styleBackgroundColor
filter2.bgFile=$styleBackgroundFile

Note that each XBorder property is preceeded by ‘filterN.’; this associates the given property with a specific simple XBorder Filter (the filter numbers do not need to be consecutive but the order of the listing is critical). Note also that the case (upper or lower) of each letter in the value is critical.

All of the .xbp files furnished with the BPP skin or downloaded from this site have been commented to assist in following how the image is processed. In the above sample, the collection of properties and values that make up filter1 wrap the image first with a white 4-pixel wide frame, followed by a blue (#5E80BE) frame. The collection of properties and values associated with filter2 add the drop-shadow to the frame.

There are several special variables one can use with BluPlusPlus (but cannot be used with other skins); the variables take their values from the specifed selector taken from the style (css) sheet associated with the style chosen on the JAlbum main window:

  • $styleBackgroundColor—the value of the ‘background-color’ property of the ‘body’ selector
  • $styleForegroundColor—the value of the ‘color’ property of the ‘body’ selector
  • $styleNegativeBackgroundColor—the ‘opposite’ (RGB values subtracted from 255) of the ‘background-color’ property of the ‘body’ selector
  • $styleNegativeForegroundColor—the ‘opposite’ (RGB values subtracted from 255) of the ‘color’ property of the ‘body’ selector
  • $styleBackgroundFile—specifies that the background image is to be taken from the image specified in the ‘background-image’ property of the ‘body’ selector

These special variables are used to control the color of the shadow so that if a dark page background color is used, then the shadow will automatically appear as a light (negative) color. One can replace this automatic “negative” shadow color with a specific shadow color by commenting out the specified shadow color (e.g. ‘#filter2.shCol=$styleNegativeBackgroundColor) and substituting a desired color. In the example above, the suggest colored for light backgrounds (filter2.shCol=#646060) is commented out.

XBorder filters work with any JAlbum skin, even those without specific XBorder support via the skin user interface. However, the way they are entered is different from the method used by BPP. Each simple XBorder filter is entered as a single JAlbum uservariable on the JAlbum Advanced-User variables Tab. Each simple XBorder filter is assigned to a uservariable named ‘filterN’, where N is the first available filter number (starting with 1). All of the simple XBorder filters that make up a compound XBorder filter must be numbered consecutively. Here is an example:

Example of XBorderFilter use with other skins
class=XBorderFilter cacheMax=0 thumbnails=false closeups=true shWidth=15 shCol=#646060 shTrans=10 shDrop=soft

Example XBorder Filters

Simple examples are contained in the XBorder Filter properties listing. More advanced examples with extensive commentary by Gordon Dodge can be found here. The BluPlusPlus Frames Gallery displays many frames and has links to the .xbp files used to generate those frames. All of the .xbp files in the frames gallery contain extensive comments; each can serve as an example to help when modifying or building a custom frame.

Using other filters with the BPP XBorderFilter interface

The BluPlusPlus-Filter Management tab is used to imprint logos or text on an image. Sometimes it is desirable to imprint a logo or some text as part of a border generated by XBorderFilter. To do this, one can specify another filter in the appropriate ‘.xbp’ file. The JAlbum web site has a complete list of supported filters. Here is an example:

Example using Textfilter with an XBorderFilter frame
#filter1 creates a 30 pixel wide gray frame around the image
filter1.class=XBorderFilter
filter1.frWidth=30
filter1.frCol=#B4B3B3

#filter53 superimposes text on the frame created with filter1
filter53.class=TextFilter
filter53.color=black
filter53.text=©2004 Robert Camner
filter53.align=center
filter53.valign=bottom
filter53.voffset=8
filter53.face=Matura MT Script Capitals
filter53.size=16

Notes:

  1. The “font face” specified must be a font installed on the system
  2. The JAlbum web site has additional information on the various properties possible with other filters.
  3. The text that can be inserted (in the example above, ‘filter53.text=©2004 Robert Camner’) can also include JAlbum variables (a list of available variables, including some EXIF/IPTC variables, is available here). Be sure to include a ‘$’ before the variable name and be sure to use the JAlbum variables EXACTLY as specified in the list.
  4. The text that can be inserted can also include any BluPluPlus variable. A list of available BPP variables can be found by examining the ‘hints.jap’ in the BluPlusPlus folder (BPP variables are variables beginning ‘skin.’).

The filters above create the following:

Note

The ‘closeups’ and ‘thumbnails’ properties DO NOT WORK when used in an .xbp file. This means that if a given .xbp file is used for multiple items (slides, thumbnails, folders, and/or movies), all of the filters used within the .xbp file will apply to all specified items. If this is not desired, use a separate .xbp file for each item.