Get updated in the wonderful world of jAlbum

Newer posts >
< Older posts

One of the most appreciated aspects of jAlbum is the ability to customize albums to fit your requirements. It is therefore important that we have a thriving skin developer community. These days it's more common to see updates to a smaller set of album skins than to actually see new skins emerge. We believe this is much due to the higher expectations users have when it comes to standards compliance, features and visual appearance. It can also be a daunting task to modify existing skins as they have grown in code size and features - you easily break things. Some skins may also have a licensing model that doesn't allow modification.

The Minimal skin was initially made to be minimal enough to encourage people to base their skins on it, but it is old, both with regards to html+css style and visual look. We have therefore designed a skin that should be the perfect blend: Basic enough to encourage you to base your modifications and new skins on it, but with a current code style, feature set and look. Welcome "Base" skin!

Base skin has a simple, well-documented HTML 4.0 / CSS 2.1 (3) structure, still sporting tons of advanced features. The features were transplanted from my other skins (e.g. Turtle) – metadata formatting by templates, breadcrumb path, custom background image, site colors, fonts and watermarking to name a few. These will spare you a lot of time, thus you can focus on the important things: the HTML stucture and styling.

Tweaking made easy

Let's see first how easy to make Base albums match your site / company colors. No coding is necessary, just use the the skin's user interface to define your colors – can't be easier:

What if you want to use some background image? No problem. Just pick the image from your hard drive and the skin will manage the rest.

You might wonder how it would look like using a semi-transparent panel background? Let's see! This needs some tweaking of the CSS files. If you prefer keeping the original styles, first make a copy of Simple.css, Simple.jap (and the Simple folder if present) under a new name, e.g. MyStyle.css, MyStyle.jap. These files are in the "styles" folder of the skin's base folder (Ctrl-Alt-S). Now fire up jAlbum's built-in skin editor (Ctrl-Shift-E) and open Styles / Simple.css. Add the following rule to the end of the file:

#main { background-color:rgba(255,255,255,0.5); }
Save the file, and Make again. (Please note, the semi-transparent background will not work in IE6 & 7, but thanks god even IE7 has dropped below 4% by now)

Looks cool isn't it? And that's not all. You can make the whole background transparent if you want your site shine through the embedded album. Use the following code to embed the album into the target page. You need to add allowtransparency="true" to the embed code beyond jAlbum makes with its embed album tool (Album / Embed album).

<iframe src="{the path to the album}" frameborder="0" style="width:720px;height:700px;"
allowtransparency="true"></iframe>

				

Here is the embedded (and working) album:

 

Your comments are welcome.

Install Base skin from here.

New featuresHappy new 2012 everyone! I hope you've had a relaxing Christmas vacation. 

Yesterday we released jAlbum 10.3. The main improvements this time are as follows:

  • More memory conservative
  • Supports reading JPEG images in the CMYK color space
  • Support for hidden sub albums
  • Can generate seach engine friendly file names

As always, you can see the full list of improvements and bug fixes in our release notes. Now let's go through these four improvements in detail:

More memory conservative

Some users generating albums with thousands of images have reported out-of-memory conditions. I can't promise that this won't ever happen again (some broken images can cause this) but we've reworked the album engine to avoid accumulating image metadata during album build. Previous versions of jAlbum accumulated metadata for all processed images. You can imagine that to eventually cause out-of-memory conditions ;-).

The change made will cause some skins that rely on the "fileVariables object" to break (sorry for the tech talk). Until these skins are fixed you can either set jAlbum in "Compatibility mode" or just set that skin in "Compatibility mode" and things will work just like before. To set jAlbum in "Compatibility mode", open jAlbum Preferences and go to the "Advanced" tab. To just set the failing skin in "Compatibilty mode", press ALT+S and tick the "Compatibility mode" checkbox and save the changes.

CMYK images

