Top 10 album headaches

Albums today are complex pieces of code. Starting with images and videos coming from various sources, processed through jAlbum and skins authored by many developers, the albums are uploaded to very different servers, utilize tons of 3rd party services over the internet, and are viewed on a multitude of device types, be it a mobile, a tablet or a desktop PC. All this in a constantly moving environment, where browsers change, OSs change, and remote services change day by day. No wonder the final result is flawed sometimes, or it gets flawed over time. But we are here to help. We – jAlbum developers – all do customer support, so we’re aware of the classic pitfalls. If jAlbum had fewer settings, fewer things could go wrong, but jAlbum is a power tool. Here are some pieces of advice to avoid cutting yourself while using it.

1. Processing subdirectories

In general, you should always allow jAlbum to Process subdirectories. Previously, there was a quirky method of creating the so-called “master album” (an album of albums) where turning this option off stopped jAlbum from processing these (already made) albums again. Fortunately, since jAlbum 14 we have introduced the “Web locations”, which makes this task much simpler, so today there’s no real use for this option – it’s left there for backward compatibility.

The other one, Process only updated directories was also useful in the old times, when the subdirectories could work independently of each other or the common resources from the top level’s “res” folder. Today the folders of the albums are much more interconnected, they always rely on common resources (like the Javascript or CSS files), so once you update the album with this setting ON, those subfolders where nothing has changed might get broken. The tricky thing is they usually don’t get broken instantly. They gradually show signs of malfunction only after a skin update, and by then users don’t remember they’ve changed this setting. (Although a skin change renders these orphaned folders instantly unusable.)

Those skins that rely on a database (JSON) are even more prone to break if you don’t let jAlbum go through the whole folder tree.

jAlbum is intelligent enough, so once you have processed a folder it will not reprocess the images again, only the HTML files, which is just a matter of seconds.

I hope I managed to convince you to keep these settings as I marked in this picture. See Settings → Advanced → General page.

2. Upload errors, manual FTP upload

When you work locally, everything works the same way, reproducible. The internet, however, is full of potential errors. When you upload a large album it might happen the connection between your PC and the server gets broken (IO ERROR), the server drops the connection (READ END DEAD) or jAlbum gives up on retrying (TIMEOUT). Don’t panic, this happens now and then. jAlbum (like anything on the internet) is prepared for such errors. All you have to do is Upload the album again. It will continue where it has left off, so don’t worry, it won’t upload everything all the time. If the upload fails, jAlbum will display a little triangle () in the lower right corner – you can click for the full log.

If uploads don’t play well with your server, you can switch to another FTP client and test (e.g. ftp4j). jalbum has two ftp clients for the standard “FTP” protocol and three for “sFTP”. If you get frequent connection timeouts you might want to check if your firewall (or internet security software) isn’t blocking jAlbum’s traffic. Check if jAlbum is allowed to communicate through ports 21 and 22.

With jAlbum you can use an external FTP (or sFTP) application too to upload albums. While jAlbum always knows which files it has changed, when you upload the files manually you often don’t. When the FTP app relies on file modification dates, it’s not as reliable either. For example, if you add one new folder only, you might think it’s enough to upload that folder. That’s not true. The files always change in the root folder, the /res folder, and all the HTML and JSON files throughout the entire album after a Make. It’s hard to follow – much easier to leave this to jAlbum. And jAlbum’s built-in FTP client is really fast, trust me. It can manage 6 simultaneous uploads! So unless you’re fully aware of what you do, I suggest you rely on jAlbum’s built-in Upload tool. You can choose from 5 different clients inside jAlbum, so hopefully you can find the one that works the smoothest with your server.

3. Broken album in local preview

Do you only see one or two rows of thumbnails in albums made with Tiger or Photoblogger using the local preview? That’s because these skins are based on a database format (JSON), which is not recognized by browsers as internet files (like an HTML file), and in an attempt to hide local files from phishing attacks, they block access to these files. The easiest way to preview these albums is by using jAlbum’s built-in browser or utilizing jAlbum’s built-in web server to view the page in any browser. See Preferences -> Preview! If you’d like to distribute the album on a USB stick you will have to allow “local file access” using a command line option. Save this file to your desktop (Windows / Mac), and double-click it. Close all Chrome windows before that! Do not visit untrusted pages in this mode!

4. Garbage instead of accented letters, missing icons

The internet has settled on using UTF-8 as a standard for international codepage support. Previously we’ve seen some cases where it didn’t work, e.g. in old Internet Explorers, using the local album, but today UTF-8 is ubiquitous, it will work locally in any browser, on any server being it a Linux or an MS. So I suggest keeping this option always on. The other option stemmed from the same old use patterns Naming → URL-encode links which is also better to be kept on, although it is supposed to not break pages if left off. (Tiger skin turns these options on whatever you choose because its database is always encoded with UTF-8.) Read more about character encoding problems in jAlbum’s Wiki.

If the wrong letters appear only in the headline font (Google fonts) – e.g. question marks –, it might happen that the font doesn’t contain the required codepage. Tiger and PhotoBlogger try to load the fonts with the language set in Preferences → Language, but not all Google fonts have all the codepages. You can check if a particular font has the required codepage here. Turning on Settings -> Tiger -> Advanced -> Add latin extended set the skin will load an additional codepage on top of the basic Latin, which contains all the characters for most European languages.

If no icons appear in the album – Tiger or Photoblogger – it’s probably because the server is not properly configured, and it sends the icon font file as plain text instead of binary. You will need to add .woff files to the MIME types application/x-woff on your IIS (Azure) server, or ask your hosting provider if you don’t have access to these settings. Turning on Settings → Tiger → Site → Site admin → Use Microsoft IIS or Azure server configuration might help too. On Apache servers, it is supposed to work out of the box.

