This post puts the spotlight on an often overlooked gem in jAlbum – the seach feature of the Turtle skin. Many people and organisations use jAlbum to present huge amounts of images, whether it is catalogues of vintage cars, handicraft or event images for the local sports club. It's not uncommon to see albums consisting of tens of thousands of images presented in hierachical folder trees.

 

With jAlbum's Turtle skin, you can add a search box that will simplify finding the images your viewers are looking for. It will search through all images of your album, looking for matches to the search terms within the file names, titles, descriptions, keywords and even face tags of your images! If you search for multiple words, Turtle will find all images that's matching any of them. The matching images are immediately presented in a thumbnail list and are now only one click away.

 

Have a play with this sample album of stock photos to see search in action!

 

To enable search in a Turtle based album, simply open Settings → Turtle → Site and tick the “Use search box” checkbox, then make and upload the album again. Search works no matter where the album is being hosted. It even works for albums stored on CD-ROM, memory sticks etc. Please note: when you preview an album locally the search functionality will not work before the album make has completely finished!

 

Kind regards, David and the entire jAlbum team

Create your own HTML5 web gallery!

You might have noticed how much the web pages has changed in the past years. Nicer, cleaner interfaces and web applications appeared all around the www that can adapt to any device. This huge leap in the evolution was made possible by the new web page standards, called HTML5 and CSS3.

For a long time web designers were locked into the early 2000's technological level thanks to Microsoft's indifference in adopting new standards and fixing browser bugs in Internet Explorer. Fortunately the evolution appears to be stronger than MS, and by now the vast majority of visitors is using a web browser that's capable of handling HTML5 pages. (Included all mobile browsers!) The only major player left from the prehistoric ages is IE8, with its 14% share. But I guess, you don't want to miss out on that 14% either, do you? No worries, HTML5 works fine on these old browsers too, even back to Internet Explorer 6. The skin will introduce the new tags (<header>, <nav>, <menu>, <article>, <footer>, ...) with a small script. Naturally, they will not show the new CSS3 features (rounded corners, gradients, custom fonts, etc.), but this won't affect the page usability-wise, only the visual extras. And those who are using such old browsers got used to that look already. HTML5 is so much simpler to learn, so much better structured and all the development on the web is focusing on this standard, so I'd encourage everyone to use it right now.

Historically, meanwhile HTML5 was known for developers for years, it became a hot topic since around April 2010 when Steve Jobs of Apple has concluded that “Flash is no longer necessary to watch video or consume any kind of web content” and that “new open standards created in the mobile era, such as HTML5, will win”. In November 2011 even Adobe announced that it will discontinue development of Flash for mobile devices and focus on HTML5 technology. Battle won.

The HTML5 Boilerplate is the most widely adopted HTML5 framework, a combined effort of 100s of developers. Its purpose is maintaining identical look and behavior though all browsers and giving a solid foundation for any HTML5 web page. High Five skin is a simple implementation of the HTML5 Boilerplate with some basic features, which you can easily enhance. If you happen to need help, you can always ask find us in the General Development forum.

But even if you are not a developer, I suggest you to give it try. It's pretty easy to use, clean and elegant, and it does a good job in presenting your album to search bots too.

Install High Five skin from here →

Laza

Turtle's new Facebook commenting will not only add a handy commenting tool to your albums but it will manage all the community integration, posting to timeline, notifications, etc. – and thanks to Facebook's networking effect your albums can reach 100s of people in no time. Many users of Turtle, I guess, haven't even noticed the new Facebook commenting tool, or perhaps thought it's something too complicated for them. No, I can tell you, it shouldn't – even I was surprised how smooth it goes. Now I'll show you the 3 easy steps to put this awesome tool into good use.

Step 1: Create a new App

In order you can manage your Facebook Commenting app you will need to create a new App on Facebook. Don't worry, you don't need to be a coder to be able to do that. Go to this page: Facebook Apps, give it a name and you're good to go. (From jAlbum simply click the Sign up link on Turtle's settings window and go to Apps.)

 

Step 2: Copy the App ID