Our users have been asking for jAlbum to support CMYK encoded JPEG images since 2003 so I'm happy to tell that we now finally read images using this color space. Most images are using the sRGB color space, and that's the preferred color space for web images, but for images intended to be printed eventually, the CMYK color space is richer. I wish to thank Werner Randelshofer for providing the 3:rd party library that makes this possible.

Hidden sub albums

You can now selectively hide sub albums (folders) from the thumbnail page listing, and media.rss file generation. This enables you to ensure that only those who knows the name of a sub album can access it. Just right-click on the sub albums (folders) you wish to hide and select "Hide" (then remake the album). Most existing skins should support this feature out of the box.

Search engine friendly file names

To give your beautiful albums maximal exposure, it's important that they are search engine friendly. Search engines like Google pay much attention to file names (so they told us), so if your "Hiking in the mountains" image in your "Vacation" album is called "IMG_1602.JPG", it won't match searches for "Hiking" and "Mountains" as good as files called "Hiking in the mountains.jpg" and "Hiking in the mountains.html".

By default jAlbum simply re-uses the original image file names for the generated images and html pages, but you can now tick the "Generate search engine friendly file names" checkbox under Advanced album settings->Naming to have jAlbum create more descriptive file names. jAlbum will now combine the name of the current image folder, the image title, description and keywords when it generates images and html pages.

Skin developers: You can create custom naming schemes by creating a custom "FileNamer" and passing it to the album engine by calling engine.setFileNamer().

Is there any downside with this feature, you may ask. Yes there is: jAlbum usually keeps track of generated files so that the corresponding generated files are removed from the album if you remove the original image. The same applies if you rename or move images within jAlbum, but with this feature switched on, this synchronization will currently not happen, so you may end up with more files in your album than you need. To clean things up, just remove the local album and remake it. Keeping this limitation in mind, I recommend to use this feature only when you're done with your album and simply wish to make it as easily found by search engines as possible.

Please give us your views on these changes! We're always happy hear what you think.

Wishing you all the best for 2012!

/David

Up to ten times faster album uploads

I'm excited to tell you that we've been able to boost upload speed up to 10 times with the new jAlbum 10.2 release! This speed increase applies when uploading albums to external sites. (Uploads to our hosting service are already accelerated). The improvement is possible by uploading multiple files simultaneously. The exact speed gain depends on multiple parameters (network, server, file size etc), you have to try it for yourself to see what jAlbum 10.2 means to you! Here are test results from a test I made the other day:

Album size: 26.51 MB (293 images. Album made with Turtle skin)
Classic upload time (one transfer at a time): 18m 32s
Upload time with 8 simultaneous transfers: 2m 25.8s
Speed gain: 7,63 times

This was just a random test. We've even measured over 10 times faster transfers! If you wonder why transferring several files simultaneously can have such a tremedeous effect, I can tell that the "per-file" negotiation between a client and server often takes more time than the actual transfer of a small file. As jAlbum albums usually consists of many small files (the thumbnails, web pages and web elements), there is a lot to gain here by doing multiple file transfer negotiations at the same time. If you run into problems with the new album uploader, let us know. It may be good to know that you can control the max number of simultaneous transfers under jAlbum preferences->Publishing:

Control the max number of simultaneous file transfers 

jAlbum's publishing preferences

 

jAlbum 10.2 has received several other improvements in network communication too: We now also support the secure "FTPS" and "FTPES" transfer protocols (as well as "FTP" and "SFTP"). jAlbum also works better behind http proxies - important if you're using jAlbum behind corporate firewalls. To summarize: It's now easier and faster than ever to upload albums using jAlbum. Read all about the enhancements in our release notes.

Manual http proxy configuration

Manual proxy configuration

I hope this massive speed improvement is a most welcome Christmas present. If you're as thrilled about it as I am, let me know! If you're missing something, let me know too. With your feedback we can ensure we provide the very best tool for presenting images on any web site.

Merry Christmas!

