Getting Started w/ TTG CE2 Pages

The purpose of this document is to provide a sweeping overview of TTG CE2 Pages so that you can jump in quickly to start creating your website, and to acquaint you with some of the ground rules of using the plug-in. In general, the best workflow is simply to begin at the top of the controls and to work your way down in order. Be patient, and do not get ahead of yourself.

Create a Collection

The best way to begin is to create a new collection with which to work. As with standard image gallery plug-ins, your images are of the utmost importance to TTG CE2 Pages. Now, let's begin in the Web module.

As a first step, in the Collections panel, press the plus icon (+) and create a new Collection Set. Name this set “My Website”, or give it some other appropriate name.

Create Collection Set.

Name the set.

Next step, create the collection or “output creation”. In the Collections panel, press the plus icon (+) again and select Create Web Gallery:

Create Web Gallery.

Give your output creation a descriptive name. Because this output creation will be used for my pages, using TTG Pages CE2, I have named it “CE2 Pages”. You will now have an empty output creation; note the 0 (zero) for image count:

Our new Output Creation.

If you have not already done so, locate the Layout Style control panel in the top right corner of the interface, and select TTG CE2 Pages from the list of available web engines:

Select TTG CE2 Pages from the Layout Style list.

You now have an empty collection ready to work with.

See elsewhere in this wiki for a more comprehensive explanation of how to use Collections and Output Creations in managing your site.

Organize the Filmstrip

With a collection created, move to the Library and begin to populate the collection with images. 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:

Managing the filmstrip for TTG CE2 Pages

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

Images may be disabled from appearing on specific pages elsewhere in the control interface, but images must still be used as placeholders in the filmstrip even when they are not being displayed on the associated pages.

the Site Info control pane

The controls located in the Site Info pane are largely to do with the “big picture” aspects of your design and serve to establish a solid foundation for the rest of your site. This includes setup for your masthead, site navigation, footer and more. The components here are well explained under the heading The Core Elements 2 Framework on the wiki home page , so we will gloss over them here.

Some special attention should be paid to the TTG CE2 Pages Navigation documentation .

For search engine optimization, be sure to fill in the Page Title; it’s easy to overlook, but immensely important.

The Page Title is important for SEO.

the Color Palette control pane

In the Color Palette reside the primary content controls for The Block. By default, the block appears on each page and contains your copy and a still image.

The Copy Area / 'The Block' control group allows you to customize the appearance of the block. These controls are applied globally to all of your pages – Home, Galleries, Services, Info, About and Contact. Your options includes color choices, and controls allowing you to adjust the size, spacing and physical appearance of the box which contains your content.

Beneath the global controls for the block are content controls for each individual page, which look like this:

Home Page: The Block control group

Here you may specify how the block should appear in relation to the grid (options for which appear later in the Appearance control pane), the layout of text vs. media within the block, the text alignment for the page, the size at which the image should appear on the page and then the page copy itself. Page copy may be formatted using Markdown syntax or HTML.

Directly beneath the Home page content controls is an option Home Page: Setting for the Block, which may be set either to Inherit or Override. When set to Inherit, the Home page block will use the global block settings from above. When set to Override, the Home page block may be styled independently of the other pages; this is especially useful when using the horizontal-scroll gallery on your Home page.

The content controls for each of the other pages – Galleries, Services, Info, About and Contact – are identical to those pictured above for the Home page. These pages do not have block override controls, however.

Toward the end of the Color Palette control pane are the Form-to-Email Settings and Contact Form Styling control groups. These options apply to the Contact page and are used to configure the email contact form appearing on that page. Be sure to provide a valid email address at which to receive your messages!

For more information on the relationship between The Block and The Grid, please see the entry Page Structure in the CE2 Framework.

the Appearance control pane

In the Appearance control pane reside the primary content controls for The Grid. By default, the grid does not appear on your pages. The grid is intended to house multimedia content on each page; the types of media supported include embedded Flash image galleries, embedded video or a still image. On the Home page, the grid may also host one of several HTML image galleries.

Each page has its own set of independent controls for the grid, all of which are located here in the Appearance pane. To display the grid on each page, locate the Canvas Layout option and select a layout containing the grid:

Enable the grid on the Home page.

The grid may appear above or below the block, alone on the page or not at all. Once the grid has been enabled on a page, the controls beneath the Canvas Layout option allow the box to be styled and resized.

Beyond the basic appearance controls for the grid, each page also has a dedicated Staging control group. From within the Stage controls, you may select the type of media to be presented via the grid. Types of Media Presentation appear in three groups: Flash Media, HTML Media and Video; select your Media Presentation category, then select the specific type of presentation from the second drop-list.

Select media type for the Home page grid.

For each media type, a set of related controls will appear allowing you to specify the dimensions of the presentation and other aspects of its behavior.

The same options are available for the Services, Info, About and Contact pages. The Home page includes the same options as the other pages, but also includes some exclusive HTML Media options: Galleria Slideshow, Photoswipe Slideshow and Horizon Gallery.

On the Galleries page, the grid is unique and used to create your gallery index. The controls here are similar to those found in TTG CE2 Auto Index.

For more information on the relationship between The Block and The Grid, please see the entry Page Structure in the CE2 Framework.

the Image Info control pane

Not much hear except controls for the alt and title attributes for images appearing on your pages. If you don't use the Title or Caption IPTC fields in image metadata, then you might want to change these to use Filename. Otherwise, there's not much need to change them unless you have very specific SEO aspirations for your page images.

the Output Settings control pane

By the time you reach the Output Settings control pane, the bulk of your work will have been done. Items here are mostly optional.

Image Renditions

Controls the output dimensions and quality of your JPG images. In general, your Large image output settings should be equal to or greater than the largest image appearing on your pages or in your Home page HTML gallery (Galleries, Photoswipe or Horizon). There's precious little reason ever to go higher than 76% on quality when exporting images for the web, and you might even be able to get away with a lower setting depending on your images.

The Thumbnail images are used within the LR preview to mock-up your gallery index on the Galleries page. Outside of Lightroom, they will only be used if you are displaying thumbnails in the Galleria slideshow on your Home page, or if you are nesting TTG CE2 Pages within another gallery index (an extremely rare use).

Info for Auto Indexing

This information is used when nesting published content from TTG CE2 Pages within a separate auto index. Such a use is incredibly rare, so most users need not concern themselves with this in TTG CE2 Pages. Auto indexing information is typically only relevant to image galleries, not to pages.

Export Pages

Any pages not being used may be disabled here to prevent their creation on export. Note that disabling pages here will not remove links from your navigation menu. Be sure that your navigation menu coincides with your pages being exported.

The Swap [ Home : Galleries ] feature is meant for those who want their Galleries page to appear as their Home page (the landing page for their website). The Galleries page will be exported as index.php, and the standard Home page will be exported as galleries.php, so that users visiting http://yourdomain.com will land on the Galleries page first. To preview this within Lightroom, you will need to perform a “hard refresh” – go to the Library and return to the Web module, or just quit and restart Lightroom.

TTG CE2 Cart Listening

If you're using TTG CE2 Cart, you can input the URL of your cart here. If visitors have items in their shopping cart, the cart will be accessible from your pages, allowing the visitor to checkout from any page.

Coda

At this point, you should have a vague notion of where things are and what things do, and should be well able to publish your website after a bit of poking at the options. For more specific information on various features and less of a glossy overview, continue to explore the wiki.

Print/export