Filtering and sorting in albums

While most people use jAlbum to share simple albums, filtering and sorting the thumbnails comes handy for visitors in complex albums and webshops.

jAlbum's database-backed skins – e.g. Photoblogger and Tiger – are capable of handling huge amounts of data which makes it easy to find and order images as visitors wish. This filtering and sort functionality is based on variables attached to images. Besides jAlbum's own variables, like "original date" or "keywords" you can also add your own variables for the sake of filtering. Say your webshop offers different brands and colors of products, you then add custom variables to images – "brand", "color" – which can later be referred for both filtering and sort.

Don't confuse this with jAlbum's "Filter bar" feature or "Sort by", which are used to arrange images in jAlbum to set the default view of an album by the author. This new feature was made for the visitors to play with. I guess you'll figure it right away if you check out the sample album below.

"Demo webshop" album


Head to Settings / Photoblogger / Sidebar / Filtering and Sort. Tick Use filters and/or Use sort first, then add the criteria one by one. The variable name is mandatory (must be exactly as jAlbum handles them, case sensitive). Adding a descriptive label isn't needed, but helps a lot and you can use translated labels this way. By default the skin treats these variables as plain strings, but other data types might work better, e.g. for file size or price. These are the allowed data types:

  • Numeric: as the name suggests it represents a numeric value, e.g. rating, fileSize or resolution. The skin renders a "range slider" to select the values.
  • Financial: numeric value as well, but respects the currency sign and has 2 fraction digits, e.g. €1.00. To ensure the rangle slider shows the proper currency, add it after the label in parentheses, e.g. Price (US$). By default the box shows Euros.
  • Date: the range slider shows dates, no surprise. Corresponding jAlbum variables: fileDate, originalDate, addedDate
  • Single string: useful for variables with text values. Visitors can then select one of these values to narrow search. Examples: fileCategory (e.g. image, audio, video), formatName (e.g. jpg, png, gif), writer (author)
  • Multiple string: like Single string, but selecting multiple items is allowed too. Examples: keywords, category, isoEquivalent. Use Shift or Ctrl to select multiple items!

Please note, jAlbum saves changes made in a cell only after you press Enter or click into another cell! If you click OK, or close the Settings panel you risk losing changes.

Regarding "price"; recently these skins were allowed to handle the price variable as a single shop option in the PayPal cart. Check out the Settings / Site / Shopping cart / Use "price" as single shop option! (Works with Photoblogger 2.6+, Tiger 2.9+). Price can be added in Edit mode → right panel → Description → Price field.

Custom variables

As I mentioned before, beyond jAlbum's built-in variables you can define your own variables too. Add them in Edit mode through the Variables panel. The name goes left (plain English characters!), the value right – really straightforward. Unlike with keywords you can't assign the same value to multiple items at once – you have to do it one-by-one. We'll probably make a tool for this task later (if there's a massive demand :) ).

Like with the Filtering panel, jAlbum saves changes only after pressing Enter or clicking in another box.

Another example of filtering

Comments are welcome,


Sign in to post
Add your comment
Post comment