Now that Facebook has created an app for you can simply copy the App ID to jAlbum's appropriate box.

 

Step 3: Set up Turtle to use Facebook commenting:

Go to Turtle's Social settings tab and turn on Enable Facebook commenting. Paste the app ID you've copied from the Facebook site. Normally you don't need to change the Number of posts to show, but you can make it a bit higher if there's enough space. Note, this is not the total number of comments to show, only the number of comments to show in the initial view – the visitors can expand it any time if they want to see more.

 

Make the album and Upload to your site! Please note, you cannot test the Facebook commenting on the local Preview, because that?s not visible to Facebook servers.

Last step: enjoy the popularity! :)

Laza

 

Do you want to give your photos or albums a certain atmosphere? Then you could use jAlbums new "ArtyFilter" that can be added to jAlbum as a plugin. It includes 8 different filters that you can apply to your photos to give them an artistic style.

 

The ArtyFilters use a variety of different techniques to give your images a unique expression. The palette of techniques include overlays, border masks, color tints, brightness and contrast adjustment and textures. Enough talking. If an image speaks a thousand words, then an album should speak ten thousand words :-), so here's a sample album that demonstrates the different effects:

 

Usage

To apply the artistic filters to individual images from within jAlbum's edit panel, just install the plugin and restart jAlbum, then "Edit" an image within jAlbum and click the Arty icon (a flower).

To apply an effect to all images of an album, you can open jAlbum's Advanced album settings->User variables and specify the filters like this sample shows:

filter1 | class=net.jalbum.filters.arty.effects.DaisyFilter

 

The names of each filter are as follows:

net.jalbum.filters.arty.effects.SunflowerFilter
net.jalbum.filters.arty.effects.RainflowerFilter
net.jalbum.filters.arty.effects.LilyFilter
net.jalbum.filters.arty.effects.PinkFilter
net.jalbum.filters.arty.effects.TulipFilter
net.jalbum.filters.arty.effects.ThistleFilter
net.jalbum.filters.arty.effects.SnowdropFilter
net.jalbum.filters.arty.effects.DaisyFilter

Here you actually have the ability to specify several filters to be applied in sequence, so you can enter two user variables, like this:

filter1 | class=net.jalbum.filters.arty.effects.DaisyFilter 
filter2 | class=net.jalbum.filters.arty.effects.SnowdropFilter

Usage from within skins

This tool includes a component that shows the eight effects on a sample image at a time. It's integrated in the plugin and skin developers can actually embed it in their skin setting panels too. The whole Arty tool can also be bundled with a skin (just put it inside the "lib" folder of your skin).

All filters implements the JAFilter interface so it behaves like any of jAlbum's classic image filters. Here's a short code sample that shows how a skin can include the selector component of the artistic filters. So the user can choose the atmosphere of his album. You can pass a BufferedImage if you want the selector to use your own sample image.

In onload.bsh: 

 import net.jalbum.filters.arty.*;
 import java.awt.image.BufferedImage;
 import javax.imageio.ImageIO;
 import java.io.File;
 
 ControlPanel ui = new ControlPanel() {
 	BufferedImage bi;
 	ArtySelector arty;
 	try {
 	   	bi = ImageIO.read(new File("/Users/sarah/Pictures/pink_small.jpg"));
 	   	arty = new ArtySelector(bi);
 	} catch (IOException ex) {
 		System.out.println("Image not found. Sample image used.");
 	  	arty = new ArtySelector();
 	}
 	
 	{
 		add("br", arty);
 	}
 }
           	
 window.setSkinUI(ui);

 In init.bsh:

 import net.jalbum.filters.arty.*;
 
 Effect fl = Effect.valueOf(arty);
 engine.addFilter(fl.getFilter()); 

If you as skin developer want to decide which filter should be used then you just have to write in init.bsh:

 import net.jalbum.filters.arty.effects.*;
 
 engine.addFilter(new PinkFilter());

Download

 To add the ArtyFilter tool to jAlbum, just download it to your computer, then double click it or drop it onto jAlbum to have it installed.

 

If you want to see what I really done or improve the ArtyFilters, you can download the source code.