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
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.
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
Do not use this method if the album has been made with a responsive skin, it will not work as intended!
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.
Uou can also get the embedding code in this way...
Make sure the correct album is opened, in this case it's the "Sample Portfolio". Then go to the Share tab. At the bottom on that page you can find Embed Album, click on the button "Copy to clipboard" on copy all the embedding code.
Now you just have to paste the code in your website's source code.
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.
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. You can learn more about the blog badge and its advanced features here.
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.
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License