You might've missed, but Turtle skin can be used to sell your photos or products too. To use this option you need to hold a Pro license or a Power storage account with jAlbum. Although the payment is routed through Paypal or Google Checkout, your customers don't need to be signed up with these payment processors, they can simply use their credit card as well. Here are the steps to create an album with shopping cart, and what the visitors see during the shopping process.

Creating the album

First collect the photos (of the products) you want to sell, and create a new album in the jAlbum application.

• Add the photos by the Add button or by dragging them onto jAlbum
• Choose Turtle skin
• Add an image to be used as "Theme image" on the index page. Right-click → Use as folder thumbnail, and Right-click → Exclude
• Switch to Edit mode (Pencil icon) and add captions to your items with the details of the product (you can use HTML code too in the captions)

Setting up the shopping cart

In order to use either Paypal or Google Checkout as payment gateway you need to be signed up with them. Here are the links to sign up with Paypal or Google Checkout. With Google Checkout you can usually use your Google Account if exists. For receiving more then just one or two payments a year you need to have a Merchant Account. Please read the provider's documentation first about the conditions.

• Make sure you are signed in with jAlbum. If you are not, there will be a button on left top of the window with "Sign in". If you've singed in after you've opened the album you might need to re-open the album by clicking the "Empty project" and back to the actual again.
• Go to Settings window, and switch to Selling photos
• Check the Add a smart shopping cart to your photos
• Choose your preferred payment processor: Paypal or Google Checkout
• Add your Seller ID: the email you are using with paypal or the long Merchant ID string.
• Specify the currency you want to receive payments in. You can use only one currency in a shopping cart!
• Add Overall handling if applies. This is an amount will be added only once on top of each finished shopping cart. E.g. a flat package and posting fee.
• Add your default Shop options in the following syntax: Shop option name=Price, e.g. 10x15" Print=1.00. Please note, you must not use the currency sign here!
• If you want to add a shipping fee on top of each item you can use the following syntax: Shop option name=Price+Shipping, e.g. A1 poster=50+10 - this means the price for the poster is $50, and will be added $10 on top of each as shipping cost.
• You can add as many options as you wish – each in a new line –, and naturally you can combine the ones with and without shipping fee

Setting up individual shopping options for the pictures

If your items have different prices or you want different options attached to them, no problem, you can specify individual shop options in Edit mode. Click the Pencil icon on the top right, and open the Image data tab near the bottom right. There you can specify the shop option you want for the actual picture only. The syntax is the same as with the global options, see above. If you want to use the default option just leave this box empty. If you don't want the shopping cart added to a specific picture just add a minus sign here.

Final touches

Before you release the album to the public you might want to tweak the album here or there. Here are some of my suggestions for albums made for selling.

• Set the shopping cart as visible by default: Settings / Turtle / General / Info panel visible by default and Selling photos
• Add Terms and Conditions as Album info Settings / Turtle / Header / Album info window or as a separate page.
• You also might want to add social plugins to your shop on the Settings / Turtle / Sharing page

Now it's time to see what we've done. Hit Make and when that's finished hit Preview or press F12. You can now check if the shopping works, but do not go to checkout unless you have a sandbox account with Paypal.

The shopping process

• Your visitor will see the shopping cart by default
• He / she can choose the shop option and specify the quantity. The total amount will be displayed next to it.
• The Add to cart button places the item in the shopping cart and a popup window will come up with the items already placed in the cart
• The View Cart button is there to check the shopping cart content without placing a new item in it
• See below how Paypal's shopping cart looks like. You can remove items, change quantities here, and when you are ready you can go to check out and pay either from a Paypal account or by a Credit card. See right.
• When the payment has completed you will receive a notification in email with the list of sold products each with folder and file name, the shop option chosen and the quantity

Now it's your turn to fulfil the order

Failing to do so will result in a "dispute" opened by the customer, and if there's no agreement within 3 weeks, Paypal will get back the money from the seller, and devalue its "reputation", which easily lead to a locked seller account, with locked money too.

Conlusion

Opening a shop with the help of Turtle skin is that easy. Fits perfect for web-shops selling just a few items and don't need advanced commercial features, like discounts or database-driven stock handling.

