jAlbum Wordpress Bridge – Bridging the best of two worlds


Running a site often forces you to make fundamental decisions right from the beginning. Shall I base my site on a CMS (Content Management System) or I can edit my pages myself? How can I present my huge photo collection? On one hand CMS’s make the site building a piece of cake, but they aren’t designed for multimedia – they are still a blogging platform at heart. On the other hand, while jAlbum can cope with tedious amount of structured media, is not designed for textual content.

We’ve seen various attempts to marry these platforms, but none was perfect. Using an IFRAME element to embed another page became helplessly obsolete with the advent of mobile devices, because you can’t define such a small area that would fit into the smallest screen. This method also beats the purpose of responsive albums. Using separate album pages, and only link to them from your main site raises site uniformity concerns. Even if the skin is highly customizable you can’t fully match your site’s theme.

This is why we decided to make a plugin for Wordpress – the most popular CMS platform – that can bring jAlbum albums into your pages and posts. Visitors are presented with an embedded slide show, the “projector”, which comes in a multitude of appealing and configurable styles. The images are optionally clickable, and once clicked, visitors meet a full-page jAlbum gallery where there is no end to functionality and customizability. The gallery maintainer (you) will appreciate that jAlbum is designed to efficiently handle large amounts of images. The gallery is edited offline and finally pushed to the server with the click of a button. Once set up, you only use jAlbum to maintain the gallery. No need to upload images one-by-one the Wordpress way.

Wordpress integration page »

If your site isn’t based on Wordpress, don’t worry, we were thinking of you too. Check out our

jAlbum Bridge designer »


 

Get started!

1

Create and upload a jAlbum gallery made with any skin that generates JSON files like “Tiger” or “Responsive” or tick the “Generate JSON Data” option under Settings → Advanced → Metadata for other skins (option available in jAlbum 15.3.3 and up)

2

Go to your WordPress page’s dashboard and get our plugin from here. From this point on a new button will appear in the editor – jAlbum box – which can be used both for creating new projectors and editing the existing ones. After you’ve finished with the options click “Update” on the popup and “Update” the post (or page) too.

3

Sorry, no more steps :) – Enjoy the result!

All transitions and grid layouts »

Presenting the Zigzag skin

View sample galleryThe jAlbum family of skins has got a new member - Zigzag. This skin has a modern, responsive and clean design suitable not only to create galleries, but whole sites. We think Zigzag will be ideal for many smaller web sites presenting the works of not just photographers, but any smaller business, organization or things you are passionate about.

Zigzag doesn't use the classic index page->closeup navigation that are typical for jAlbum galleries, instead, images and videos are presented in large format along on the index page with possible longer descriptive texts. On desktop computers, the items are laid out in a zigzag fashion alternating between left and right aligned images, but on smaller devices such as tablets and mobile phones, it switches layout to alternate between images and text vertically.

 Flexible settingsZigzag also enables an "introduction section" at the top of the page where there is space for both a large header and corner logo, larger title and longer introduction text. Zigzag can be customized in many ways without the need to tweak the code (which is fine too by the way, -this is open source). Zigzag naturally also supports modern jAlbum features like custom pages, web locations, videos and hidpi images.

Download Zigzag today. Let us know what you think and do share your creations created with it!

Zigzag requires jAlbum 15.3 as it uses a more modern and easy API. We hope Zigzag will encourage you to to use as base for your own skins. If you know anything about css and html, check out Tools->Skin developer->Edit skin files!

 

The story behind

View source of inspirationThis skin is jointly developed by me, Anders and Laza ("Team jAlbum"). We share office space in Stockholm, Sweden with several companies, mainly for social networking reasons. I was then introduced to the product Braskotten by a fellow "colleague" and web designer -Jennie Hagman. This small site presents a clever way to kindle your fireplace using pine cones. I admired the site design and thought to myself "hey, a jAlbum skin could produce that kind of design too" so we set off to produce a skin with the capability to mimic that look. (We did write the code from ground-up though). Here is our initial take on it. We also added support for sub folders, so if you look at the bottom of that gallery there is a section about Pistachio ice cream making. Totally unrelated, but one of my passions :-).

Once we were able to mimic the look we set off to make the look customizable and added a skin user interface. This way of producing a skin proved to be very effective. Start by being inspired by an existing design, then set up a sample jAlbum project and create a new skin. Focus on getting the css+html right first (files "index.htt" and "common.css"), then write the skin settings user interface ("onload.bsh"). Our Developer Center is a good resource as well as checking out the source code from other skins. Here's finally another sample gallery produced with Zigzag.

