Customising Web Galleries Using Light Blue for Photographers
Recently, a client who is a wedding photographer, asked me about including some eCommerce facility so he could sell prints from his website. He has a client area built using WordPress and galleries were being delivered through the NextGEN Gallery plugin. Finding a way to sell images from a gallery in WordPress turned out to be a challenge on this occasion…
The problem was that some of these galleries extended to over 400 pictures so manually inputting them as products was very time-consuming. After trying various options like Jigoshop, Cart66 and Shopp, he decided to invest in some 3rd-party software written specifically for managing a photography business – Light Blue. Using Light Blue, I was able to build web galleries for Andrew that can be uploaded to his site, where he can offer prints to his wedding clients, in a range of sizes, with payments being handled through PayPal. Customising the templates included with the software involves editing a few files, mainly CSS and HTML. (The jQuery/JavaScript editing for the lightboxes is less of an issue I imagine.) Let’s dip in and make a start!
If you already have Light Blue set up, jump to the styling section here.
This is part one of a two-part tutorial. Part two is aimed at designers who are asked to style Light Blue templates for their clients, how to use the templates to generate online galleries, and password protect your client’s photographs.
Light Blue
Download and install a 30-day free copy of Light Blue from their website. Both Mac and PC flavours are available – I’m working on a Mac so this is based on my system. Install it in the usual way for your operating system and you will be asked to select a folder for Archive & backup. Your theme templates are going to be created in here during installation.
Once installed, go to the Settings tab and enter the name of your client in the Registration name field for the Licensing section. This is going to be used in your page templates so it is helpful to enter their name so you can see how it looks on your pages. Still on the Settings tab, click the web galleries section on the left to input the URL for the website and their PayPal email address:
If you want to create a Price list for your client, click the Price lists tab across the top of the Settings bar and add your print sizes and prices. These are going to show up on your pages as drop-menu options. Some of the templates already have some price lists that you can edit if you prefer. If you create your own, you need to make sure you tick the “Use on web” box or they won’t appear. Now you need to go to the Shoots button and import some images to use for your galleries.
Create a shoot by filling out some details and set your Price list. The Title is going to appear as your main gallery page heading, on the page, and by default, the Start date/time appears next to the title in parentheses. Click on the Linked pictures tab to import your images.
Clicking the Create folder button creates the main folder to hold your shoot images and web galleries. It has 2 folders inside it for processed and unprocessed images.
Alternatively, you can link to an existing folder using the Link folder button. For the purposes of styling your web gallery template, drag or copy your pictures into the processed folder and once they are there click the Import images button.
Styling Your Web Galleries
You can now check through the supplied Light Blue templates to see if you have something you want to work with. Click the field next to Template and a drop-menu appears with a list of available templates. Create a folder name, bearing in mind that this will be the name of the folder you are going to upload. Make sure there are no spaces: use dashes, underscores or camelCaseCapitalising for your folder name.
Click the Generate gallery button and your folder will be created, with the name you chose above. Open that and you will see an index.html file that you can double-click to load in a browser and check out your gallery. Generate previews only creates the images that will make up your thumbnails and large images. Once your gallery page loads in the browser window, you can see how things look and repeat the process of generating new folders using different templates. This is the slow bit, but a quick way of working is to use a small test set up of images, say 10 – 15 so you get an idea of how they sit on the page. When you find a template you want to work with and style, click the arrow next to the Template name and it will take you to the list of templates. You can now set the sizes in pixels of large (lightbox) images and thumbnails as well as the image quality. folder where the necessary files are kept.This can also be accessed by going to Settings > Web galleries:
Clicking the folder icon with a green arrow on it, beside the template name takes you to folder containing the files you are going to edit. There are 2 HTML files and a resources folder. The template you choose determines what is inside the resources folder, but it may have an Images sub-folder and folders for Scripts and Styles. Generally, the css styles for the pages will be declared in the pages themselves. They can be moved out into a separate css file that you link to but this is only advisable if the image sizes are not going to be changed! The 2 HTML files are:
imagePage.html – The page template for single images
thumbsPage.html – The gallery page and folder index page itself.
Styling the Web Gallery Page
Open thumbsPage.html in a text editor (NOT Microsoft Word!) The <title> uses the name of the shoot along with the date/time. After this you get some styles, most of which have obvious names, and you can add your own styles here or create your own stylesheet in the resources folder and link to it. At the most basic level, you are very likely going to want to edit the body style so the color and background matches your site. If you use a background-image, add it to the Images (capital I) folder in your resources folder if you have one.
The #shootTitleContainer is for the on-page title and this is followed by a <div>that holds the thumbnails and the code for their large overlays. If you have chosen an eCommerce template, there will also be a <span> with inline styling for the ‘Buy this image’ link. Beneath this is the #footer <div> where a link to the website home page sits. This address was set in the Settings > Web galleries > Home URL box earlier. You can add or change what is here if you wish. In fact, if you want to use an included file like a sidebar.html, there is no reason why you can’t add all that to the page markup.
Individual Image Pages
The imagePage.html can be edited for the pages that are generated for all the individual images. Again, the <title> uses the shoot title and date/time and if you have chosen an eCommerce template %eCommerceScripts% appears in the document <head>. Don’t delete this or your price list will not show on the page; there is an #eCommerceContainer <div> that holds the vital %eCommerce% reference and you can style this if you want to using the select element.
Again, the css styles are embedded in the page and you can edit them or add your own. Here are the elements you can edit straight away – click on the image for the full-size version:
If you need any help styling your Light Blue web galleries or are interested in having your site redesigned, contact me and I’ll be happy to help.
other page
Thanks for a great little guide for using our software with your own templates, Stuart!
If you’ve not heard of Light Blue, we’re award-winning business management software for photographers; we ship with a load of web gallery templates already pre-installed if you don’t want to make your own…
You are welcome Hamish – your software certainly simplifies the process for photographers who are looking to make money selling their prints online. Your supplied galleries probably cover most of what a photographer would need to display their work in style!