Create eCommerce Online Galleries With Light Blue Software

Following on from my post on customising web galleries for Light Blue, here is part two where I am going to show how to add templates, create web galleries, upload them and password protect your client’s galleries.

The focus previously was in customising the galleries, however, this tutorial is aimed at passing on a custom template to a photographer and for photographers wanting to upload their web galleries and password protect them for their clients. Light Blue, is business management software for photographers, running on both Macs and PCs. It can be used to run your photography business, helping you to keep contacts, calendars, prices, invoices etc organised, and it can also be used to quickly create web galleries enabling you to sell your photos online via PayPal.

The software ships with several pre-built templates which can be used immediately for creating your gallery pages. If you have had a template created by a designer, there are a couple of extra steps you need to take to add them to your available templates in Light Blue. Once you have your templates in place, there is a 4-step workflow to getting your photo galleries online and sharing them with your clients.

Create the gallery folder using Light Blue.
Upload it to your web space using FTP (Transmit, FireFTP, Fetch etc).
(Optional step) Password protect the new gallery directory/folder.
Create a page link or a blog Post with a link to the new gallery directory/folder.

Adding or Creating New Templates

Open Light Blue and go to the Settings tab to see where your Archive files are being kept. Yours will be in a different location to mine most likely:

Locate this folder on your system and if you have been supplied with your own watermark file, open the web gallery watermark folder. Rename the file inside here (I called mine original-watermark.png) and copy the new supplied watermark in as shown:

If you are creating a watermark, I would suggest you make something that does not distract too much from the photographs themselves. If you use Photoshop (!), start by creating an image about 210px wide. The height will be determined by your watermark’s aspect ratio. Give the file a transparent background and add your mark on a layer. If you are using a white watermark, reduce the opacity to around 45% and save the file as a transparent .png file.

Back in the Light Blue settings, you can either over-write an existing template or add a new one by clicking the plus button on the web galleries tab. Set or change the values in the top row of boxes to suit the sizes your designer has chosen:

If you have been supplied with template files, click on the folder icon to the left of these text boxes – it has a little green arrow on it. This opens up the folder on your hard drive where all the templates are kept, open at the template you will be using:

Double-click the folder so you are seeing only the contents of this folder in your Finder window. (Here, I am showing my path to this folder for reference.)

Replace ALL of these files with the ones inside the folder you have been given. Delete the content first then drag the new versions in. It should look exactly the same with the new files in place. These contain all the styling for your galleries and can now be used as we start the 4-step workflow shown above.

Web Galleries Workflow

1. In Light Blue, click the Shoots tab and select your shoot by clicking the arrow to the left of the Ref:

This opens the main page for the shoot. Some things to note here, later on you will be building your gallery and the Title (in this case Stuart’s Gallery) will appear as the title of the gallery on the page. The date/time will also appear in brackets, so make this match your wedding/shoot date. Check that you have selected the correct price list for your gallery, then click on the Linked pictures tab:

Clicking the Create folder button opens a new Finder window where you can choose the destination for your Shoot folder.

A new folder is created (you can rename this if you want in the usual way) with two sub-folders inside it; processed and unprocessed. You need to move/copy your raw images here. If you want to use an existing folder, click the Link folder button:

Click Import images and you get to choose a prefix for the images. This starts the import process (using the processed images folder’s contents. When the import is complete they will appear with their filenames, date and file extension shown.

In the Web gallery panel, click on the Template name to select your template. If you click the selection arrow (in red) it will open the template files directory/folder. Give your folder a name. This is the name of the folder you will be uploading so make sure there are no-spaces-in-the-name. Use dashes or upperCaseLetters to name the folders. The spelling is important so remember whatever convention you use, or your link that you add later will not work! Click the Generate gallery button:

A dialogue panel opens, click the Build button and sit back as your web gallery is built. A new web gallery sub-folder is created inside your Image files folder (above), and the folder you have just built is shown. You can open it and test that everything is as intended, by clicking the index.html file inside your new folder:

2. Connect to your website using an ftp app (Fetch/Transmit/FireFTP etc) and navigate to your chosen upload destination. In this case, it will be a “clients” folder/directory. Upload the new folder – the whole thing, not just the contents:

3. This is an optional step if you client wants their web gallery directory password-protected. In a browser window, navigate to your cPanel (as used and shown here) or web hosting Control Panel and log in. Go to the Security section > Password Protect Directories:

Click the folder icon next to the clients folder name, then click on the name of the folder you want to protect:

In the top section, tick the Password protect box. Name the directory – this will be the name that shows up in the login panel and does not have to be the same as the folder you uploaded:

Click the Save button. You can < Go Back to create a Username and Password for your client (make a note of this!!!) then click the Add/modify authorized user button. Click the < Go Back button to return to the previous screen and add any other users who you want to have access to this folder, or just use the same Username/Password for everyone. Users will now need to log in to access this page when you send them the link:

4. On your website or in your WordPress/Joomla (insert appropriate CMS here) you can now create a blog post – add a featured image and whatever text you want, along with a link to your newly-created and uploaded folder. When viewed in HTML mode it will be something like: http://www.your-domain.co.uk/clients/st-gallery/. Publish your page and share the link and any login details with your client.

That’s it – thanks to Light Blue you can now enjoy selling and showing your photographs online.

If you would like any help building or redesigning your websites, drop me an email and I will be happy to discuss what I can do for you.

other page