See the final album here.

/Laza

Originally posted on Lazaworx.com

We just released jAlbum 10.4. It should perhaps have been labeled jAlbum 11 cause it's packed with improvements and important bug fixes, but most of the changes go under the hood, so we decided to stay at 10.4. There is actually only one change you can notice in the user interface (hint: right click an empty area of an album project), but it opens the door to a whole world of possibilities:

jAlbum is now not only a tool for making awesome web albums. It's a site maker too :-).

The inspiration

I was passed a link to a website that has a particularly good album integration:

www.tedlansingphotography.com

What you see is a typical photographer's web site, where the images are in focus but there are also links to about, contact and blog pages.

jAlbum is now generic enough to support the making of these types of simple portfolio sites (all but the blog).  Here is a sample site. This is made possible by allowing users to mix .htt pages (html template pages) along with images in their album projects. The .htt files will get processed just like the template pages of skins, but they can contain any html, not just album specific html.

Here are the advantages:

• A user can easily create a custom landing page as an introduction to his album by putting a custom "index.htt" file in the root image folder. With that one present, jAlbum will ignore the skin's "index.htt" file for that folder (that produces the thumbnail overview). This behavior mirrors how web servers treat the existence vs lack of an index.html file in a folder.

• A user wanting to create a site looking like the example above would simply create sub-albums for each sub-section plus three more .htt pages called About.htt, Contact.htt and Blog.htt (the last one simply containing an iframe towards a blog service). To have consistent navigation added to the top of all generated pages, each .htt page includes a standard "page-header.inc" and "page-footer.inc" page provided by the skin (and ultimately generic ones provided by jAlbum if the skin lacks these files)

• To simplify creating these custom "About.htt", "Contact.htt" and "Blog.htt" files, jAlbum has a new context menu called "New page" that grabs an "empty-page.htt" file from the system folder. The template for the empty-page.htt looks like this (double click to open):

Skin developers can easily modify their skins to support full web sites by including a top-level navigation bar that links to the extra .htt pages users create. They should also provide custom "page-header.inc" and "page-footer.inc" files so that any extra pages made by users get the same look and feel and navigation that the album pages have. jAlbum provides code for a simple navigation bar, so a minimal code for skin developers to add can be:

<ja:if test="<%= JAlbumUtilities.hasWebPages(rootFolder) %>">
    <ja:include page="navigation-bar.inc" />
</ja:if>

Sorry for the tech look of that. It's only meant for skin developers. That code first checks if the user has added custom web pages to the top level of the album, and if so adds a navigation bar.

So far, the following skins include site support: Turtle 3.0, Base 2.0, Galleria and Minimal. All are bundled with jAlbum 10.4.

Resource files

A web site is not just about web pages and album images. You also want to include other resources, like a custom logo, favicon, about-page image, css and such. Put those files inside a folder you name "res" (stands for "resources") of your "album project". That folder will automatically be hidden so it's not visually included in the "album" you make, but the whole folder is copied to the final "album" (should be called "site", right?), and all resources within can be referred to via the ${resPath} variable, no matter where in the folder hierarchy you are. 

Conclusion

So does a final site look? Here is a sample made using the Base skin. Notice the new "About" and "Contact" pages. The user didn't have to write one line of html to accomplish that.

You can download and unzip this sample album project if you wish to see how this sample site was made. Just drop the unzipped project folder onto jAlbum 10.4 or above to open it.

I'm excited about the potential this brings! We're not trying to make jAlbum compete with Dreamweaver, but why not make it easy to produce simple, but self contained portfolio sites? As jAlbum albums aren't that well suited for integration with server side CMS tools, making jAlbum produce the full site will so to speak fulfill the initial needs for many photographers wanting their own portfolio site.

The plan is that the next major jAlbum version shall contain a list of "site templates" that pre-populates an album project with all files needed for a full blown web site, but until we're there, this post will probably trigger your feedback and our skin community to tweak their skins to support the making of full web sites too.

Now I'd like to hear what you think!

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); }

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.

Happy 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

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