Have you noticed that the “Photo book” button is back in jAlbum's toolbar? This time this button will let you produce printed photo books with far more customization options than we could offer last year. We've teamed up with Blurb – one of the leading photo book producers – to offer you an easy and flexible way to produce gorgeous professional quality photo books out of your stunning jAlbum albums. The folks at Blurb are as devoted to photo books as we are to albums so I can assure you a pleasant experience and great end result.

 

5 book sizes

4 styles

20+ font faces

8 layouts

custom colors

 

To celebrate the launch of this integration you are offered 20% off the regular price for a book order placed before December 14. Just enter “JALBUMAPI” at the Blurb checkout. (Max value of $200 USD/CAD/AUD and 150 Euros/GBP and may only be used once on books created by you)

If you haven't figured out that perfect Christmas present yet, give a photo book to your relatives! I can assure you it is an appreciated gift.

Merry Christmas everyone!

You know, we are a small company – have no customer relations department somewhere in India – so we give support by ourselves in our spare time. It takes time, true, but it's great to hear your thoughts about our work. Thanks for all the positive feedback – almost every – and the negative too. It's good to know where you got stuck in album making and which features would you like to see in the future. Here is a small compilation of questions you ask frequently, most of them related to the Turtle skin, as I give support mainly to my skins.

Where can I change this or that?

Settings window

We are aware finding the Settings window isn't obvious sometimes, and currently working on to improve it. Still you can go to settings either by clicking the "gears icon" below the project on the left hand side or clicking the "skin icon" next to the selected skin or choose the "Album » Settings" menu. The skin's proprietary settings are gathered on the skin tab (called "Turtle" for example).

 

Select folder thumbnai

How do I change the Theme image?

In jAlbum you can pick an image to represent a folder, called "Folder thumbnail". This image will be used as the thumbnail in an upper level folder, you can click on to navigate to the folder. At the top level this image represents the album itself. This image will be used as album thumbnail when you upload the album to jalbum.net – otherwise it is usually not used in the album itself. However, in Turtle this image doubles as "Theme image" – you know, the big one on the thumbnail page. It is also used as thumbnail when sharing over social sites. You can select it by Right click » Use as folder thumbnail. You can even select a folder. As album thumbnail (at the top level) you can pick one that's buried deep in the subalbums too, just go to the Settings » General » Album thumbnail and scroll through using the little triangles. If you want this image only as theme image but don't want to include in the album, you can exlude it at the same time – jAlbum will take care of this situation. I know there is some ambiguity with jAlbum's terminology of "folder thumbnail" and Turtle's "theme image", but this is a kind of recycling of an already existing jAlbum feature for a similar purpose. Just remember – the "Theme image" in Turtle is the same as the "Folder thumbnail" you choose with jAlbum's right click menu.

 

Vertically split thumbnail page layout...

Settings window

This one was not asked frequently, but I guess most of you don't even know this feature exists, did you? If you want to have a portrait oriented theme image on the left hand side with the thumbnails right to it, just use portrait image bounds in the Settings » Turtle » Design » Theme image size box, e.g. 400x500.

 

The album won't start, only load animations show up instead of thumbnails. What shall I do?

This must be a javaScript error. The most common source of this error is using quotes or apostrophes in file- or foldernames. I know it's tempting to give folders plain english titles with apostrophes, but web servers, web technologies (Javascript, Flash, ...) and external libraries (Google Maps, Paypal, Facebook) might fail on these. Those who author websites know it well, but you should think of it too. When you create an album, you are creating a website. So keep with the plain ol' web-safe characters ( a-z A-Z 0-9 . - _ ) as folder and file names. You can give them descriptive titles in Edit mode » bottom right corner » Title, and use any character you like. Also you might want to check if the Settings » Advanced » Naming » URL encode links setting is on, which might help with file and folder names containing non-websafe characters.

Settings window

 

How can I add description to a folder?