I finally wish to thank Braskotten and Jennie Hagman for being able to use this design as inspiration for Zigzag.

jAlbum awarded Editor's pick

We're proud to tell that jAlbum 15 has been awarded Editor's Pick in Informer.com - one of the leading software catalogues today. jAlbum's flexibility, ease of use and high quality result were the main factors that motivated their top rating. Read full review.

 

 

 

Feedback and kiosk tool in Tiger skin

I can imagine one of the main reasons people choose jAlbum over simpler solutions is the wide choice of interaction possibilities the skins offer. For instance Turtle skin has offered a so-called feedback tool, through which visitors could have left feedback. When I made the new Tiger skin, my goal was to offer nearly the same functionality as Turtle did. There were some exclusions though, like the aforementioned feedback tool. The reason why Tiger did not offer this from the start was that I always planned to renew it. Passing a big chunk of data to the email client is impossible because of operating systems limitations. Probably this is due to security reasons, as the mechanism is the same as opening a normal web link. And once a link is longer than 2048 characters it might get suspicious.

Finally I gave in to user requests, and implemented this feature in Tiger too. Once I was there, I tried to make it better too. The new tool is based on a template, so you can customize the user experience widely. By default the tool offers commenting on the album and on selected photos, but you can easily tweak it to let visitors order photos too. There are a lot of users who would like to avoid PayPal as the only payment method. I can see the point. PayPal is not present in every country, they have a margin, and have some crazy restrictions you might not want to undertake.

With this new kiosk mode you can collect orders through email, and manage the payment by yourself. Be aware though this little tool not nearly as sophisticated as the PayPal cart. No calculations, no discount coupons, no shipping cost, and so on. It’s just the barebones, still can be sufficient for simpler tasks. In the future the possibility of sending mails through the server’s mail() function might also be added.

One another field it excels Turtle is that it can be configured to provide machine-readable output. It needs some coding knowledge – I admit – but by using this option you can automate the ordering process. Just read the email as a javascript variable, and you can decode the form with the stringify() method right away.

The limitation in sending large amount of data has also been circumvented by offering the user to copy / paste the data manually to the email client if the data is too big for the OS to pass.

Sample albums

1. Feedback

This album was made with the default Feedback options (see Settings → Tiger → Sections → Feedback). I’ve only added my email address and added instructions both in the “box” and for the popup window.

2. Kiosk

This other album was made with a customized “Feedback template” (see Settings → Tiger → Sections → Feedback → Feedback template in order to offer size and quantity boxes. Here’s the code I used:

<!-- items:start -->
<form class="inline">
	<select name="type">
		<option name="9x13">9&times;13 cm (&euro; 0.2)</option>
		<option name="10x15">10&times;15 cm (&euro; 0.3)</option>
		<option name="15x21">15&times;21 cm (&euro; 0.5)</option>
		<option name="21x30">21&times;30 cm (&euro; 1)</option>
		<option name="A1">A1 poster (&euro; 10)</option> 		
		<option name="download">Download (&euro; 5)</option> 		
	</select>
	<input type="number" name="copies" min="1" max="50" value="1" title="Copies (max. 50)" /> 
</form>
<!-- items:stop -->
<div class="row">
	<div class="large-8 large-centered medium-10 medium-centered columns"> 			
		<form name="address">
			<label for="name">Name</label>
			<input name="name" type="text" placeholder="Your name"/>
			<label for="street">Street address</label>
			<input name="street" type="text" placeholder="Street address"/> 
			<label for="city">City</label> 
			<input name="city" type="text" placeholder="City" /> 
			<label for="postcode">Post code</label>
			<input name="postcode" type="text" /> 			
			<label for="contry">Country</label> 
			<input name="country" type="text" placeholder="Country" />
		</form>
	</div>
</div>

As you might have noticed, there are two special delimiter lines (marked in red). Their purpose is to mark the repeating code that should be attached to every selected item. The code part before <!-- items:start --> will appear above the items, meanwhile the code after <!-- items:stop --> will be placed below them. Only the contents of the <input>, <textarea> and <select> fields will be sent, so you can add labels, comments – those will not get into the email – only the user input. (Naturally, the file name and path will also be sent, so you can easily identify the photo.) You can also add hidden input elements if you need some special info, e.g. <input name="filesize" type="hidden" value="${fileSize}">. As you can see the skin can process image variables too.

I hope you’ll find this little tool useful. If you have any questions, please let me know in the skin’s forum – we’re glad to help!

Presenting jAlbum 15

Presenting
jAlbum 15

Get slim with jAlbum 15!

Get jAlbum 15 »

Release notes →


Now in Italian!

jAlbum 15 now speaks Italian too. Thank you Filippo Bottega for providing this!

I’m proud to introduce jAlbum 15 to you. jAlbum 15 offers a smorgasbord of improvements from the inside out. It’s hard to pinpoint one specific feature that stands out. What matters most to you depends on your needs. Software that’s been around this long (jAlbum is from 2002) is sometimes accused of being bloated with features. We therefore just don’t want to add stuff that only 1% of the users may use at the expense of clarity. I’m therefore happy to say that jAlbum 15 has been reworked and cleaned-up to be faster, more robust, handle images better, take less disk space, look better and be more intuitive. On top of this, there are new features too :-). Let’s present some highlights! As always, you can read the full story in our release notes. Oh, we offer 30 new trial days for everyone so you can try it out fully. If you’re on an active support & update plan, it’s a free update. If you’re not, we offer discounted updates.
Just sign in first.

