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.

To get going, purchase TTG CE2 Pages from the shop, install according to our installation instructions, then launch Lightroom and select it from the Layout Style list.

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 ...

the Filmstrip

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.

Workflow

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.

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 ...

Export your site.

... and save it to your desktop ...

Save 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:

Published assets comprising your website, made by TTG CE2 Pages.

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:

The Galleries page.

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:

Fill in Album Title and Album Description.

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 ...

Export your gallery.

... 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 ...

Save your image gallery into an appropriately named folder.

... 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 ...

Within our website's assets, the "galleries" folder ...

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:

Our gallery, now uploaded into the "galleries" folder online.

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.

Wrapping up

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.


13 Responses to “A beginner’s guide to website creation using TTG”

  1. labro says:

    thanks for this great tuto
    i think video tuto about header+nav bar (and its different configurations) and drop down menus would be very helpful but I am aware it is a huge job.

    best regards
    marc

    · February 12, 2012 @ 4:17 pm

  2. Noel Butcher says:

    A handy tutorial, but for me, a few days too late. For new TTG users, though, very handy. As it happens, a friend of mine asked me to build him a simple website last week so I purchased Pages CE2 for the job.
    If you have used any of the TTG plug-ins, using Pages CE2 is really quite straightforward.

    From buying the software to building the site only took a couple of hours, most of which was tweaking the layouts/colours slightly. The Pale Theme for Pages was a pretty good match for his requirements so it was really just a matter of fiddling with the settings a bit.

    Like all the other pieces of TTG software I have purchased, Pages CE2 is a bit confusing at first (if you haven’t had any previous experience of the interface) but once you have, you come to realize that it is great value and a very handy tool to have in one’s bag of tricks.

    · February 12, 2012 @ 4:57 pm

  3. Matt says:

    Thank you, Noel. Sorry to be a few days late, but it sounds like you’re up on your feet no less.

    Marc, video tutorials will very likely not be forthcoming. They’re a pain to make, and I’m not very good at them; it’s easier to write, and I am more eloquent in the written word by far. But we have a tutorial about drop-down menus already in the can, and header configurations are well covered on the wiki.

    · February 12, 2012 @ 5:40 pm

  4. Monious says:

    Very clear and easy to follow, I picked up three good tips that will help me, there would have been more but like Noel I’m past that stage now. Thanks for taking the time to write the guide.

    · February 12, 2012 @ 5:59 pm

  5. claudia says:

    Hi Matt,
    it is nice work you did, but definitely not for beginners or people like me who donĀ“t know much about html.
    It is not because there are a lot of options, but you are using your very own system, that in my opinion does not follow a simple logic of each needs of your sides. So it is very hard to go step by step, side by side.
    Before I could start I had to read a lot of your explanations beforehand (what I did not want to).
    Also Pages and the response gallery work basically different so again lot of hour learning.
    That is something you should explain to the customer.
    Sorry to say but it seems like you got carried away with your knowledge.
    I hope step by step you will become much more simple and user friendly with the same outcome.
    Basically I like your work and ideas

    regards Claudia

    · February 25, 2012 @ 6:32 pm

    • Matt says:

      There’s a learning curve, but that’s no different than any other piece of software. And if you want flexibility, then complexity is the other side of that coin. Most of my customers get along well enough and come out very happy with both the software, and also what it allows them to create. But if it’s not for you, then you may wish to pursue alternatives. There are other plugins out there, though none of them as robust, nor as flexible.

      · February 25, 2012 @ 8:01 pm

  6. Marlon says:

    Thanks for the reply and ofcourse the good tutorials.
    keep up the good work!!

    regards

    · April 17, 2012 @ 6:27 pm

  7. Michael says:

    I’m about to dump my old site and hook up with Bluehost and use your products to put up a clean new site for my photos. I will follow your step by step instructions– but i already have a question: you say to purchase Pages first… but I kinda like Stage better– do I need to get Pages anyway, or will Stage sub for Pages?

    · April 27, 2012 @ 9:11 pm

    • Matt says:

      Stage is more for publishing individual galleries and pages. TTG CE2 Pages is for the purpose of setting up a website, and gives you a Home page, Galleries page (powered by our gallery indexing script), a Contact page, and several general purposes pages; it’s the complete foundation for a website.

      · April 27, 2012 @ 9:25 pm

      • Michael says:

        Oh, man…. I have spent the last 6 hours trying to upload the bones of the new site per your instructions.
        Cannot see the site on line… Going to try to insert a screen shot– what is wrong with this picture? oh dang–
        can’t insert or attach to this…

        What I have so far is great– just can’t get it on line… I move the Pages folder from the local directory to the
        remote directory, and all the file folders move but the .php and .xml files don’t move into the upper right
        quadrant. They are there in the lower right… so I can’t get the remote site address at the top of the upper right quadrant to point to the index.php file. I know I’m too tired to keep going tonight, but if any of this makes sense, please tell me what I’m doing wrong…

        · April 29, 2012 @ 12:01 am

        • Michael says:

          Went to Bluehost for help– duh! it’s a domain transfer problem. I’ll go to work on that now…

          · April 29, 2012 @ 11:07 am

  8. Jose Rocha says:

    How can I save my work, I ‘ve been trying to but ever time I open Ligthroom, I have to start my web site from scratch.

    · July 5, 2012 @ 2:21 pm

Comments are now closed.


CE4-Sidebar

The CE4 Web Publishing Suite

Welcome to The Turning Gate. Our plugins for Lightroom's Web module allow you to create mobile-friendly, fully responsive image galleries, websites, blog themes, shopping carts and more!

Learn more, or hit the shop!


Got Questions?

Get answers in the support forum.

Find Your Order

Can't find your download? Look it up.

Need Web Hosting?

Get affordable, reliable, TTG-certified hosting with Bluehost.

Need a Logo?

We've partnered with an award-winning graphic designer and brand consultant to offer Branding Services to our users.


TTG Recommends

Bluehost

Lightroom Queen

The Turning Gate receives a small portion of affiliate sales. This costs you nothing extra, but helps to support our work. Though compensated by affiliate relationships, The Turning Gate carefully chooses affiliates based upon the quality of services and products these entities provide to TTG users.