Do you see the other red arrow above? Yes, that's where you can add descriptions to a folder. These desriptions will appear below the page title, and in the list of the sub-albums. But how to get to this page? If you are using double click to swap between Thumbnail and Edit mode, you might find it hard to get to the edit mode of a folder, because if you double click it, it will simply take you to the images in the folder. First select the folder's thumbnail, then either use the Edit mode button on the top right corner or click the Edit link over the thumbnail or use the context menu (right click) + Properties. You can even use HTML formatting in the folder descriptions. For the top level page just go to the Settings » General » Album description. It's the same as a folder description but for the album itself.

 

How visitors can download the originals?

As a first step, obviously you need to include the originals in your album. You can do this by a global switch on Settings » Pages » Link to (originals | hi res images) via scaled images. Or just select those images where you want the originals attached, Right click » Include original. The album will show a link (a button with a down arrow) to the original on the Info panel. When the visitor clicks it, the image will open in a new browser window. This is how browsers handle links to images. If you want to download it, just save from the new window (right click » Save as... or by drag and drop). You can also save it directly from the album by right clicking the download button, and selecting "Save link as...".

Settings window

 

How to stop visitors from downloading your photos?

While you can take steps to stop saving your images, there's no absolute protection on the web. One can easily take a screenshot for example, you can't stop it. Also the real source of the images can be easily revealed with debugging tools. Remember, an image visible on the web is also suspect to copying. If you are concerned about stealing your images do the following:

  1. Never upload the high resolution images along with your albums
  2. Apply watermark
  3. Use Turtle's Right click protection feature (Advanced tab)
  4. Add a copyright notice to the album header or footer, you can even add one to the image caption (Caption templates)

 

How can I use the same settings in several albums?

If you want all your new albums to start with the same settings just make an album with the desired settings, then choose: File » Save as default... This way all your new albums will start with the saved set of settings. If you only want one album to use the settings from another, just use the File » Import » Settings from jAlbum project menu.

 

How can I add my logo in the header or footer?

First save your logo as PNG or GIF (8 bit with transparency) or 32 bit PNG in the final size (shouldn't be too big, e.g. over 200px wide). Place this image in the skin folder's (Ctrl-Alt-S from jAlbum) 'res' subfolder. You might need to have administrator privileges. Please don't overwrite the skin's own logo.png file. Now you can refer to this logo in the header or footer as: ${resPath}/mylogo.png. Here is an example:

<div class="center">
<p><a href="http://mysite.com/"><img src="${resPath}/mylogo.png"></a></p>
<p>Please visit my site!</p>
</div>

Please note, if you make any modification to a skin, it will be lost after a skin update. So please keep track of what you've modified, and save the necessary files in another location (e.g. a pendrive), to be able to re-apply the changes to the new skin version.

 

How can I translate a skin?

It is now pretty straightforward with jAlbum's built-in translation tool. Pick you language in the Tools » Preferences » Language and use Tools » Translate » Translate selected skin if you want to do it from scratch or select Update to translate only the missing keys. If you have finished with it, please send me the translation file (Tools » Translate » Find skin translation » texts_XX.properties) to be attached with the next skin update. Thanks in the name of your fellow citizens.

 

How to optimize Turtle albums for less capable devices?

Turtle 2.x is using many advanced visual effects, like transitions, zoom effect, drop shadows, etc., which might consume too much of computation power on less capable devices. Here are my recommendatons to make the least resource-heavy albums:

  1. Use small image sizes, e.g. 600x480 (Settings » Images » Image bounds)
  2. Use smaller theme image e.g. 600x200 (Settings » Turtle » Design » Theme image size)
  3. Disable some of the transition effects, a simple Cross-fade should do (Advanced » Transition type)
  4. Disable the drop shadows (Design » Use 3D effects)
  5. Select a style with no graphic backgound, Black, Gray, White or Yellow

 

Plase write me if you are still missing something. I plan to cover more topics like shopping cart integration, geotagging and video embedding in the upcoming posts. Stay tuned!

/Laza

Newer posts >
< Older posts