Image filters can be plugged in to enhance images during album generation, adding watermarking, logos etc. Image filters can be applied to closeup images, thumbnail images or both. The permitted combinations are listed here Several filters can be chained to produce the desired effect. An open API and source code example are provided so developers easily can add new filters.
From the "Effects" panel, you can easily add text, watermarks, logos, grayscale, color/contrast/level corrections, and several arty filters. Other filters they can be controlled with settings in the "Advanced > User Variables" panel.
Note, globally applied filters can be disabled for individual images. See Excluding images from filters below for more information.
Note, in the detailed sections below the '|' character represents 'or', so true|false means the value can be true or false
Learning by example is powerful, so let's start by applying a grayscale filter to each thumbnail and adding a copyright notice to the corner of each closeup image. (For a formal description of available filter features, see below.)
Start the jAlbum application and prepare a project for album creation. Now go to the Advanced page of jAlbum. There you will find a section called "User defined variables". We will use this section to set the properties of our filters. Enter exactly as this example shows. Pay attention to capitalization - "GrayscaleFilter" is not the same as Grayscalefilter".
Now go to the Main page and press "Make Album" to have the album generated and filters applied. The resulting thumbnails and closeup images should now look something like this:
The filters are applied in the order they are numbered (filter1, filter2 etc). The filter settings gets saved with the project so don't forget to save your project when you are happy with your settings.
Below is a list of the initially provided filters and their properties (features). New filters can be installed by putting their Java class files inside the plugins directory of jAlbum. All filters require the class property to be specified as filter identifier. All filters accept the thumbnails and closeups property that controls if the filter is to be applied to thumbnails only, closeups only or both. Default is both.
Note, the '|' character represents 'or', so true|false means the value can be true or false
Property | Value | Meaning |
class | GrayscaleFilter | Identifying filter name (required) |
thumbnails | true|false | Apply to thumbnails? |
closeups | true|false | Apply to closeups? |
prescale | true|false | Apply filter before scaling? |
Example
class=GrayscaleFilter
Applies the grayscale filter to both thumbnails and closeups.
Note that invoking this filter requires reprocessing and reuploading of all the images. The same result can be achieved with a single line of CSS applied to the selector for the images you want to affect: img {filter: grayscale(1);}. This can be done with no image processing at all. Therefore, this filter is inefficient, and should not be used.
Property | Value | Meaning |
class | TintFilter | Identifying filter name (required) |
thumbnails | true|false | Apply to thumbnails? |
closeups | true|false | Apply to closeups? |
prescale | true|false | Apply filter before scaling? |
redPercent | Strength in percent | Red tone (100) |
greenPercent | Strength in percent | Green tone (100) |
bluePercent | Strength in percent | Blue tone (100) |
Example
class=TintFilter redPercent=100 greenPercent=60 bluePercent=60
Applies a redish tint to images.
Property | Value | Meaning |
class | LogoFilter | Identifying filter name (required) |
thumbnails | true|false | Apply to thumbnails? |
closeups | true|false | Apply to closeups? |
prescale | true|false | Apply filter before scaling? |
src | URL to image | Any valid URL will do (http:// file:/// etc) |
angle | Angle of logo in degrees, rotated around the center of the logo | (0) |
strengthPercent | Opaqueness in percent | Controls logo visibility. (100) |
align | left|center|right | Horizontal alignment of logotype (left) |
valign | top|center|bottom | Vertical alignment of logotype. (top) |
margin | Margin in pixels | Distance from edge of logotype to edge of image. (0) |
offset | Horizontal offset in pixels | Fine tuning of placement. (0) |
voffset | Vertical offset in pixels | Fine tuning of placement. (0) |
Examples
class=LogoFilter src="http://blog.jalbum.net/dor.png" strengthPercent="50" closeups
Add a semi transparent jAlbum logo from the jAlbum web site to center of closeups.
class=LogoFilter src="file:///C:/adir/anotherdir/animage.jpg" closeups
Pick an image from the local hard disk instead from a remote location.
Excluding an image
You can exclude an individual image from the album-wide logotype filter by opening the image for editing in jAlbum, opening the Variables panel on the right, and entering a new variable with the name applyLogo and a value of false.
Note that adding text, watermarks, and logotypes to scaled images can be achieved much more readily by using the Effects panel. There is rarely a need to use this filter manually.
Property | Value | Meaning |
class | TextFilter | Identifying filter name (required) |
thumbnails | true|false | Apply to thumbnails? |
closeups | true|false | Apply to closeups? |
prescale | true|false | Apply filter before scaling? |
referenceWidth | reference width e.g. 800 | Images having a width a multiple of the reference width will have their font size changed by that multiple value. The final font size = font size * image width / reference width |
src | URL to image | Any valid URL will do (http:// file:/// etc) |
text | Text to display | Allows jAlbum $variables like $originalDate and $comment to be embedded for dynamic content |
color | HTML color definition | Understands common HTML color names like "pink", #rrggbb, and r,g,b format |
face | Name of font | Valid font names from your system like "Helvetica", "Verdana", "Courier New" etc |
style | plain|bold|italic|bolditalic | Font style (bold) |
size | Font size in pixels | (16) |
angle | Angle of text in degrees, rotated around the center of the text | (0) |
antialias | true|false | Antialiasing gives smoother edges. (true) |
align | left|center|right | Horizontal alignment of text (left) |
valign | top|center|bottom | Vertical alignment of text. (top) |
margin | Margin in pixels | Distance from edge of text to edge of image. (5) |
offset | Horizontal offset in pixels
Fine tuning of placement. (0) |
|
voffset | Vertical offset in pixels | Fine tuning of placement. (0) |
Example
class=TextFilter text="Date: $fileDate" referenceWidth=800 size=20 color=#aaffaa closeups
Add the file date of the image on top of the image in a light green color, adjust the font size if the image size differs from the reference width. To ensure the date used is the date the photo was taken use originalDate (fileDate may get modified)
Note that adding text, watermarks, and logotypes to scaled images can be achieved much more readily by using the Effects panel. There is rarely a need to use this filter manually.
Extended properties (see TextFilter for the others):
Property | Value | Meaning |
class | ShadowTextFilter | Identifying filter name (required) |
shadowColor | HTML color definition | Color of shadow. Understands common HTML color names like "pink", #rrggbb, and r,g,b format |
shadowDistance | Distance in pixels | (2) |
Example
class=ShadowTextFilter text="Date: $fileDate" size=20 color=#aaffaa closeups To ensure the date used is the date the photo was taken use originalDate (fileDate may get modified)
Add the file date of the image on top of the image in a light green color with a black shadow.
Note that adding text, watermarks, and logotypes to scaled images can be achieved much more readily by using the Effects panel. There is rarely a need to use this filter manually.
Property | Value | Meaning |
class | WatermarkFilter | Identifying filter name (required) |
strengthPercent | Strength in percent | Controls watermark visibility. (20) |
Example
class=WatermarkFilter text="jAlbum" size=30 closeups valign=bottom margin=0
Add a "jAlbum" watermark to the lower left edge
Note that adding text, watermarks, and logotypes to scaled images can be achieved much more readily by using the Effects panel. There is rarely a need to use this filter manually.
Property | Value | Meaning |
class | ZoomFilter | Identifying filter name (required) |
zoomPercent | How far to zoom into center of image | (30) |
thumbnails | true|false | Apply to thumbnails? |
closeups | true|false | Apply to closeups? |
prescale | true|false | Apply filter before scaling? |
Example
class=ZoomFilter prescale thumbnails zoomPercent=30
Applies the zoom filter to thumbnails. Note the very important prescale attribute
Note that invoking this filter requires reprocessing and reuploading of all the images. The same result can be achieved with a single line of CSS applied to the selector for the images you want to affect: img {transform: scale(1.3);}. The image's HTML container should also have overflow: hidden; applied to it. This can be done with no image processing at all. Therefore, this filter is inefficient, and should not be used.
Property | Value | Meaning |
class | FixedShapeFilter | Identifying filter name (required) |
thumbnails | true|false | Apply to thumbnails? |
closeups | true|false | Apply to closeups? |
all | true|false | Apply to thumbnails and closeups? |
prescale | true|false | Apply filter before scaling? |
Example
class=FixedShapeFilter prescale thumbnails
Applies the fixed shape filter to thumbnails. Note the very important prescale attribute.
FixedShape filter should either be used for both thumbnails and closeups before scaling takes place or on thumbnails only, before scaling takes place.
It does not support for the combination of "closeups" and "prescale", if both are used the "prescale" will be ignored.
Property | Value | Meaning |
class | ConstrainRatioFilter | Identifying filter name (required) |
thumbnails | true|false | Apply to thumbnails? |
closeups | true|false | Apply to closeups? |
prescale | true|false | Apply filter before scaling? |
maxRatio | Maximum aspect ratio | Default is 2.0 |
minRatio | Minimum aspect ratio | Default is 0.5 |
Example
class=ConstrainRatioFilter prescale thumbnails maxRatio=2.5
Applies the constrain ratio filter to thumbnails, and limits the output aspect ratio (width/height) to a maximum of 2.5.
Note that many skins include this filter by default, or as a skin checkbox option. Check the skin you are using before applying it manually.
Property | Value | Meaning |
class | SharpenFilter | Identifying filter name (required) |
thumbnails | true|false | Apply to thumbnails? |
closeups | true|false | Apply to closeups? |
prescale | true|false | Apply filter before scaling? |
Example
class=SharpenFilter closeups
Applies the sharpen filter to closeups.
Caution! This filter does not work in the current version of jAlbum, and produces an immediate crash. It will be fixed in the next release.
Property | Value | Meaning |
class | BlurFilter | Identifying filter name (required) |
thumbnails | true|false | Apply to thumbnails? |
closeups | true|false | Apply to closeups? |
prescale | true|false | Apply filter before scaling? |
radius | 0-100 | Amount of blurriness. 30 is default |
Example
class=BlurFilter closeups
Applies the blur filter to closeups.
Note that invoking this filter requires reprocessing and reuploading of all the images. The same result can be achieved with a single line of CSS applied to the selector for the images you want to affect: img {filter: blur(5px);}. The image's HTML container should also have overflow: hidden; applied to it. This can be done with no image processing at all. Therefore, this filter is inefficient, and should not be used.
Adds a small label using the name entered in Set area tags... or from XMP regions data. The label appears on images in the same location as shown in the 'Set area tags...' preview.
Property | Value | Meaning |
class | NameTagFilter | Identifying filter name (required) |
thumbnails | true|false | Apply to thumbnails? |
closeups | true|false | Apply to closeups? |
fontFace | Name of font | Valid font names from your system like "Helvetica", "Verdana", "Courier New" etc. |
fontSize | Font size in pixels | (16) |
Example
class=NameTagFilter closeups
Applies the filter to close up images.
Adds a n pixel margin around each image. By default, the margin is transparent (if generating PNG images), but any color with any transparency level works.
Property | Value | Meaning |
class | MarginFilter | Identifying filter name (required) |
thumbnails | true|false | Apply to thumbnails? |
closeups | true|false | Apply to closeups? |
prescale | true|false | Apply filter before scaling? |
margin | Margin around in pixels | Margin to be added around images in pixels (20) |
color | Color of margin | Color of margin in #AARRGGBB format (transparent black) |
Example
class=MarginFilter margin=10 color=#33AAAAAA
Apply a 10 pixel semi transparent light gray margin around images
Note that invoking this filter requires reprocessing and reuploading of all the images. The same result can be achieved with a single line of CSS applied to the selector for the images you want to affect: img {border: 10px solid rgba(170 170 170 / 0.2);}. Depending on the context, it might also be necessary to apply background clipping: img {background-clip: padding-box;} This can be done with no image processing at all. Therefore, this filter is inefficient, and should not be used.
In addition, a filter-applied border will be enlarged or reduced along with the image. In a responsive layout, this can produce images that have borders with visibly different widths, from one image to the next. A CSS-applied border will always be a consistent size.
Property | Value | Meaning |
class | XBorderFilter | identifying filter name (required) |
thumbnails | true|false | apply to thumbnails |
closeups | true|false | apply to closeups |
prescale | true|false | apply filter before scaling |
bgCol | HTML color definition | background color for tranparent parts of shadows and frames |
bgFile | URL to jpeg, png or gif image | background graphics file to use for tranparent parts of shadows and frames |
bgOffX | x offset in pixels | x offset for bgFile (new with V0.95 β) |
bgOffY | y offset in pixels | y offset for bgFile (new with V0.95 β) |
boBlend | true|false | blend border color bands |
boClip | border clip radius in pixels | the border may have rounded corners |
boCol | (list of) HTML color definition(s) | border color |
boMargin | border margin in pixels | margin between image edges and border |
boTrans | (list of) frame transpareny(ies) | 0 is opaque, 100 fully transparent (invisible) |
boWidth | border width in pixels | all directions are set to the same value |
boWidthE | eastern border width in pixels | only E |
boWidthN | nothern border width in pixels | only N |
boWidthS | southern border width in pixels | only S |
boWidthW | western border width in pixels | only W |
brCol | bracket line color | (new with V0.96) |
brStyle | bracket style | (new with V0.96) |
brThick | bracket line thickness | (new with V0.96) |
brX | horizontal bracket length | (new with V0.96) |
brY | vertical bracket length | (new with V0.96) |
clip | clip radius in pixels | a rounded corner |
debug | enables debug output | for developers only |
frBlend | true|false | blend frame color bands |
frCol | (list of) HTML color definition(s) | frame color |
frTrans | (list of) frame transpareny(ies) | 0 is opaque, 100 fully transparent (invisible) |
frWidth | frame width in pixels | all directions are set to the same value |
frWidthE | eastern frame width in pixels | only E |
frWidthN | northern frame width in pixels | only N |
frWidthS | southern frame width in pixels | only S |
frWidthW | western frame width in pixels | only W |
shCol | HTML color definition | shadow color |
shDir | NE|SE|NW|SW | shadow direction |
shDrop | hard|norm|soft | shadow drop falloff |
shTrans | minimum shadow transparency | shadow transparency near the edge of the image |
shWidth | shadow width in pixels | both directions are set to the same value |
shWidthX | x shadow width in pixels | only x |
shWidthY | y shadow width in pixels | only y |
shExX | x shadow excess in pixels | excess shadow with on the opposite side |
shExY | y shadow excess in pixels | excess shadow width on the opposite side |
Examples
Adds a frame and a drop shadow to your closeups.
class=XBorderFilter frWidth=20 frCol=ivory shWidth=15 closeups
Adds a border to your closeups.
class=XBorderFilter boWidth=20 boCol=ivory closeups
Note that invoking this filter requires reprocessing and reuploading of all the images. Many of the simpler borders can be more easily produced using the CSS border, box-shadow, and border-radius properties. For many options, this filter is inefficient; it should be used only when there is no straightforward CSS alternative.
Because these borders, brackets, shadows, and frames are applied to the generated images, they expand or shrink along with the image in a responsive layout. This can produce inconsistent, and often unpredictable, results.
You can exclude an individual image from globally applied filters.
In Edit view, add an image specific user variable called "excludeFilters". Set the value to the name of the filter class (or names of the filter classes, comma separated).
Here is an example of adding image filters to a skin, in this case a watermark filter applied to the slide images; watermark and watermarkSize would be skin variables from onload.bsh. The code is added to init.bsh.
if (watermark.length() > 0) { WatermarkFilter f = new WatermarkFilter(); f.setText(watermark); f.setSize(watermarkSize); f.setAlign("center"); f.setValign("bottom"); engine.addFilter(f, JAFilter.CLOSEUPS_POSTSCALE_STAGE); }
And to add the constrain ratio filter for thumbnails:
engine.addFilter(new ConstrainRatioFilter(0.5f, 2f), JAFilter.THUMBNAILS_PRESCALE_STAGE);
This section is for Java programmers who wish to extend jAlbum with new image filters.
jAlbum image filters are java classes added to the plugins directory that implement the small se.datadosen.jalbum.JAFilter interface. A jAlbum filter should also adhere to the JavaBean specification, meaning:
A se.datadosen.jalbum.JAFilter interface must provide getter methods for name and description pretty much like an Applet. The third method is the filter method that takes a BufferedImage and a java.util.Map as arguments and returns a modified BufferedImage. A filter is allowed to directly manipulate the passed BufferedImage. The Map object contains jAlbum $variables that may be useful for the filter implementer.
The preferred way to pass parameters to a filter is to implement setter methods for them. By using a smart BeanShell script in the init.hsh file in the jAlbum program directory, jAlbum is capable of passing attributes from the user defined variables section of the Advanced tab page to the corresponding setter method of a filter.
The plugins jAlbum directory contains not only the filter classes but also the source code for the filters described on this page. Feel free to use them as base for your own filters. You will probably find the SimpleFilter below a good base for your own filters. The plugins folder also contains a compile.bat file that simplifies compilation for you. As you develop filters, please note that you do not need to restart jAlbum in order to refresh the filter classes as they are dynamically loaded every time an album is being processed. Finally, if you make a cool filter, please send it to me for inclusion.
The following simple filter adds a jAlbum logo to the corner of images:
import se.datadosen.jalbum.JAFilter; import java.awt.*; import java.awt.image.BufferedImage; import javax.swing.ImageIcon; /** * jAlbum simple image filter adding a jAlbum logo to the * corner of images * @author David Ekholm * @version 1.0 */ public class SimpleFilter implements JAFilter { // Implements JAFilter public String getName() { return "Simple filter"; } // Implements JAFilter public String getDescription() { return "Add a jAlbum logo to the corner of images"; } // Implements JAFilter public BufferedImage filter(BufferedImage bi, java.util.Map vars) { Graphics2D g = bi.createGraphics(); ImageIcon windowIcon = new ImageIcon(se.datadosen.jalbum.JAlbumFrame.class.getResource( "smallicon.gif")); g.drawImage(windowIcon.getImage(), 0, 0, null); return bi; } }
Adding a 30px tall red box to the bottom of slide images with a web address in white text.
Name | Value |
filter1 | class=XBorderFilter frWidth=0 frWidthS=30 frCol=#ff0000 closeups |
filter2 | class=TextFilter text="MyWebsite.com" size=24 align=center valign=bottom margin=0 color=white closeups |
Making images have the same area, or number of pixels, see LimitAreaFilter forum post
The filter files are already included in the jAlbum application
Name | Value |
filter1 | class=LimitAreaFilter area=0.2 closeups |
filter2 | class=LimitAreaFilter area=0.003 thumbnails |