360° images

jAlbum now supports 360° images. These images puts you in the location the image was taken. You’re now free to look at the surroundings from any angle. There are no frames! Don’t disregard this as a gimmick. Even though the concept has been known for years, ease of use and quality has gradually increased and prices dropped significantly. Basically every camera manufacturer now offers such a camera. There are good models available for under $300. In September, Team jAlbum were invited to Bol, Croatia by Roni Marinkovic – a long time jAlbum user and skin developer. We enjoyed conferencing (well...), photographing, filming, eating, drinking, diving and windsurfing. Let us share our memories in 360° in this gallery (the 360° images are those with comments). Our “Tiger” skin is currently the only in-house skin supporting 360 images, but our community is also delivering support for this. See https://jalbum.net/skins.

Hard link support

Can you imagine the disk size of an album dropping from 400MB to 10MB while presenting the same images? It may sound like magic, but is now possible through a technique called “hard links” and is supported by most modern file systems on Windows, Mac and Linux. If activated (under Preferences → Album), jAlbum will no longer make copies of original images, videos and skin resource files that’s included in an album. Instead "hard links" will be generated. Don’t confuse them with symbolic links and their limitations. Read more in our help pages!

Better looking theme images

Theme images are the usually wide header images that appear on top of galleries made with the Turtle and Tiger skins for instance. In jAlbum 15 it’s now possible to select a theme image that’s different from the image that represents that folder in the parent level (the “folder thumbnail”). This is important as it’s often hard to find one single image that both fits a square folder thumbnail and wide theme size.

Here’s a demo gallery that demonstrates this. In my humble opinion it looks awesome, doesn’t it?.

We’ve also made it easier to select the focus for cropping the theme image. Hopefully no more “chopped heads” in theme images anymore. All this has been implemented in a new intuitive “folder property panel” that’s appearing to the right of the thumbnails in jAlbum’s explore view. Just drag and drop images onto the two drop areas of the property panel to select representing folder image and theme image. The new folder property panel also makes it more intuitive and faster to enter folder specific titles and descriptions. The panel can be minimized or enlarged to fit your needs.

Improved image processing

jAlbum 15 has new code for image loading and scaling, providing better compatibility with oddly formatted JPEG images and improving scaling quality to match the best competition on the market. Just select “Smooth” scaling quality under Settings → Images and then choose from one of the four new super high quality algorithms presented. Here’s a tricky sample image scaled with the “Standard” smooth algorithm and now with the “Blackman-Sinc” algorithm. Pay attention to the rightmost wire:

 

Adapted for HiDPI screens

Today we see more and more HiDPI / “retina” screens. That means screens having significantly smaller pixels. On Windows, using jAlbum on such screens has been a drag as the user interface didn’t compensate for the smaller pixel size. With jAlbum 15 this long standing problem has now been addressed. Enjoy!

PS: Mac and Linux versions already handle this.

 

jAlbum’s user interface was previously not adapted for HiDPI screens

 

Now properly adapted for HiDPI screens

 
     

This was just some highlights from jAlbum 15. As always, check out our release notes for a full list of enhancements and fixes. Remember, we offer 30 new trial days for all users, so check it out now!

Get jAlbum 15 now »