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…
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.
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.CSS eCommerce for Photographers, Light Blue, Styling Web Galleries