A beginner’s guide to website creation using TTG
The tutorial below is about our CE2 version plugins. For the newer CE3 versions, we have an updated tutorial here.
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 skillz. 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.
Two plugins in two acts. One for your pages. One for your galleries.
A Brief Introduction to the Web Module
In Lightroom, at the top click on "Web". Welcome to the Web module. A few points of interest:
- On the right, at the top, find the Layout Style control panel. Here you may choose to work with one of your installed web engines. If you have installed any TTG web engines, you will find them here.
- On the left, in the middle, find the Template Browser. When you've customized your design, you can use the Template Browser to save your customizations as a preset for later use.
- On the right, at the bottom, find the Upload Settings control pane. Never, ever use it. Lightroom's upload functionality is shaky at best, and this is absolutely not the way to manage your website. So, now that we know it's here, we can ignore it all the better.
- On the right, beneath Layout Style and above Upload Settings are located several control panels: Site Info, Color Palette, Appearance, Image Info, Output Settings. These house the controls for the active web engine and will change depending upon which engine you've selected from the Layout Style list. Within each of these panels, TTG plugins organize related controls into "control groups" easy to identify by their yellow headings.
- The control panel titles -- Site Info, Color Palette, Appearance, Image Info, Output Settings -- are misleading. They are set in stone within Lightroom and cannot be changed, so we ignore them. It's the yellow control group headings which provide meaningful insight into the controls there.
For more information on using the Web module, see the Foundations section of our wiki.
Requirements for Use
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:
- Linux OS
- Apache server
- PHP 5.2.6 or newer
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.
Act I: Pages
For our first act, we require TTG CE2 Pages.
The purpose of TTG CE2 Pages -- we'll call it "Pages" -- is to create the core pages of your website. Pages gives you six pages to work with: three general purpose pages identified as Services, Info and About, and three special purpose pages. The Home page is your frontpage and offers several unique slideshow options for greeting visitors with your best images. The Contact page contains an email contact form that allows visitors to send you messages. And the Galleries page uses out auto indexing technology to create a navigable and easily maintained index of your image galleries.
Now pause. Because TTG CE2 Pages does run slowly. We've packed a literal ton of options into the engine, and Lightroom takes time to grind through your settings to generate the preview. If you find that TTG CE2 Pages is running too slow, then try TTG CE2 Pages Lite instead; it sacrifices some infrequently used options to offer speed gains of 30-50%!
When the engine finally renders the preview, you're ready to work. There are a lot of options -- a literal ton, as I've said -- but we'll be glossing over most of them and honing in on just the essentials for this article. Some of this will be repeated from our TTG CE2 Pages documentation. I will be skipping over a lot of options and features to get at those which are most important, so look for the yellow labels to match the stops I make below.
From the top ...
Before getting started with TTG CE2 Pages, create a collection of six images. These images will be used on each of your pages. TTG CE2 Pages requires a minimum of 6 images, and the order in which those images are arranged is important. The images in your filmstrip will appear on your pages as shown:
The first image will appear on your Home page, the second on your Galleries page, the third on the Services page, the fourth on the Info page, the fifth on the About page and the sixth on the Contact page. The seventh image and every image thereafter will appear in your Home page slideshow if/when using one of the HTML image gallery/slideshow options.
So, if you wanted a self-portrait to appear on your About page, for example, then the image should be the fifth image in your filmstrip.
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.
the Site Info pane
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 setup 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 ...
Page Title. The most important "under-the-hood" setting in the entire page, populates the
<title> HTML element used to identify your page within the browser UI and to search engines. I like to load this with information. When I was living and shooting in Los Angeles, I might have done:
Matthew Campagna Photography - Los Angeles, CA - commercial product and apparel, fashion, portraits, headshots
... Which says quite a lot about the type of work I was doing, and where I was doing it -- things people will want to know when finding you by search engine. Super important, though, to include your name or business name here.
Masthead. 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 "Alt Text for Identity Plate" using your business name.
Navigation: Hyperlinks. Our default menu includes an item for Blog, but this tutorial won't be getting into blog creation. And so we will not be needing that link. To remove the link is simple; locate and delete its label. By default, "Blog" is assigned to ( 03 ) Nav Hyperlink, so go there and delete the label:
Deleting the label removes the link from our menu; it's okay to leave the Target as is. Feel free to remove links to any other pages you do not intend to use.
Footer. In the footer, you may wish to replace the Attribution/Copyright Notice with something more specific, for example "Copyright 2012 Matthew Campagna Photography" if you were me.
the Color Palette pane
Our most important tasks in the Color Palette have to do with establishing our page content, primarily being the text appearing on each page. Our content appears in an area of the page which we refer to as "the block", and the block sits within the larger context of "the canvas". There are many possible layouts that may be achieved by manipulating our options here, and we'll learn about some of these options by example as we work on our pages. Visit the wiki for a more thorough look at the CE2 page structure.
Text may be formatted using Markdown syntax, and the easiest way to author your content is to do so outside of Lightroom. I like to write using a plain text-editor, then copy and paste my content into Lightroom.
So we'll move past the first couple of control groups to do with the overall aesthetics of the block and focus on the important bits, beginning with ...
Home Page: The Block. We'll want a great big presentation on our frontpage, so let's set:
Canvas Layout: The Grid Up, The Block Down
Block Layout: No Image, Copy Only
Then drop down to Page Copy (md) and write/paste your text for the Home page.
Galleries Page: The Block. To keep things simple, on the Galleries page we'll display only our galleries, no text block. To rid ourselves of the block, we set:
Canvas Layout: The Grid Only, No Block
With no block, we have no need of Page Copy so ignore it.
Services Page: The Block. As one of our generic-type pages, we're going to keep it simple here. Write/paste your Page Copy into the provided field so that your text will appear on the page. This is a good place to write something about the services you may provide to your clients: portrait sessions, wedding photography, commercial photo services, etc.
Info Page: The Block. Another generic-type, and a good place to provide additional information about your business. Again, we'll keep the default layout and simply fill in the Page Copy area with text to appear on the page.
About Page: The Block. Yet another generic-type page, and a great place to write a bit of background about yourself or your business, or to describe your approach to the craft.
Contact Page: The Block. From here, visitors may send you messages. Let's keep it simple, to the point. Provide some Page Copy encouraging prospective clients to get in touch, then set:
Block Layout: No Image, Copy Only
... to be rid of the image on the page.
Form-to-Email Settings. Very important, this. In the "Receiving Email Address" field, provide a correct and valid email address at which to receive messages sent from your site. This is where visitors will contact you.
Social Networking. Are you on Facebook? Twitter? You can link to your profiles from your Contact page. Set "Social Networking Icons" to "32px", then fill in the addresses to your various profiles using absolute URLs (full addresses beginning "http://").
the Appearance pane
From within the Appearance pane you control the multimedia area of each page, which we call "the grid". You may embed slideshows of various kinds on your pages, customize the appearance of your gallery index and more. But, in the interest of sticking to basics, many of these features we're not getting into here.
There appear to be a lot of options in the Appearance pane, but mostly it's just the same set of options iterated for each individual page.
Home Page: Staging. Remember we said we wanted a large presentation on the frontpage? This is where we do it. Set:
Media Presentation: HTML Media
HTML Presentations: Still Image
You now have a great big image on your Home page.
You could instead have a slideshow if you wanted; you'd need 7+ images in your filmstrip, and would want to select either "Galleria Slideshow" or "Photoswipe Slideshow" as your HTML Presentation. If you'd like to know more than that, see the documentation.
Galleries Page: The Gallery Index. We're not going to do anything here, but I just wanted to point out the location of these controls. If you wanted to change the appearance of your gallery index, this is where you'd do it.
Also take note, the images appearing on this page in the Lightroom 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 to your site.
Finishing up with Pages
And that's all we're doing with TTG CE2 Pages. For the purposes of this article, we have no need to work in the remaining Image Info or Output Settings control panes. So, save your settings as a template using the Template Browser. Then press that Export button ...
... and save it 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.
Upload via FTP
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.
Once you've published your assets to the web, you should be able to visit your new website. Not bad, eh? But that Galleries page is looking pretty empty, so let's build some image galleries ...
Act II: Galleries
For image galleries, you have several options. At time of writing, you may choose between TTG CE2 Highslide Gallery, TTG CE2 Horizon and TTG CE2 Photoswipe Gallery. While there are some feature differences between the engines, the primary difference is that of visual presentation. Visit the shop pages, explore the demonstration galleries and decide upon which gallery you like the best for presenting your work. That's the one you'll want to use.
For the purposes of this article, let's assume you've chosen TTG CE2 Highslide Gallery; it's the longest lived of our gallery offerings, and probably the most popular choice amongst our users.
A match to our pages
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.
We have step-by-step documentation how to share templates between engines, and there's an older YouTube video that walks you through the process as well:
Now, assuming we've used this method and gotten our settings to match. Here's what's left to do ...
the Color Palette pane
At the very top of the Color Palette control pane, find the option for Canvas Layout. If you want to provide a title and descriptive text for your gallery, set "The Block Up, the Grid Down". If you do not want to provide text to accompany your gallery, you may eliminate the block altogether by choosing "The Grid Only, No Block".
These options should be familiar from before, when we had chosen page layouts for TTG CE2 Pages.
Assuming you do want to provide some text, scroll down to the bottom of the Color Palette and write/paste your copy into the Page Copy ( md ) field. The "md" indicates a field that supports Markdown syntax, so you can format your text just the same as you did with Pages.
the Appearance pane
Here you have a great many controls to do with "the grid", the area of the page which contains your thumbnail images. Your options for the display of large images -- click on a thumbnail, see the large image -- are also to be found in the Appearance control pane. There's a lot you can do, but again I say we're going to keep things simple in this tutorial and run with the default configuration. You can faff about with the many options on your own time.
the Image Info pane
If you have filled in metadata for your images in the Library, from here you may access that metadata and pull it into your image gallery. For example, if you have provided captions for your images you may display the captions with your large images. Let's take a look at how to do just that.
In the Library, you should fill in the Caption IPTC field for each image.
Back in the Web module, in the Image Info pane, find "Large Image Caption | <img alt=". To the right, access the drop-list and select "Caption".
Reload the preview, click a thumbnail image, and you should see the large image appear on-screen accompanied by it's caption metadata.
the Output Settings pane
There's some good stuff in here, such as shopping cart integration and password protection, but these features are beyond the scope of this article. What's truly important to us is the control group labeled "Info for Auto Indexing".
You may recall the thumbnail images which appeared in the preview of our Galleries page when we were working with TTG CE2 Pages previously. It would have looked something like this:
To get the Album Title and Description to appear on the Galleries page, we have to provide that information here for each of our galleries. Fill in the Album Title and Album Description fields only; leave the others blank:
Finishing the gallery
And that's all we need to do, so let's revisit the Template Browser and save another template. We can reuse this template later when creating additional galleries. When we reuse the template, just remember to:
1. Visit the Color Palette pane, update the Page Copy with new text for the new gallery.
2. Visit the Output Settings pane, update the Info for Auto Indexing with new Album Title and Album Description appropriate for the new gallery.
And again, press that Export button ...
... and Save it to your desktop. This time, take care in naming your folder. As we'll be using the folder online, avoid capital letters, spaces or punctuation marks. It's okay to use hyphens ( - ) or underscores ( _ ) to separate words ...
... and we're ready to publish our gallery online.
Publish the gallery online
Fire up your FTP client again. You may remember that amongst our assets for TTG CE2 Pages, there was a folder named "galleries". Here it is ...
We want to locate this folder on our web server and, using our FTP client, upload our gallery folder into the "galleries" folder. Like this:
If we now visit our Galleries page, we will find our image gallery listed there. To add additional galleries, simply repeat this process of creation, export and upload.
And that is how to build a basic website using TTG plugins. Here we've covered our most basic solution for a complete website, using only two engines: Pages + an image gallery. Using TTG there are many more possibilities, many options and configurations more advanced. We could add a blog, a video gallery, a shopping cart ... For more information on how to do these things and more, I encourage you to explore our documentation wiki and to keep an eye here on the blog, where more tutorials are yet to come.
Finally, this article has been written from my own perspective as the developer of TTG plugins. User Rod Barbee has written an excellent tutorial from the user's perspective, and you may which to pay him a visit to check it out.
Most of all, have fun. It can be very satisfying to publish your own website, and to know that you are in control of your content. Put in the time, keep on smiling, and hit us up on the community forum if you have questions. We have hands to lend those who ask for help.