Frankly, Lightroom’s Web Module, isn’t very exciting.
You can use it to create some very basic, stand alone HTML galleries. But that’s about it. There are very few options for customization or branding or for even adding text.
The Web Module, as is, is pretty….well…boring. But that can change……
The Turning Gate Web Module Plug-ins
Several third parties offer web gallery and web site plug-ins for the Lightroom Web Module. Those that I’m familiar with, and probably the best known, are the plug-ins by The Turning Gate (TTG). The TTG plug-ins (called web engines) use the latest HTML5 and mobile-friendly practices. In other words, your site will look great no matter what device it’s viewed on. The latest TTG plug-ins are the CE4 (Core Elements 4) series.
There is extensive documentation on the TTG site (www.theturninggate.net) so I’m not going to go into the specifics of using the TTG plug-ins. Instead, I’ll describe what they do.
TTG CE4 Pages
TTG CE4 Pages creates the framework for an entire website.
Pages creates several web pages that make up the core of your site:
- Home Page
- Galleries Page – A galleries index page where your viewers can access your galleries. Your galleries are represented by thumbnails that are linked to the actual galleries.
- Services Page – Use this page to describe the services you offer
- Info Page – A generic information page
- About Page – Tell us about yourself
- Contact Page – A page with a contact form
(TTG Pages also creates a folder named “galleries.” This is where your galleries will eventually go.)
You can set Pages to export any or all of these pages. The only required page is the Home page. So if you just want a Home, Galleries, and a Contact page, you can do that. You can also swap the Home Page for the Galleries page as your site’s index page.
New in CE4 is the ability to assign a gallery to any page. This can be a standard CE4 Gallery (more on this later), a full-page flip gallery, or a Galleria slide show. Most photographers using this function opt to put the gallery on their home page.
CE4 Pages also allows you to choose which page will contain the Autoindex. The Autoindex is a page that indexes any TTG gallery that happens to be in it. Automatically. Thus the name. By default, this is the Galleries page, which makes sense because that’s where your visitors will go to access your galleries.
The Navigation section of Pages also provides a space to place a link to your blog, if you have one. Pages does not create your Blog page however. (But there is a TTG plug-in for that)
Each of the pages that Pages creates has an area for text (the Block), in which you can include an image, as well as an area (the Grid) for staging other content. You can place the Block either above or below the Grid. They can each be disabled if desired. Within the Block areas, single images may be left, right, or centered as desired, or not at all. Using html, you can also place images inline with the block text and have the text wrap around the image (uses the css float property).
You can add text to any TTG page in any TTG plug-in. Text can be formatted using HTML or Markdown syntax, which is an easy to learn text-to-HTML conversion tool. Basically, what you write looks an awful lot like regular text only you use some common punctuation to help format the text. For example, if you wrap a word or group of words in two underscores __like so__, they will be converted to bold (wrapped in html <strong> tags). To create text hyperlinks you’d simply enclose the text in brackets followed by the URL in parentheses like so: [my website](http://yoursite.com) will yield this: my website with the text being an active link.
The Home page has several built in staging options for its grid, including an html slideshow, a still image, or one of three different gallery styles. There’s also an option for inserting your own custom content via some advanced features.
The Home page also has an option for a Full Screen Flip Gallery. The grid area is not available with this option. The Flip Gallery fills the page and there are options for a pattern overlay: None, Fine Grained, and Chunky Pixels. The patterns give a textured effect to the images (rather like a canvas print) and are actually a pretty smart choice; otherwise you run the risk of your images being unflatteringly upsized in the browser when viewed on high resolution monitors.
CE4 Pages also allows you to manage your front page gallery via Publisher. What this means is that if you change the images in your gallery/slideshow, you don’t need to export and upload Pages again, it’s all done directly from Lightroom.
Customizing TTG CE4 Plug-ins
There is a wealth of settings in all of the TTG CE4 plug-ins. And at first you will be overwhelmed by them all.
Just a quick overview of some of the customization options:
- Set global typography settings for paragraphs, Headings, lists, forms, and more. You’ll be able to choose font families and colors for text and hyperlinks, including hover colors.
- There are CSS settings for things like border radius, drop shadows, and gradients.
- You can customize the size, color, padding, etc. for each area of the page, like the header, footer, navigation, the block, and the grid.
- Several social networking icons are built in, including Google Plus, Facebook, Pinterest, Instagram, Twitter and Linkedin. There’s also an icon for an RSS feed. All you’ll need to do is supply the URL to your own page of each social network you use. Using some advanced TTG features, you can add more.
The Navigation section, by default, includes seven items: all the pages listed above and a link to a Blog. There are three more spaces in the navigation section that you can use if you wish. Using advanced TTG features you can add more. You can also implement drop-down menus for navigation.
The Page Setup area of all TTG plug-ins includes fields for Google Analytics, metadata like Description and Keywords, Title, an address field for your Favicon, and more. You can specify Character Set and Language and even Text Direction. There’s even a provision for a basic robots.txt file to block search engines if that’s what you want to do.
The TTG CE4 plug-ins are also very mobile friendly, using responsive design to adjust to any device.
In short, loads and loads of options.
TTG CE4 Gallery
Showing your pictures in a gallery is sort of the point for photographers getting on the web. TTG CE4 Gallery does just that. As with all the TTG plug-ins, the Gallery is highly customizable. There are several options for presenting image thumbnails and large images.
Large image presentation can be customized, depending on the gallery style you’ve chosen. You can choose to show metadata such as file name and caption. The slideshows can be set to start automatically upon entering the gallery and the slideshow interval is customizable. On the large image views you can also include icons for Google Maps, Permalinks, and Hi-Res Download links.
Thumbnails can also be customized to include a “frame” around the image. You can set borders, padding, colors, and drop shadows. You can display just about any metadata you want in a caption area. A slideshow tracking feature lets you leave the slideshow and then places an icon on the last viewed image. The gallery provides for pagination in case you have a large gallery but want only a limited number of images on each page.
Galleries can be password protected.
CE4 Gallery will integrate with CE4 Cart.
CE4 Gallery also has all the page setup options that CE4 Pages has.
TTG CE4 Autoindex
The Galleries page of TTG CE4 Pages provides one page for your gallery index. In other words, all of your galleries will appear on this page (represented by thumbnails). So if you have 20 different galleries, they will all appear on this page. This can get unwieldy if you have lots of galleries. Wouldn’t it be nicer to be able to split your galleries into categories like Landscapes, Wildlife, Portraits, and Travel?
That’s just what the Autoindex is for. Using the Autoindex you can create pages that are additional indexes for your galleries. With this in mind, instead of 20 thumbnails on your Galleries page representing all your landscape, wildlife, portrait, and travel galleries, you can have four thumbnails labeled Landscapes, Wildlife, etc. Click on these thumbnails and your viewers will be taken to a page that contains all the galleries for that category. Nice and neat. And there’s no limit to this. On my site I have an autoindex for Landscapes. Inside of that I have another for National Parks, another for Washington State, and another for Oregon, further organizing my galleries.
As with galleries, Autoindexes can be password protected.
How does all this work?
At its most basic, the TTG gallery system is a folders within folders system.
Imagine you have a folder on your computer for your images. Inside that folder you have another folder for your landscape images. Inside that are folders for specific locations. (Ok, this isn’t the best way to organize your digital files, but it serves its descriptive purpose).
When you export a TTG gallery, Lightroom creates a folder that contains all the assets and images for that gallery. Same thing happens when you export an Autoindex.
After you export a TTG gallery, you’ll upload it to the galleries/ folder (the one created by Pages). The Galleries page is actually an autoindex. The magic stuff inside the autoindex looks inside the galleries/ folder and will automatically display a thumbnail for each TTG gallery it finds. This is the great strength of using the TTG system for your website. What this means is that you don’t need to manually add these thumbnails or create the links. Just upload the folder and the gallery will appear.
This is also true for an Autoindex. Upload one to the galleries/ folder and it will appear on the Galleries page.
Take this a step further. Upload a gallery to an autoindex folder (which is inside the galleries/ folder) and that gallery will appear on that Autoindex page. Pure magic.
This way you can place an Autoindex named “landscapes” in your galleries/ folder and then place your landscape galleries inside the landscapes/ folder. On your Gallery page you’ll see the link to “Landscapes.” Click on that and you’ll see your landscape galleries.
As with all things TTG, the look of the thumbnails that represent your galleries and autoindexes is customizable. You can set it to include the Title and Description. You can make it so that when you hover over the thumbnail the title pops up. You can customize the size and shape. Let’s say you want an index to house all your panoramic images. Customize the thumbnail containers so that they’re in a panoramic aspect. You’ll then probably want to create custom thumbnails to represent each of those galleries. All this is easy to set up.
TTG CE4 Publisher
If you’ve ever used Lightroom’s Publish Services you’ll know it’s a very easy way to manage online content. TTG CE4 Publisher makes adding, removing, and modifying online galleries simple.
Use TTG CE4 Gallery to create templates for Publisher Albums (same as galleries) and TTG CE4 Autoindex to create templates for Publisher Album Sets (same as autoindexes).
Once you’ve created the templates and uploaded them to the correct folder on the server, they will be available to the Publisher. In Publisher, create a new Album, select the template, and add images to the album. You can add images to Publisher albums just as you would for collections, including setting an album up to be a Quick Collection and using the ‘b‘ shortcut to add images. Click on the Publish button and that’s it.
Publisher supports Google Maps, selective watermarking (meaning you can choose to watermark just the large images, both large images and thumbnails, or neither. You can also choose to not watermark photos designated for purchase via digital download), Password protection, and the TTG Cart.
TTG CE4 Client Response Gallery (CRG)
This clever plug-in creates a gallery that facilitates communication between photographer and client. On the gallery grid the client can check image selects as well as add feedback for individual images. In the feedback panel the photographer can set up any number of options, such as processing requests, size requests, etc. These options are in the form of radio buttons. There are also comment areas and the photographer can add as many comment areas as needed.
When a client is finished with choosing selects and adding feedback, an email form is sent to the photographer with the list of selects, and options and comments for each image.
The CE4 version of the Client Response Gallery represents a major step forward for The Turning Gate.
Beginning with the CE3 Cart, TTG began using a SQLite database to store product and pricing information. This would be shared with the online gallery.
When CE4 came along, this concept was expanded into TTG-BE, the back-end that now handles processing contact forms, and manages aspects of Publisher and Cart as well as the Lightroom generated gallery and autoindex templates that serve for albums, album sets and front facing pages such as the search results page and the cart.
CE4 CRG takes this a couple of steps further. CE4 CRG now interacts with the new Client Response component of the back end to save all client selects and feedback.
Combine the CRG with Publisher and TTG-BE, you can create and manage clients in the back end. This means that for the first time, clients can log into their gallery, make some selections and add feedback. Log out, and come back later to pick up where they left off. This is something that CRG users have been requesting for years, but since Lightroom doesn’t output a database to store client information, it’s been impossible. Until now.
TTG CE4 Stage
Stage is TTG’s Swiss Army Knife of plug-ins.
Here’s what you can do with Stage:
- Insert YouTube, Vimeo, or HTML5 video.
(Place several Stage video pages in an Autoindex and you’ll have yourself a video gallery.) - Insert a Galleria slide show.
- Create a product page that integrates with TTG CE4 Cart via HTML write-in purchase buttons. Again, place several of these pages in an Autoindex and you have a page for various products. This is exactly how my Books page works.
- Create a before/after page to illustrate things like your image touch up skills.
- Display Cinemagraphs
- Insert other content of your choice. For instance, I once inserted a web page from another site into a Stage page. Other ideas include inserting a map to your studio.
- Set up a Full Screen Flip Gallery like the one available for TTG CE4 Pages home page.
- Create a scrolling 360° panorama, product rotation, or stop motion image page.
- Or just use as a generic page, such as a Testimonials or Policies page.
TTG CE4 Theme for WordPress
With Theme for WordPress you can create a WordPress Theme that will integrate seamlessly with the rest of your TTG CE4 site. After exporting, you simply upload and activate it just like any other theme for WordPress. TTG CE4 Theme for WordPress comes with a host of great features including inserting a Galleria slideshow, a stacked gallery, customizable post title, sub-title, widget areas, and more.
You can use Theme for WordPress to create a blog page or you can use it as the theme for an entire WordPress-based photography site. It’s very easy to integrate the other TTG plug-ins with a WordPress installation and Matt has a tutorial that shows you how.
TTG CE4 Cart
TTG CE4 Cart integrates with TTG CE4 galleries (except CRG) and TTG CE4 Stage, Pages, and Autoindex to create a complete e-commerce system.
You can set up a global pricing profile or you can assign unique pricing profiles to individual images in TTG CE4 Gallery by placing the name of the profile in the “categories” metadata field of the image. This is the default and can be changed if you use “categories” already. You need to place the profile name in the image metadata from the Library module.
Pricing profiles let you specify options from which your customer may choose. Options can be size, finish, framing, or anything you need.
You can also create Packages. Packages can be any combination and quantities of any products you sell.
On pages created with Autoindex, Stage, or Pages, you can include purchase buttons for selling things like individual products (calendars, books,etc.) or services (workshops, portrait sessions, etc.)
Additionally, you can specify percentage discounts, shipping costs (including a free shipping threshold), and taxes. The Cart integrates with PayPal but you can set it up for self collection. There is also a provision for digital downloads.
Other options include adding check boxes and extra fields for things such as additional requests or a check box to opt-in to your mailing list.
All TTG CE4 web plug-ins other than CRG can be made “cart aware” buy just enabling Cart Integration. This means that if your customer has placed anything in the cart, a notification bar will appear at the top of any Cart enabled page. This bar displays the number of items in the cart, the total currency amount, and it provides a link to the cart.
TTG-BE
TTG-BE stands for TTG Back End and is your control center for Publisher, the Cart, the Client Response Gallery, and configuring your contact forms. It interfaces with sqlite databases. This approach enabled the TTG developers (Matt and Ben) to implement features that would otherwise be impossible if simply relying on Lightroom. It’s required for use with Pages, Publisher, and the Cart and is included in any of those purchases.
Advance features
I mentioned earlier that these plug-ins are highly customizable and I also hinted at some advanced features. Here are just a few of them.
Responsive Grid Framework
For the text blocks, TTG has provided a more advanced responsive grid text framework for those users who are a little more versed in HTML and CSS. With the responsive grid, you can create columns of text. You can also control their positioning using special CSS classes created for the purpose. The column set up is very flexible. You can create a layout with four equal width columns, or a layout with one column taking up a third of the page width while the other takes up two-thirds, or two 1/4 width columns and a 1/2 width column, or just about anything you can come up with. Advance users can use custom CSS and apply additional styling to the text. The framework is also responsive. What this means is that the grid will adjust itself depending on the width of the browser. So on a smart phone, instead of three columns of hard to read small text, the grid will reform into a one-column layout with text that’s easy to read.
This is one of my favorite features from the CE3 and CE4 line of plug-ins.
Sharing Common Resources
Using this feature, your galleries, indexes, Publisher templates and all other CE4 generated pages can be set to share common resources with the TTG CE4 Pages installation on your server. Those common resources are CSS styling settings for things like global typography, overall page colors, header, footer, navigation, and social media.
You will still need to style the Block and Grid areas for each gallery, index, etc. as these areas are not necessarily common to all of your pages.
Phplugins
I’ve mentioned in several places about inserting your own content into a page. The way that’s done is by using Phplugins. TTG has set up “hooks” within the pages’ php code that allows the user to insert content in any of several designated areas, like the top or bottom of the page body, top or bottom of the text block or grid, the footer, the header, the social networking area, navigation, and more.
Phplugins can also insert a custom CSS file or scripts into the <head> tag of the page. This non-seen area of a page contains all the behind the scenes stuff that makes a page look and act the way it’s supposed to.
The really powerful aspect of this is that you can use one phplugins.php file to control things site wide. You just have to tell each Gallery, Autoindex, Stage, Publisher Template, or other TTG page you export where to look for this file, and there’s a field for that in each plug-in. And once you’ve set this up, you can make a simple change to this one php file and changes will appear across your site. And these changes are easy to make with just a simple text editor.
On my site I’ve used phplugins to replace the navigation menu generated by the web engine with one of my own.
The main reason I started using phplugins is that I needed to add a menu item to my navigation. And I knew that I would more than likely need to add, remove, or move items in the future. Without using phplugins I would need to make the changes, export, and upload each and every index, gallery, or Stage page. By enabling phplugins I was able to add that one navigation menu item by adding just one line of code to the phplugins.php file.
I’ve used phplugins to insert affiliate banner ads, to customize my contact page form, and to add jQuery that will highlight the current page’s menu item, among other things. I’ve seen people use phplugins for all sorts of clever things including creating vertical navigation menus, breadcrumb navigation, Facebook “like” buttons, running special scripts, and more. And if you want to use drop-down menus, you must use phplugins.
Granted, these are advanced features and it helps to know some html and css. However, the code for customizing navigation and adding custom css files is already set up for you in the phplugins.php file. You’ll simply need to activate the appropriate section and customize to your needs.
Theme packages
You may be saying to yourself that this seems like a lot. Well it is. There are a lot of options and settings you can use. But you don’t have to do all the designing. The Turning Gate has several free “themed” templates that you can use as-is or modify to your own needs.
Either way, you can end up with a photo site that looks like it was professionally designed. That’s because the code generated by TTG plug-ins adheres to the latest HTML5 and CSS3 standards and the designers at The Turning Gate are sticklers for clean code.
