Integrate an album with a website or blog

When you have published an album with jAlbum, there are a few different methods for adding the album to your website or blog. This tutorial walks you through each option, but you have to decide for yourself which of them that best suits you.

Getting started

OpenAlbum.jpg

Before you can add your album to your site you need to know where the album is located, so we need to find the address (or URL, as it's also called) of the album. Start by going to your jalbum profile page (your username.jalbum.net page).

Click on the album that you wish to add to your site. This will open up the album. In the top of the album you will see gray a action bar with several buttons (back, comment, like, etc.).

On the right side of the action bar you will find a button that says "Close bar". Click that button to close the action bar. You are now viewing the album in its purest form, without the action bar.

The address to your album is now visible in the address field of your web browser. Make sure that you copy the address and save it somewhere, you'll need it later.

BrowserBar.jpg
Album view with the action bar
NoBrowserbar.jpg
Album view with the true address to your album


Option 1: Add a link to the album

This is by far the simplest method. All you need is a suitable place on your site to place the link. This could be in a menu, in the body text or in a footer, or someplace else. It's up to you!

Open up the page you want to edit in your website editor, find the place where you want to insert the link, and paste in the following HTML code:

<a href="http://janedoe.jalbum.net/Sports">Photos</a>

Replace the address in the example above with the address to your album (see the Getting started section above), and replace the text "Photos" with the text that you want your link to say.

If you are using an editor that doesn't use HTML (like the "Visual" tab of the Wordpress post editor) simply use the link creator tool of your editor to create a link using your album address as the URL for the link.

Option 2: Embed the album

Please note that the instructions here only apply if you are using the jAlbum desktop application version 10 (or higher) to create your albums.

EmbedAlbum.jpg
Embed the album
EmbedCode.jpg
The generated embedding code

This method is slightly more complicated, but embedding your album instead of just linking to it will make it look like the album is actually a part of your site. This way you can keep any page headers, page footers, navigation etc. that your site has while the user views your album.

Embedding an album requires quite a bit of screen space so make sure that you find a good spot with plenty of space. You may even have to create a separate page to embed the album in.

To embed an album once it has been published, select the album from the album list in the jAlbum desktop application then right click to bring up this menu:


Selecting the Embed album option brings up a small dialog with the HTML required to embed the album. Press Copy to clipboard to grab it and then paste it in the HTML of your site or your blog (but make sure it is in HTML editing mode).

In the same dialog box, you can also set a preferred size for the embedded album allowing it to use as much screen space as you wish. Some skins will require a larger dimension than others, in order to look their best or even make sense.


Also note that some blog sites will not allow you to add iframes for security reasons. In such cases you have to use one of the other options to integrate your album.


Making your album blend in

Here's a few tips on how to better make your album blend into your site:

  • Set a good embed size
To avoid scrollbars you need to make sure that your album fits into the intended area. To make your album smaller, go back to the jAlbum application and reduce the image size (see the "Images" tab of the album settings) and reduce the number of visible thumbnails (how you do this depends on which skin you are using).
  • Pick a suitable skin and style
Make sure that you pick a skin and style that matches the color and layout of your website. The desktop application has tons of skins to choose from. Browse through the skins section and explore the different skin options to find your perfect fit.
Tip! One of the most flexible skins around is Mr.Burns5, it will be able to adapt to most any size.

Check out the result

We have put together a small sample site called "My Travels". On this site you will see an example of what an album embedded using the method described above might look like. The skin used on the sample site is Galleria.

View sample site

Option 3: Use the jAlbum Blog Badge

BlogBadge.jpg
Blog badge page

The jAlbum Blog Badge lets you easily insert a list of your jAlbum albums in your blog or website. All you need to do is to copy a small code snippet and paste it into your blog.

Create a badge now!


Option 4: Edit the skin

If you don't want to embed your album but still want to keep the look and feel of your site you can always edit the skin that you are using.

jAlbum skins are basically just a collection of template files. If you have some basic knowledge in HTML and CSS you can easily modify most jAlbum skins to better fit your purposes.

Learn more about editing skins