jAlbum tutorials

Add an album to your 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

    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 f ield of your web browser. Make sure that you copy the address and save it somewhere, you'll need it later.

  • 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.

    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:

    Screen shot of right click 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.Burns, 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.

    View sample site

  • Option 3: Use the jAlbum Blog Badge

    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