You're new to The Turning Gate, and you're totally confused. There's a lot to choose from, and you're wondering where to begin. It's the dead basics you're after, and this is that tutorial.
Maybe you want a blog and a shopping cart, a multitiered, sprawling network of categorized image galleries, a video gallery, a protected client area, and a before-and-after gallery to show off your mad retouch skillzzz. TTG can do all of that, but let's not get ahead of ourselves. You're a beginner, so we'll start at the beginning.
In this tutorial, you will learn how to create a website including pages and image galleries, and learn how to use the publish services plugin to create and manage image galleries.
We'll be using the following plugins, available individually or discounted in the CE4 Web Publishing Bundle*:
In Lightroom, at the top click on “Web”. Welcome to the Web module. A few points of interest:
The shop page for each TTG plugin lists out the system and software requirements for running the web engines, as well as the hosting requirements for publishing content to the web. Pay close attention to these requirements when purchasing. For hosting, we recommend a web server meeting the following bullet points:
If you are yet in need of hosting, or would like to move to a new host, we recommend Bluehost. Fair prices, great support and everything you need for publishing from TTG plugins.
To make the most of CE4 plugins, you should properly setup your workspace. We've got a dedicated tutorial on just how to do that, so go check it out and then come back here to continue.
Tutorial: Creating a Workspace
In this context, creation begins with CE4 Pages.
The purpose of CE4 Pages – we'll call it “Pages” from here – is to create the core structure for your website. You have six pages to work with, designated as Home, Galleries, Services, Info, About and Contact.
On each of these pages, you may author text in one or two columns, and include an image. Pages also supports the creation of one gallery, one gallery index, and one contact form, each of which you may assign to appear on any page.
Typically, we would assign the gallery to the Home page, greeting our visitors with a selection of our best or most representative work. The gallery index would appear on the Galleries page, and would provide a table-of-contents for your image galleries. And the contact form should usually appear on the Contact page, and allows visitors to contact you via email. Of course, if you want to put the gallery index on your Home page, you can do that too …
Launch Lightroom, then select some images that you'd like to appear on your site's pages – some images for a Home page slideshow, maybe a portrait of yourself for the About page, and whatever images you'd like to appear on your other pages (one image per page, and perhaps 10-25 images for your gallery).
Go to the Web module, access the Layout Style panel on the right side of the module and select “CE4 Pages” from the list of installed engines. The engine will load and the Home page will be displayed in the Web preview:
In the righthand panel, there are many, many options. In this article, we'll be glossing over most of the aesthetic features and honing in on the essentials. Now, let's take it from the top …
Within TTG web engines, the best way to work is from the top down. Start with the Site Info control pane, and work your way down through the options. Do not jump around; it's the best way to get lost and overlook important items.
And when in doubt about a particular feature or option, trust the defaults. The defaults are sensible and functional, and designed to get you up-and-running as quickly and with as little fuss as possible.
The Site Info pane is devoted to the general well-being of your website. It's where you setup your masthead and branding, basic colors, navigation menu, and a lot of the search engine optimization for your page. You can spend a lot of time here tweaking things for best effect, but the bare essentials are …
The intended root location of your website, i.e. Home. This takes an absolute URL with the trailing slash,
/ . The slash is important.
If running at the root location of your domain, then you can either leave the default
/ or fill in the full URL of your site,
[ More ]
The title of your page. This should be the name of your business or website, and should be identical in all plugins (i.e. do not include gallery title, page title, etc.; we will frequently concatenate this title with page/gallery specific titles).
You may also wish to include your location in your title, as it will help with search results. A good Page Title might look like this:
Happy Accident Photography - San Francisco, CA
[ More ]
COMPLETELY OPTIONAL, but TOTALLY RECOMMENDED, PHPlugins are a part of our set of advanced extensibility features. Not too difficult to use or understand, and we've done a lot of the heavy lifting so that beginners can easily get started implementing modifications using copy-and-paste.
We think they're great, and we encourage you to set them up (which is an extra step, but easy to do). Even if you don't plan to use them now, you may want to use them later. And if you don't set them up from the start, you'll probably want to kick yourself down the road when you decide that you do want them.
For example, PHPlugins are the BEST way to change your site navigation menu after publishing, if you want to add or remove pages later, etc.
But because PHPlugins are covered in great detail in a dedicated section of the wiki, with lots of tutorials and examples, I'll say no more about there here. For more information, see the PHPlugins section of the wiki.
Here you may set your identity plate – your logo – to display at the top of the page. You can create this within Lightroom, but it's best to create a graphical identity plate in Photoshop and use that instead. Directly beneath the identity plate graphic controller, be sure to fill in “Heading” field using your business name.
Each hyperlink is comprised of a Label and Target. The Label is how the link will appear in your navigation menu, while the Target is the address to which that link will lead.
When setting navigation links to pages created by TTG CE4 Pages, use the Target pull-down to select the target page:
Otherwise, you may write-in either absolute or relative URLs to other pages or sites:
We'll later be setting up CE4 Publisher, which includes search functionality. If you'd like to support image search on your site, then be sure to add a “Search” menu item. For target, select “Search” from the drop-list.
If you want to eliminate an item from the menu, leave its Label blank.
[ More ]
Here we can make our site Facebook, Twitter, Google+, etc. friendly. Enable the “Embed Open Graph Protocol for Facebook / Twitter” checkbox:
[ More ]
We've skipped over a lot of stuff: Typography, Page Footer, Social Media Profiles, etc. For in-depth coverage of these items, check out our full documentation.
For now, we move on …
Here you will find headings such as the Home page, the Galleries page, and so on for each of your six pages. For each page, you may enter text for one or two columns, and select an image to appear on the page.
The text inputs accept Markdown and HTML, which allow you to format text however you like. Lightroom's Web module is not a very good text-editor, though, so you would do well to write your content externally, then copy-and-paste into the Web module. I recommend using one of the free Markdown editors, Mou (Mac OS X) or MarkdownPad (Windows).
To preview each page as you edit, click through the navigation menu in the Web preview.
Here you may setup the Auto Index, the Gallery and the Contact Form. There are a lot of customization features here, but we will once again be touching upon only the essentials. To dig deeper, you'll want to hit the full documentation.
By default, this appears on the Galleries page. Click the “Galleries” link in your navigation menu to get eyes on the thing.
We're not going to make any changes, but I wanted to point out the location of the controls and get you to have a look at the page. If you'd like to change the layout or aesthetics, this is where you'd do it. Several layout choices are available, but the “Descriptive” layout is the easiest choice for hands-off maintenance, as it does not require custom thumbnails.
Also take note, the images appearing on this page in Lightroom's preview are for stand-in purposes only, giving you something to look at while you design your site. When published to the Web, this page will be empty. Thumbnails will only appear here later, after you've created and uploaded image galleries.
By default, this appears on the Contact page. Click the “Contact” link in your navigation to get eye on it.
Again, we're not going to do much. If you prefer not to use the “Telephone” or “Website” fields, you can change them or disable them entirely using the provided controls.
Later, you will need to supply a contact address at which to receive your messages, but this is not the place.
By default, the gallery is disabled. I imagine you will probably want to enable it, so let's assign it to the Home page:
Any images in the filmstrip not assigned to appear on another page will be included in the gallery automatically.
There are two supported gallery types, “Flip, Full-screen” and “Galleria”. These types work both on desktop and mobile browsers, so you're free to choose whichever you like for each platform. To customize the galleries in Lightroom, use the “Gallery Type :desktop” option to access options for each.
And that pretty well covers the essentials for CE4 Pages. Once more, if you'd like to explore the other options, the full documentation has you covered.
On the lefthand side of the Web module, access the Template Browser and click the “+” button to create a new preset. This saves our work so that we may resume it at a later time, and also allows us to copy our work to use with other CE4 plugins. You should create a new folder to store your website templates, and give it an easily recognizable name:
When you're ready, click the EXPORT button …
… and save your work to your desktop. Saving will create a folder on your desktop, and within this folder will be created all of the published assets comprising your website:
We'll want to be putting these online.
To move these assets from our desktop to our web server, we'll need to use an FTP client. Don't worry, FTP is easy. And I've got your back with a very thorough FTP tutorial, Introduction to File Transfer Protocol.
Using your FTP client, copy the contents of your exported folder (not the folder itself, but everything inside of it) to the top-level of your website, such that it will become accessible at
Once you've published your assets to the web, you should be able to visit your new website.
Now, keep that FTP client running. We're going to be using it.
CE4 Pages is online and looking good, and it's time to setup TTG BE. TTG BE will help us to get our contact form working, and will also be important later on when we setup CE4 Publisher.
Your should have downloaded the TTG BE zip file along with your CE4 Pages download, so unzip it and do the install. Return here when finished.
With TTG BE installed, log into the TTG BE Admin. In the menu, go to Settings > TTG BE Settings.
Click the “Edit Settings” link at the top of the page, then run through the settings. Fill in the “Site Email” and “Vendor Email” settings with your email address, make any other necessary changes, then Save Settings.
Visit your website's Contact page and test the contact form by sending yourself an email. Check your email to confirm receipt of the message before moving on.
Now visit your Galleries page. It's looking pretty empty, so let's create an image gallery …
CE4 Gallery is our flagship image gallery plugin and the one we'll be discussing for this article. Many of the same procedures will apply when using our other gallery plugins.
Ideally, we want our galleries to look the same as the pages we've already designed. This helps to promote a sense of unity and cohesion amongst the various pages and galleries which comprise our website. We could go through the control panels one-by-one, making the same changes to our gallery that we've already made to our pages, but that's tedious, time-consuming and prone to pilot error. Happily, there is an easier way. It's a hack, but a simple hack.
Check out our technique for sharing templates between CE4 plugins, then return here to carry on.
Under the Color Palette pane, the first group is Album Info.
Every gallery should be assigned a Title and Description. These will not appear on the page, but will be used for search engine optimization and social media.
A little further down, you may provide a gallery description under Content / Description.
If you don't want a description, then simply disable the “Display on page” checkbox. However, if creating a publisher template, then you should keep this option enabled.
Under Appearance > Large Image Presentation, set your preferences for “Presentation :desktop” and “Presentation :mobile”. I like to use Highslide JS and Magnific Popup, respectively. But it's entirely up to you which to choose.
And that is all for CE4 Gallery. There's much more we could do, but nothing that we need to do just now.
Press the EXPORT button and save the gallery to your desktop. Then use your FTP client to upload the saved folder into your
/galleries folder online, the one that was created by CE4 Pages.
Revisit your Galleries page online, and you will see your new gallery has magically appeared on the page!
CE4 Publisher requires TTG BE. Happily, we've already set that up.
The next two steps are well documented, so I'll ask you to see those sections, then return here:
Having worked through the items on that page, you should now be ready to publish your first album using Publish Services.
At this point, you should now have setup and authenticated your publisher instance, and you're ready to publish your first album. Or nearly so.
Did you create and upload a gallery template? If not, then go to the gallery we uploaded previously, in
/galleries; we're going to move it.
So if you had:
Then I want you to move the gallery folder to
/ttg-be/templates/gallery, such that you will have:
Any exported gallery uploaded to
ttg-be/templates/gallery will be available for use as a gallery template when publishing your albums.
Now in Lightroom, in the Library module, locate Publish Services in the lefthand panel and your CE4 Publisher instance. Right-click the instance, and from the menu select Create Album…
Creating an album is very similar to creating a collection, just with more options. The essentials are:
The name of the album in Publish Services. Use this to identify your album in Lightroom.
The name of the album as it will appear online.
Some descriptive text about the album. Depending on your Galleries page layout, this may or may not be displayed on the page.
The folder name for the album, as it will appear in the page URL. Can also be used to sort your albums, for example 01-Travel, 02-Portraiture, etc.
The template dictating the design and feature set for your album.
Under the Page Content tab, you may provide a description for your album.
When ready, press the Create button.
You will now have an album listed under your CE4 Publisher instance. But it's empty! Drag some images into the album from elsewhere in your Library.
When ready, locate the Publish button in the upper righthand corner of the image grid. Press this button to publish your images online. You may add and publish new images at any time, simply by dragging them into the album and pressing this Publish button.
For an overview of this process, please see our YouTube video, http://www.youtube.com/watch?v=OgvIvj79N4g.
The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.