5. Album, folder, and file names with accented or special letters

In theory, the UTF-8 encoding should take care of this, but it’s always been a struggle for a skin developer to make special/accented letters work in file- or folder names. And even if the skin can handle them, there’s no guarantee that every connected service will, e.g. social sites or PayPal. So if you want to remain safe, use plain album and folder names, and keep the original image file names. Naturally, you can use any character in the final album, it’s just about the file and folder names that must work on the server and on the visitor’s PC too. (Using non-ASCII characters in file and folder names renders the ZIP feature broken too, resulting in invalid letters in file names after unzipping.) Avoid some frequently used letters (besides the accented ones) for example: ' " & @ # ! $ / * + ( ) [ ]

When creating a new album use e.g. “Mary and John wedding” (spaces are fine), then go to Settings → General and change the Album title to “Mary & John wedding” – this time only the visible title will change.

The same goes for folders too. Add a new folder with the icon using simple (web-safe) letters, then switch to Title view and provide the final title (and Comment for lengthier text). This time you’re free to use any letter. (In the comment HTML tags are also allowed.) The same is true for regular files.

6. Facebook Share problems

There is an ongoing battle between Facebook and the rest of the world behind the scenes. You only see that your Facebook share button doesn’t work as expected, e.g. shares only the index page, not the individual images. On one hand, it’s comprehensible Facebook wants to get rid of newsfeed manipulations and let only static pages be shared for this reason, on the other hand, they make fully legitimate uses impossible (like sharing individual images of an album) fighting back the malicious use. Some years ago they let sharing – even internal stages of web apps – through a simple link. They’ve changed the syntax now and then, and finally, they made sharing possible only through their API (application interface). After the latest update this summer, they’ve removed the customization possibilities. So you can’t customize which photo, title, and description to share, only the meta tags from the static page will be taken into account.

If you want to use Facebook’s other features (the Box, Like, or Commenting) you need to have a Facebook page. A private account doesn’t work, as you can’t assign “Apps” to it. You will have to create a new App here (click “Add new App”), and provide your website’s URL. Don’t forget to make it “Live”! For it to work properly, you will also need to fill in the Settings → Tiger → Site admin → Upload path box, because Facebook can work only with absolute URLs, and if this is not provided upfront, the skin can’t generate the proper links to album thumbnails for example.

If you’d like to check if everything is right, copy/paste the uploaded album’s URL here and click “Debug”. This tool is also useful if Facebook has cached some wrong data, and you would like to get rid of that. (Click “Scrape again”!)

7. “Ooops” instead of map

Google Maps requires a unique “API key” for every site since 06/2016. I can understand this because anonymous use could easily lead to server overloads, and even to malicious attacks. Click the “Create new/Manage” link in Tiger’s user interface to create a new key, or get one you’ve already created before. They still treat older maps – as they call – “grandfathered”, that is, you don’t have to provide the API key in those albums. The maps in new albums, however, will be grayed out if no API key is used. The same goes for local previews, as you can’t create an API key for local files, for obvious reasons.

8. Custom code or caption template mistakes

Modern skins allow you to add HTML code at several places and allow you to edit the caption templates too. This comes with some risks though. If you enter the wrong HTML code, the whole album might break. For example, you need to close most HTML tags, (e.g. <div>... </div>) otherwise, the code that comes next, will be nested into your code, resulting in a broken layout. (The exceptions are <img> <hr> <br> <audio> <video> <iframe> <input> – the so-called “void-elements”.) Also note, that modern skins are based on the HTML5 standard, in which some tags are not allowed, like <center> <font> <frame>, etc.

Instead of using inline styles, e.g.
<p style="text-align:center; font-size:1.2em;"></p>
use CSS classes:
<p class="mycomment"></p>
… and add style definitions through the Settings → Tiger → Site → Custom code → CSS box:
.mycomment { text-align:center; font-size:1.2em; }
(Don’t forget the dot “.” before the name!)

9. Broken Tiger or Photoblogger album after upload

Not all servers created equal. Some of them are not prepared to handle the required JSON files out of the box. Microsoft’s IIS or Azure servers for example. (You can check the server’s type here – look for “Server: ”.) If you have access to the server settings, you can make the required changes by yourself. Also, once you’re there you might want to check if every file type is properly defined. (IIS servers are famous for being poorly configured.) You need to Add or check the existence of the following MIME types:

Read here how.

If you don’t have access to the server settings, you might want to ask your hosting provider to add support for the types above.

You can also use Settings → Tiger → Site → Site admin → Use Microsoft IIS or Azure server configuration to ask the skin to create a web.config file in the album’s folder, which enables these types for the current album only. Make + Upload

If your server is Apache/Linux, and the album shows the “The album’s main database file is missing or broken!” error, then the server isn’t configured properly or it hasn’t been updated in the last century. Ask your hosting company to get things in order.

10. Turtle to Tiger transition woes

Moving Turtle albums to Tiger skin is most of the time a painless process, but there are some things you need to be aware:

1. No separate slides mode exist in Tiger. Tiger albums are based on a database, which makes it easy to reach any photo from any page of the album. And this database would be gross (time consuming) to load on every slide page. Just like quitting Excel and opening every time you change cells. I think not everybody will like this, because they’ve built albums with individual photos, linked or shared through social sites, let indexed by Google one-by-one. In this case, it’s probably better to keep with Turtle.

2. Although Tiger tries to import as many settings from Turtle albums as it can, they might not fit with Tiger’s layout as good as with Turtle’s. I suggest looking through the following settings and set to Tiger defaults:

<h5>${fileLabel}</h5><br />
<div class="comment">${comment}</div>

That’s it for now. Write in the comments if you feel something has been left out.