I realize I’ve recently gone quiet, so I wanted to take a moment to let you all know what’s going on. Rather abruptly and much ahead of schedule, I am heading to South Korea this coming Saturday. If you’ve been around TTG for a while, you likely know that Korea and I have a long and complicated history. Well, it’s about to get longer and probably more complicated …

So, the reason I’ve gone silent on the blog is simply because I’ve been running around like a crazy person trying to get things together for my imminent departure.

Meanwhile, I have also been working on the Juicebox plugin for Lightroom, for which an update is pending. And I’ve been poking at TTG CE2 Stage to get Juicebox support into it. I very much hope to release the update before my flight on Saturday, but that may or may not happen; if not, then I’ll hopefully have it ready to go the following week.

I’ve also got the next entry in my Advanced Website Creation series half-written, but will likely not get around to finishing that before I go, which means I will be resuming the series in about a week, or shortly thereafter.

I’m still checking into the forum several times a day, and Rod has been kicking a lot of ass in there as well. In fact, he’s just posted a FAQ of, uhm … frequently asked questions … which is awesome. Check it.

And you may remember I was selling off my Canon gear a little while back. I am happy to announce that I am — as of this afternoon — a Nikon shooter. Really digging the new gear so far, but I definitely need to spend more time wading through the manual and readjusting my headspace to how Nikon’s systems work. Really looking forward to digging into the creative lighting system, and feeling the change of pace may help to recharge my creative juices. A great thing to have done right before a continental shift, so I’m really excited to start in on some new work.

I think that’s all I’ve got, and it’s nearly sushi time. Stay tuned, and we hope to resume your regular programming shortly.

Cheers,
Matt

These are the same guys famous for the SimpleViewer Flash gallery which has been an Internet staple for a good many years now. Juicebox brings the goods from SimpleViewer, but does it all in HTML5 to play nice with iPhones, iPads and other modern devices and web-browsers. Pop on over to juicebox.net to give the new gallery a squeeze.

And yes, I am planning to support Juicebox via TTG CE2 Pages and TTG CE2 Stage in the near future. Wait for it.

In previous entries, we created sections in our site for Video and Retouch Services, but left those sections empty of content. Now in Part VII we will employ TTG CE2 Stage to populate those sections.

As I write, I am working in real-time at http://campagnapictures.com/.

Drivers, start your (web) engines!

The purpose of TTG CE2 Stage is to create pages for the embed of various types of content, including HTML or Flash image galleries, web video, and several other kinds of content. For our Video section, we will naturally be embedding web video. For our Retouch Services page, we will be using Stage’s in-built Before-and-After image comparison mode.

To begin, dupe your TTG CE2 Pages or TTG CE2 Pages Lite template for use with TTG CE2 Stage. If you’ve been following along since I began this series, you should by now be well acquainted with the procedure of duplicating templates.

Getting started with TTG CE2 Stage, after duplicating our Pages template.

As we already know by now, duplicating our template leaves us in a good place to begin working with TTG CE2 Stage, with most of our design already sketched in. Above, I’m just getting started after duplicating my template; presently, the page only displays a still image.

First step, set navigation. In both my Videos and Retouch Services sections, my stage pages are going to be Level-2 points of origin. I know this because I will be putting my pages at:

http://campagnapictures.com/video/stage/

http://campagnapictures.com/retouch/stage/

… And I can count my steps. Dropping the domain name leaves us with /video/stage/ and /retouch/stage/. Start counting:

Our folder /video/ is 1; our folder /stage/ is 2. That’s a Level-2 point of origin. The same for the Retouch Services.

Therefore, visit the Site Info control pane, Navigation: Hyperlinks control group and do what must be done. Again, if you’ve been following along you should by now be well accustomed to this part of the process.

In the Color Palette control pane, The Block control group, I am also going to set my Canvas Layout to “The Grid Up, The Block Down”. This gives me a nice layout with media on top, text on bottom.

Finally, I drop into the Output Settings control pane, Info for Auto Index control group. Just as I did for my image galleries, I set Album Thumbnail as “thumbnail.jpg”. I will be creating custom thumbnails for each of my Stage pages. A little further down, I also visit the TTG CE2 Cart control group and enable the checkbox “Cart Listening Only” so that visitors will be able to access their shopping carts from the pages we’re going to make.

Our generic TTG CE2 Stage template for Campagna Pictures will make a good starting point for each of our videos and retouch comparisons.

And I’m saving a generic TTG CE2 Stage template from which I can begin to work on each of my content pages for both the Video and Retouch Services sections. Because it’s a Level-2 template, I make note of this in my template name: “Campagna Pictures – Stage LVL2″.

Titles, Descriptions and Thumbnails

I’m saying this once and I’m saying it up front so that I won’t have to say it again later. In the paragraphs that follow, we are going to create pages for Video and for Retouch Comparison. For each page that we create, you will want to revisit the following sections:

• Color Palette control pane, The Block control group: Edit or eliminate page text — titles and descriptions — for the individual content of each page.
• Output Settings control pane, Info for Auto Index control group: Provide an Album Title and Album Description for each page you create; this information will be used to represent the stage in your gallery index, the Video or Retouch Services pages, respectively.
• If you, like me, are using custom thumbnails, create a thumbnail.jpg file for each page you create. Copy this file into your saved folder exported from Lightroom.

Creating Video Content

We want to publish a video to our Video section! So we raid the Appearance control pane, scroll down to the Staging control group and set Media Presentation as “Video”. I don’t create video as yet, so for this demonstration I’m just going to pull from YouTube. For specifics on setting up for different video types, see TTG CE2 Stage documentation.

"Video, I choose you!!"

For each: text, title, thumbnail. Export and upload into the /video/ folder at http://campagnapictures.com/video/. Repeat for each video you wish to publish. Easy, yeah?

YouTube video on our website.

Creating Retouch Comparisons

The process of publishing retouch comparisons is very similar to the publishing of video pages above. In the Appearance control pane, scroll down to the Staging control group and set Media Presentation as “HTML” and HTML Presentation as “Retouch Comparison”.

Prepping a retouch comparison.

Have two images in your film strip. Images should be of identical aspect ratio. Set your Image Width and Height values in the Output Settings control pane. You may or may not need to adjust the width of The Grid in the Appearance control pane to achieve the desired layout.

Set text, titles and create a thumbnail. Export and upload into the /retouch/ folder, located at http://campagnapictures.com/retouch/ in our demonstration site. Repeat for each image set you wish to present online.

Publishing retouch comparisons.

Coda

At this point, our website is really beginning to shape up. We have all of our sections in place and we’ve begun adding content to each. As we begin to wind down the tutorial series, we’ll begin to take off the rough edges, make some final adjustments, and prepare to launch this ship into the world. Stay tuned.

If you need to catch up with past entries, list out all entries in our how-to series on Advanced Website Creation using TTG Plugins. If you’re new to using TTG plugins, you will want to see our Beginner’s Guide to Website Creation.

We are working on Campagna Pictures, a demonstration site setup at http://campagnapictures.com.

Our first gallery

My first gallery will be one of self portraits taken over the years so that I can hopefully draw people into my cult of personality. I gather my images, hop into the Web module and — to save time — load up the very same saved template that I used last time for the shopping cart gallery.

A gallery of self portraits, loaded with my shopping cart template. We're not going to shop this gallery, though ...

While I know that this would probably be my top-selling gallery, you just can’t spoil people by always giving them everything they want; you’ve got to hold a little back. So my first step will be to put my shopping cart integration into “listening mode”, which basically means that the gallery will be aware of the shopping cart’s contents in the same was as my other site pages, but that images in this gallery will not be available for sale.

So we hit the Output Settings control pane, E-Commerce Options control group. The settings will remain exactly the same as in our shopping gallery, except that we will now locate and enable the “Cart Listening Only” checkbox:

These images are not for sale!

Again, if visitors come to our gallery with items in their shopping cart from our Shop section, the page will display the “View Cart” widget so that they can check out their purchase; images in this gallery may not be shopping in “listening mode” though. With cart listening enabled, you will notice that the Purchase buttons disappear from your preview.

Also in the Output Settings control pane, hit the Info for Auto Index control group to set an Album Title and Album Description for your gallery.

Stop by the Site Info control pane, Navigation: Hyperlinks control group to verify that your gallery’s navigation is setup as a “Level-2″ point of origin. My shopping cart gallery — the saved template I used as a source for this gallery — was also a Level-2 point of origin, so I need change nothing for my demonstration.

Why Level-2? The gallery will be accessible at http://campagnapictures.com/galleries/self-portraits/. Let’s take away the domain, which leaves us with /galleries/self-portraits/, and then count our steps: galleries (1), then self-portraits (2). Two steps = a Level-2 point of origin.

Drop into the Color Palette control pane, The Block: Content control group to change your gallery description if you’re using it.

You may or may not need to tweak other settings, but we’ve hit upon the key ingredients and my demonstration gallery is now ready for export.

My self-portraits gallery, adjustments made and now ready for export.

I save the gallery into a folder named “self-portrait” and I upload that folder into the /galleries/ folder on my server.

Save a new template

Now that I have a non-shopping gallery configuration, I’m going to save a new template. In my template name, I also want to make note that this is a Level-2 point of origin. So I’m going to name my new template “Campagna Pictures – Highslide Lvl2″, which tells me that the gallery template is for the Campagna Pictures website, uses the Highslide gallery engine, and is saved with Level-2 navigation.

Don’t forget the thumbnail!

You may recall from previous entries in the series that my particular design requires a custom-made 300-by-200-pixel thumbnail image for use by the Galleries page. This file will be named “thumbnail.jpg” and dropped directly into the /self-portraits/ folder.

Copy thumbnail.jpg into the gallery folder.

And when we visit our Galleries page, we now find our image gallery …

My Self-portraits gallery now appears on my Galleries page.

Creating a Sub-category

Our previous gallery was installed directly into the /galleries/ folder, meaning that access is granted to the image gallery directly from the Galleries page.

We now wish to setup a sub-category for “Travel”. So, the path visitors would follow would be to hit the Galleries page, the Travel category, and then have access to galleries from various locations. To accomplish this, we simply throw TTG CE2 Auto Index into the mix. Our folder structure will be:

/galleries/auto_index/image_gallery/

We’ve already created a template for TTG CE2 Auto Index earlier in the tutorial series; we used it to create our Video, Shop and Retouch Services pages. So, let’s load that template now.

To begin, we load the same auto index template we used previously.

Previously, we used the auto index as a Level-1 point of origin for our navigation, meaning the location was one-folder-deep from our domain, http://campagnapictures.com/video/. Now, we will be embedding the auto index two-folders-deep, http://campagnapictures.com/galleries/travel/. To accommodate this new position, we need to edit our navigation hyperlinks.

Hit the Site Info control pane, Navigation: Hyperlinks control group. Modify your targets for Level-2.

For future use, save a new template. In the template name, specify this as a Level-2 template; I’m naming my template “Campagna Pictures – Auto Index Lvl2″.

I next dip into the Color Palette control pane, The Block: Content control group to set text for my page. This is my Travel category, so I was the word “Travel” to appear on the page, and maybe a short description …

Last, I delve into the Output Settings control pane, Info for Auto Index control group. I set my Album Title as “Travel” and fill in an Album Description — the description will not appear in my index, but will contribute in a small way to site SEO. My Album Thumbnail remains set as “thumbnail.jpg” from the previous template; once again, I will be creating a custom 300-by-200-pixel thumbnail for my design, just as I did when creating the self-portraits gallery above.

I export my auto index, save to a folder named “travel” and I upload that into the /galleries/ folder on my server. The Travel page is now available online at http://campagnapictures.com/galleries/travel/.

Our Travel collection now appears on the Galleries page.

Creating a Travel Gallery

So my Galleries section now has a Travel category, but that category is empty. We want to add a gallery in the same way that we added the self-portraits gallery above, only with a few important changes:

1. We will update the gallery into our /galleries/travel/ folder.

2. Because the gallery is one folder deeper in our folder structure, it will be a Level-3 point of origin; we will need to adjust our navigation targets.

And those are really the only differences. Just remember to update your gallery text, Album Title and Album Description and, if you’re making custom thumbnails like I am, to create the thumbnail.jpg file.

You may wish to save a Level-3 Highslide template for future use.

Going deeper …

You can embed auto indexes to create organizational structures as deep as you like. Just remember that for each folder of added depth, you will need adjust the navigation targets to accommodate that level of depth.

Eventually we’ll override this “leveled” navigation using PHPlugins to create a manually and universally managed navigation bar for our entire website, but that comes later … So, don’t break too much of a sweat over your galleries being Level-2, Level-3 or whatever … it won’t matter in the end. I like to have my navigation functional at this point to be of temporary use and so that correct navigation will be available as a fallback should we disable PHPlugins at some point in the future. But it’s of relatively minor importance to our end goal website.

Coda

So, now you have a Galleries section that is somewhat populated. You know how to add galleries and index categories, and you’re well equipped to publish however many galleries you wish to share with your visitors.

Go check out our work-in-progress, http://campagnapictures.com/galleries.php to see our new additions!

In learning this much, you have a general understanding of how we will go about adding content in future tutorials to our Retouch Services and Videos page using TTG CE2 Stage. It will be the same basic concepts again, just without the Highslide gallery …

See you next time.

I have also updated the entry for TTG CE2 Client Response Gallery to reflect the CE2 upgrade.

As always, should you feel so inclined, positive user reviews are most welcome. They help to raise the products up the lists, allowing us to be more easily seen by those browsing the exchange. The more reviews and the better those reviews, the heavier the impact.

We are working on Campagna Pictures, a demonstration site setup at http://campagnapictures.com. Previously in this series, we have setup our foundation pages, a customized WordPress blog, and sections for Video, a Shop and Retouch Services.

In Part V, we will setup our shopping cart system and publish our first sales galleries/pages. In Part IV, we set up our Shop section, but left it empty:

The Shop section of our website, presently empty.

Our shop will consist of two parts:

1. On the front end, we will publish image galleries and/or pages which present our images or products for sale.

2. On the back end, TTG CE2 Cart will be used to manage our shopping cart and process checkout.

You may recall from previous entries in this series that we have already established that our eventual cart location would be http://campagnapictures.com/cart/ and that our saved templates already include this information. This means that all of our published pages thus far are already looking for our cart at that address; the cart just isn’t there yet.

Setting up the shopping cart system

As we have done before, we being by duping our saved template for use with TTG CE2 Cart. Again, I use my TTG CE2 Pages or TTG CE2 Pages Lite template as my source. After duping the template and making a few custom adjustments to my configuration, the cart looks like this in Lightroom’s preview:

TTG CE2 Cart previewed in Lightroom.

As you can see, the cart includes a few of my own images as sample items for preview purposes. It is not necessary to have images selected in your filmstrip — the cart will not use them — so set “Use: Selected Photos” in your toolbar, then deselect images by pressing CMD-D on Mac or CTRL-D on Windows.

Continue to make whatever appearance adjustments you feel are necessary, then access the Site Info control pane, Navigation: Hyperlinks control group and edit your navigation targets for “Level-1″ paths.

Be sure to update your template with current settings after finalizing the cart appearance, then delve into the Appearance control pane. Here you will find the cart’s many “under-the-hood” configuration options which allow you setup important information like your company name and contact, taxes, shipping, pricing, checkout type, etc. A few important things to keep in mind as you go through the setup process:

• We provide complete cart documentation with a step-by-step setup guide. You should use this information when setting up your cart.
• For every configuration options, we have included a description and instructions within Lightroom’s interface. Read this information carefully as you go, as it will help you to choose the right settings.
• After publishing your cart to the Web, you may edit your configuration manually at any time by making changes to the settings.php file. This file includes the same instructions to help you choose the appropriate configuration settings, so don’t be afraid to use temporary settings in your configuration; you can always change things later.
• The shopping cart system, when published online, includes a diagnostics panel to help you verify your configuration and troubleshoot your cart. This is a valuable tool and you should definitely use it before “going live” with your cart.
• If you get stuck, the best way to get help is to ask questions in our community forum. This puts you in direct contact with our cart developer, as well as many experienced users already successfully running sales through our shopping cart system.

When publishing your cart for the first time, it’s a good idea to run the cart in Demo mode, with PayPal setup for ‘testing’ and to use our PayPal API test credentials that we have setup for our users; you will find this information in the PayPal_ReadMe.txt file that accompanies your download of the cart plugin.

If you followed along in Part I of our series, we created @campagnapictures.com email accounts with Google Apps. If you want to, you can setup a store@yourdomain.com or shop@yourdomain.com email account for use by the shopping cart system, or you can simply have the cart sent purchase orders to the same email address as your Contact page. It’s entirely up to you.

Finally, we value our international users and have made every effort to ensure that our shopping cart system is as flexible as possible insofar as being able to accommodate e-commerce jurisdictions in any country, province or state in which the cart might be deployed. If you should find that you are having difficulty configuring the cart for legal compliance within your home region, please get in touch with us via the community forum. We will try to point you in the right direction or, if necessary, will try to update our shopping cart system to accommodate your local e-commerce requirements.

Save Orders to Disk

In order to use PayPal checkout features, TTG CE2 Cart requires that orders be saved to your server. This creates a backup record of all orders in the event that email delivery should fail. It is easier to determine your saved order location after installing the shopping cart system to your web server, and so we will return to this shortly.

Email Setup

The shopping cart system supports two methods of sending email. The SMTP method is preferable, and can be setup to work with Gmail SMTP servers, which is great 1) If you’re setup Gmail support for your domain as in Part I of this series, and 2) Your host allows the use of external SMTP servers or allows scripts to access their own SMTP servers. Unfortunately, this is not always the case.

For hosts on which the SMTP protocols fail, you may opt to use the vanilla PHP mail functionality. This is a perfectly acceptable alternative, and it should not be cause for alarm if you are unable to use the SMTP protocol and must use the PHP mail protocol instead.

We provide a “Test SMTP” feature within the cart’s diagnostics panel. This allows you to test your SMTP configuration after installing your cart.

If attempting to use the Google Apps SMTP server for your cart messages, the details to use are:

Host: smtp.gmail.com
Username: you@yourdomain.com
Password: #YOUR_PASSWORD#
Port: 465
Security: SSL

Manual Options

Finally, the cart supports several options which may not be configured from within Lightroom. These include extra text fields on checkout, mandatory and optional checkbox boxes (for example, agreement to terms of sale) and discount options. To setup these features, you will need to manually edit the settings.php file for your cart. Setup instructions are contained within the settings.php file.

Publishing

When ready, update your saved cart template with your current settings. Export your cart, and save into a folder named “cart”. This folder will be uploaded to your server and — in our example — will be accessible at the location http://campagnapictures.com/cart/, which is the location we have previously defined in Lightroom when setting up TTG CE2 Pages, TTG CE2 Theme for WordPress and TTG CE2 Auto Index.

If all is well, you should now be able to access your empty shopping cart at your domain:

Our empty shopping cart is now online!

Cart Diagnostics

With your cart uploaded to and accessible on your server, your next step should be to login to your cart’s diagnostics panel. Do this by targeting [cart address]/admin in your web-browser. The default login credentials are username ‘admin’ and password ‘access’, though you may have changed the login during setup.

Our demonstration cart uses the default login credentials, and you may access diagnostics at http://campagnapictures.com/cart/admin/ if you’d like to take a look.

Working with your cart installation

Now we test, tweak and test again. A few things to know:

• You will find your settings.php file located at http://yourdomain.com/cart/config/settings.php.
• Your cart settings will be stored in your browser cache. Therefore, when changing your cart configuration, you much clear the settings before your changes will become visible. Do this using the Hidden Links found on the Admin Home page after logging into your cart’s admin area.

the Diagnostics tab

First stop, the Diagnostics tab. Take note of any warnings, suggestions or problems then update your settings.php file as necessary. Reset your cart from the Admin Home page, then test again until everything checks out.

Revisiting the Saved Orders Path

From the Admin Home page, you may execute the showPath function to determine the server path to your cart installation. You will need to edit this path so that it points to the location of your saved orders folder.

If permitted, we recommend creating the saved orders folder outside of your public_html location. However, not all hosts will allow you to do this. If you are not permitted, then we advise creating your saved orders folder within the public_html location, but outside of your /cart/ folder; this will make it easier to update your cart later.

Your saved orders folder should be writable, CHMOD 755 or 777 (755 is generally more secure). You can using CHMOD your folder by right-clicking within your FTP client and choosing “Get Info” or the equivalent command from the menu.

Test SMTP

Next, access the “Test SMTP” tab and run the test. This will tell you whether your cart is capable of sending mail using the current mail settings. If the test passes, then great! But you should still run a test order to ensure that email messages are appearing in your inbox.

If the test fails, then you may need to switch between the ‘mail’ and ‘smtp’ methods via your settings.php file.

Testing the Cart

With diagnostics and SMTP passed, we’re ready to test the cart for real. Or we’re ready to get ready … As yet, we have not published any galleries or pages for testing. To put the cart through it’s paces, we will need some items to shop …

Creating a Shopping Gallery

TTG galleries supporting our shopping cart system include:

• TTG CE2 Highslide Gallery
• TTG CE2 Horizon
• TTG CE2 Photoswipe Gallery

Choose whichever you prefer, but we will be using TTG CE2 Highslide Gallery for our demonstration. Regardless of your choice of gallery, the e-commerce setup is nearly identical for all. You should have no trouble following along with a different gallery type.

Again, dupe your template from TTG CE2 Pages now for use with TTG CE2 Highslide Gallery. Run through your settings to make whatever desired or necessary adjustments to appearance, text, etc.

Revisit your navigation links again. This time, setup navigation for “Level-2″ targets and make necessary adjustments to custom hyperlink targets for same effect.

Next, hit the Output Settings control pane, E-commerce Options control group. Set E-Commerce Mode for “TTG Cart”, then customize the appearance of your Purchase buttons. Finally, verify that your Cart URL has indeed come over from your duped template; it should have. A cart-enabled gallery should have settings that look something like this:

Our gallery's settings for TTG CE2 Cart integration; we're ready to go!

Also in the Output Settings control pane, Info for Auto Indexing control group, give your gallery an Album Title and Album Description.

Info for Auto Indexing, to be used when listing our gallery in an auto index.

Export your gallery. For a save name, you can use anything you want, but DO NOT USE SPACES IN YOUR FOLDER NAME. My first gallery will have images from beaches in the South Bay area of California, so I am naming my folder “south-bay-beaches-ca”.

Creating a Thumbnail

Remember that I have previously setup my auto index to use custom thumbnails? So now I need to create a thumbnail.jpg file for my gallery. This thumbnail will be used to represent my image gallery in the Shop section auto index. For my design, such thumbnails should be 300 x 200 pixels in size.

My custom thumbnail then goes into my gallery folder, like this:

Copy thumbnail.jpg into the gallery folder.

Upload the gallery

When ready, upload the gallery into your /shop/ folder. In my demonstration, the gallery will be directly accessible at the address http://campagnapictures.com/shop/south-bay-beaches-ca/. The gallery will appear on my Shop page:

Our gallery appears on our Shop page.

Why does the gallery appear on our Shop page? Because it’s in our /shop/ folder!

Testing Our Image Gallery and Shopping Cart

If we go into that gallery, our first and best indication that our gallery and our cart are communicating will be whether or not our Purchase buttons appear on the images. If we see Purchase buttons, then we’re in good shape. If the Purchase buttons do not appear, then you should check out your cart diagnostics for errors.

Our gallery displays Purchase buttons, the first sign that our gallery and shopping cart are successfully communicating.

Click the Purchase button for any image. If the shopping options dialogue appears, this is the second sign that our gallery and cart are properly communicating:

We have purchase options! So far, so good; our gallery and cart are still talking.

The third test, click the “Add to Cart” button. The options should close and the View Cart widget should appear on your page, indicating that you have items in your shopping cart.

Finally, click the “View Cart” button, and you should be taken to your cart with whatever items you’ve been shopping.

If all of this goes without a hitch, then your gallery and cart are in proper working order. You can go ahead and try to complete a checkout to make sure everything goes according to plan. If at any point you hit a problem, check your diagnostics, consult documentation and, if still stuck, ask the community forum for help.

Walk Around the Grounds

You might now be wondering why we included the shopping cart setup in all of our pages published in previous tutorials. You may recall that we inserted our cart location into TTG CE2 Pages Lite, and copied that location along with each template duplication into TTG CE2 Theme for WordPress, TTG CE2 Auto Index, etc.

Add some images to your shopping cart, then start clicking around your pages. Wherever you go, your pages should recognize that you have items in your shopping cart, and the View Cart widget will follow you around your website and blog, allowing your visitors to checkout their order from any page on your website!

Coda

In this entry, we have learned how to setup our shopping cart system, integrate that system into our website-in-progress, and how to add an image gallery with shopping cart support.

Remember, though, that you do not need to create a separate Shop section for your site. If you want to, you can put cart-enabled galleries into your main Galleries page, or into any other location on your site. How you organize your website, galleries and shopping experience are entirely up to you.

Previously, we began to build a new photo site at http://campagnapictures.com. We’ve setup domain and hosting, hooked up with Google Apps for @campagnapictures.com email addresses, analytics support and other features, installed and customized a WordPress blog, and published a set of basic pages for our site using TTG CE2 Pages. We have also begun to dabble with PHPlugins.

Campagna Pictures as a work-in-progress.

Our blog now looks like the rest of our site, and the navigation works too!

We’re looking good, but we still have a few dead links in our navigation, pages and sections that we have not yet setup. We’ll remedy that situation now in part IV.

Getting started with TTG CE2 Auto Index

If we look back to Part II of the series, we laid out several items in our planning phase for which we would use TTG CE2 Auto Index. These items were:

• a Video gallery
• a Shop section
• a Retouch Services demonstration
• an organizational hierarchy of indexes for portfolio (i.e. the Galleries page)

Our first step to get rolling with the auto index is to dupe our settings from TTG CE2 Pages using the familiar technique of porting our saved Pages template for use by the Auto Index. You can revisit the template porting instructions here. That done, our Campagna Pictures implementation for TTG CE2 Auto Index is looking like this:

TTG CE2 Auto Index previewed in Lightroom and sporting our custom settings for campagnapictures.com.

And this is an excellent starting point, because there’s really not much else needs to be done for us to to publish our sections.

The first thing I do is dive into the Output Settings control pane, Info for Auto Indexing control group. I set my Album Thumbnail as “thumbnail.jpg”.

I set my Album Thumbnail to use a file named thumbnail.jpg, a custom thumbnail that I will provide for each of my galleries.

Because I am using 300×200 icons to represent each of my galleries, I will be providing custom thumbnails for every image gallery that I upload. I could use the auto index’s random thumbnail feature, but that’s really better suiting to the “Descriptive” index layout that we’re not using here. The technique I am using is described in greater detail in my tutorial Everything You Ever Wanted to Know About the Auto Index, but here are the bullet points:

• I set Album Thumbnail to thumbnail.jpg and save this value as a part of my template; I never need revisit the Album Thumbnail field.
• For every gallery that I export, I create a thumbnail.jpg file — for my design, and image 300 x 200 pixels in size — and drop that image into my saved gallery folder.

Once again, revisit your navigation links. We will be saving this section as a folder at the root of our domain, giving us http://campagnapictures.com/video/. If you’re familiar with our method of working with relative URLs, that makes this a “Level-1″ location; use the navigation drop-down choices to select Level-1 addresses for each of the standard locations and then adjust any custom navigation linkes accordingly.

I update my saved template.

Creating the Video section

I next access the Color Palette control pane, Content Area / ‘The Canvas’ control group to verify that my Canvas Layout is set to “The Block Up, The Grid Down”. This layout allows me to include a title and description for my page, which I then enter using the The Block: Content control group.

My auto index layout now includes a title and description.

Because I will not actually be using any exported images with my auto indexes, I actually don’t need to export any images. It’s a miniscule savings, but a savings nonetheless; I set my toolbar to “Use: Selected Photos” and then deselect all photos by pressing CMD-D on my Mac, CTRL-D for Windows users. With no images selected in my filmstrip, my preview now looks like this …

I have deselected my images, so my preview is now looking bare.

… and we’re ready to export.

Previously, I had setup my Video navigation link to target http://campagnapictures.com/video/, so I’m going to save my index to a folder named “video” and then upload it into the root of my site so that it will be accessible at that URL.

Once uploaded, I should be able to click on the Video navigation link on any page or from my blog, and land on my new Video page. Of course, the video page will be empty — we haven’t added any videos yet — but we will get to that later in the tutorial series.

Make a point to test navigation links from the Video page to make sure they properly connect to every other page on your site. If you hit any unexpected dead links, make adjustments in Lightroom, export again and replace the page online. Keep at it until your navigation is correct.

Once satisfied that your navigation is working properly, update your saved template with your correct menus and prepare to move on.

Creating the Shop section

We have now created the Video section for CampagnaPictures.com. The Shop section is next, and most of our work is already done. Like our Video section, the Shop section will also be a Level-1 asset; our menus and other settings are already done, so all we need to do is dive into the Color Palette control pane to change our title and description in The Block: Content.

Our Shop section.

Again, it is unnecessary to export the index with images, so I export without images selected in the filmstrip. I save my export to a folder named “shop” and I upload this folder so that it will be accessible at the URL http://campagnapictures.com/shop/.

Creating the Retouch Services section

We may not have a navigation link for our Retouch Services page, but we know we’ll be adding one later. Creating the section is exactly as above for the Video and Shop sections, so let’s create the Retouch Services section while we’re here. Again, the bulk of our work is already finished; the Retouch Services section will also be a “Level-1″ asset, so we need make no changes to our navigation. All we need to is update our title and description, then export.

Previewing our Retouch Services page.

I will export this to a folder named “retouch” and upload to my server such that the page will be available at the URL http://campagnapictures.com/retouch/.

Coda

So we now have sections in place for Video, Shop and Retouch Services. We have not yet setup a hierarchy for organizing our image galleries, but that’s something we will address when we get into gallery publishing. For now, we have eliminated all of the dead links within our navigation, and our site is really beginning to come together. Granted these sections are all empty at present, but that too will soon be addressed.

See you in Part V!

Happy anniversary everyone!! And thank you all from the bottom of my snarky heart. =D

Sprawling? Well yes, because I’m trying to cram as many content examples into the site as possible, just to show you how things might be done if, for example, you wanted to create a video gallery, a retouch gallery, an image shop, etc.

This is the third part in an ongoing series, all entries of which you may access by searching the tag Advanced Website Creation.

If you’re new to using TTG plugins, we have a much simpler tutorial to cover the basics. This advanced stuff is much more than many users will need, so do check out the Beginner’s Guide to Website Creation before attempting to tackle the advanced techniques.

Finally, I am building http://campagnapictures.com in real-time as I write. So if you’re following along as I publish these articles, you will get to see the site in various states of incompleteness, leading up to the complete site. If you’re reading these tutorials later from our archives, the site will already be complete — possibly even moved, removed or completely redesigned — and you will have to use the screenshots as go-by.

Now, if you’re still with me, let’s get back into the fray.

Previously on The Turning Gate …

When last we left http://campagnapictures.com, I had just published content from TTG CE2 Pages Lite. This set the base framework for the site in place, but some pages I had only sketched in with the intent that I will return to them later to finalize content and imagery. Honestly, were I not intent on pressing forward with this tutorial series, I might have spent more time in Lightroom getting things just right for the first export, but it’s no problem knowing that I’ll need to republish from TTG CE2 Pages later.

For the sake of having a visual, this is where we stand with the Home page:

Campagna Pictures as a work-in-progress.

My design is minimal, primarily black on white with a old-fashioned typewriter motif. For now, I’m using a Flash-based Polaroid gallery on the Home page because I feel the old-fashioned Polaroid look ties in well with that old-fashioned typewriter motif, and because the Polaroid gallery is a lot of fun. Of course, being a Flash gallery my Polaroids will be unavailable on iPhones, iPads and other mobile devices and tablets; mobile visitors will instead be served a still-image. This doesn’t necessarily bother me at the moment, but I may or may not decide to keep with the Flash gallery later in the project; if I want it, there are HTML-slideshow options I can use instead …

Revisiting PHPlugins Setup

Now that I have TTG CE2 Pages Lite published to my server, I can access the PHPlugins script to get a vital piece of information. This is covered in our documentation on Enabling PHPlugins, but I’ll summarize things here.

What I want is the server path to my phplugins.php file. To get that, I will visit http://campagnapictures.com/phplugins/path.php. Visiting that address gives me this:

/home8/campagna/public_html/phplugins

And so I return to Lightroom, to the Web module, to my template for TTG CE2 Pages Lite, and in the Site Info control pane I locate the PHPlugins options and paste the address here:

Providing my server path to the PHPlugins assets.

And then I update my saved template with the current settings so that it includes this path.

TTG CE2 Pages does not need this piece of information. But I provide it anyway, because we will soon be using our Pages template as a base for our other plugins. And those plugins do need this information. By providing it here on the front end, we ensure that all of our exported pages and galleries will include this information.

Tweaking Design with PHPlugins

I could do this now or later, it doesn’t matter. But because we’re already talking about PHPlugins, I’ll do it now. There is some space on the left side of my Home link in the menu that bothers me:

I'd really like this HOME link to be flush to the left side of my design ...

Because I’m using the drop-down style navigation menu, the options within Lightroom don’t allow me to eliminate this left-margin, but I really want my menu to be flush — or nearly flush — to the left of my layout. To do this, I will implement a custom stylesheet via PHPlugins.

This is dead simple. I just create a new stylesheet at http://campagnapictures.com/phplugins/css/custom.css, then I copy-and-paste the script from my custom stylesheet tutorial into the phplugins.php file. I load this bit of CSS into my new stylesheet:

.sf-menu li:first-child a {
padding-left: 2px;
}


And now my menu looks like this:

And now my menu is nearly flush to the left; I allowed a 2px left margin because I think it looks nice.

And because I’m using PHPlugins, every page and every gallery will automatically enjoy these changes on upload, though not in Lightroom’s preview.

We’ll be returning to PHPlugins later to setup my drop-down navigation, but later …

Pretty up the blog!

So we’re already connected to our blog via the site navigation menu, but the blog doesn’t connect back to the rest of our site, nor does it match our design. We’ll next set our sights on remedying that. To make things easier on ourselves, we will use a simple hack to copy our customizations from the TTG CE2 Pages template into a new template for TTG CE2 Theme for WordPress. Read how to copy settings between templates, then come back here.

After copying my “styleData” from the Pages template into a new WordPress template, I have this:

To begin my WordPress theme, I copy my customizations from TTG CE2 Pages Lite. It saves me a lot of time and effort!

… and we have a very good place from which to begin our WordPress customizations. Now I just need to run through the options in Lightroom to do some cleanup, customizing my sidebar, comments, etc. Stuff that didn’t get done in TTG CE2 Pages because it didn’t exist in that plugin. Double-check your navigation links, and make sure they’re all targeting pages correctly from your blog location.

I make a point of clicking through all of the sample articles within Lightroom’s preview, as each provides visual feedback on various aspects of the WordPress theme. The first article, for example, let’s me see what comments will look like on my blog.

When I am satisfied that all appears as it should, I update my saved WordPress template with my new customizations, then export, install and activate my theme as described in the TTG CE2 Theme for WordPress documentation.

If all is done correctly, the blog now looks like your pages and the navigation should be all hooked up, allowing you to move back-and-forth:

Our blog now looks like the rest of our site, and the navigation works too!

You may also notice that our Home navigation link is flush to the left side of the design, which means our PHPlugins are also working properly.

Coda

And that wraps things up for part III. In this entry, we have:

• Taken a first look at using PHPlugins.
• Learned how to copy customizations from a saved template into a new template, and how this can save us time.
• Created and installed a theme for our WordPress blog.
• Verified that we can navigate between our pages and our blog using the navigation menu.

See you soon in part IV!

This series of articles is Advanced Website Creation. If you’re new to TTG, I suggest that you first read through our Beginner’s Guide to Website Creation and try your hand at creating a simpler website. With those beginners’ concepts understood and mastered, you can come back to these advanced techniques at a later time.

Now, assuming you’re still with us and ready to get your hands dirty, let’s get on with this advanced madness.

Planning your website

Before beginning to design your site, it can be helpful to have an idea of what the end site should encompass. This helps us to determine which plugins we will need to use, as well as how to structure the site as we go through the creation process. A prerequisite understanding of TTG plugins and their intended use is very helpful here, hence the “advanced” designation of these tutorials. If you’re presently unclear of the intended use for some or all TTG plugins at this point, though, I think reading through this section should help to shed some light of the subject.

In part one of this series, we installed a default WordPress blog, so we know that we’re going to be blogging ( + TTG CE2 Theme for WordPress ).

I will want a basic page frame work — Home, About, Contact, etc. — and at least one gallery index to corral my image galleries ( + TTG CE2 Pages ).

I want to sell images, so I will setup a shopping cart system ( + TTG CE2 Cart ).

I will need an image gallery plugin so that I can display my images in galleries; I have options for various gallery types, but I am going to choose the Highslide gallery. ( + TTG CE2 Highslide Gallery ).

I plan to organize my image galleries through a series of hierarchical categories. I would also like to separate my portfolio galleries from my sales galleries, so will need a separate gallery index for my Shop section. I want to create a Videos section, which will necessitate another gallery index. And I want to create a gallery to show off my photo processing and retouch capability, so I will need yet another gallery index for that. All of this, I can accomplish with The Turning Gate’s auto index ( + TTG CE2 Auto Index ).

The auto index will handle indexing for the Video and Retouch sections of my site, but I will also need a plugin to create the individual items to appear in those sections ( + TTG CE2 Stage ).

Your website may not need all of these components. But for the purposes of this tutorial, I want my demonstration site to show off the full range of possibilities, and to show you how to make these things happen. So, now that I know what I mean to do, I can compile a list of the plugins necessary to make these things happen. With all that I intend to do, I have determined that I will need the following plugins, listed alphabetically:

• TTG CE2 Auto Index
• TTG CE2 Cart
• TTG CE2 Highslide Gallery
• TTG CE2 Pages
• TTG CE2 Stage
• TTG CE2 Theme for WordPress

Planning the Navigation Menu

Site navigation is paramount to a successful website. Now that we have a plan, let’s take things further and try to determine the structure of our site and how to navigate that structure. By default, the TTG navigation menu includes:

• Home
• Galleries
• Blog
• Services
• Info
• About
• Contact

… and that’s a good start. But for everything I plan to do, it will need to be expanded. So I’m going to mock up my new menu with rough addresses to the location of various items. And I know that a URL of ‘/’ is equivalent to ‘http://campagnapictures.com’, so let’s keep that in mind as a mock up my addresses. Items added to the menu appear below in bold-face type.

• Home ( /index.php )
• Galleries ( /galleries.php )
• Video ( /video/ )
• Shop ( /shop/ )
• Blog ( /blog/ )
• Services ( /services.php )
• Retouch Services ( /retouch/ )
• Info ( /info.php )
• About ( /about.php )
• Contact ( /contact.php )

So, now that I’ve updated my plan for navigation, I know a few new pieces of information:

• From part one of this series, we already know that our blog will be located at http://campagnapictures.com/blog/.
• I have determined that my Video section will be located at http://campagnapictures.com/video/. At this location I will use TTG CE2 Auto Index to create a landing page from which to access my videos.
• I have determines that my Shop section will be located at http://campagnapictures.com/shop/. At this location I will use TTG CE2 Auto Index to create another landing page from which to access my galleries of images for sale.
• I have determined that my Retouch section, containing examples of image processing and retouching, will be located at http://campagnapictures.com/retouch/. Again, I will use TTG CE2 Auto Index to create a landing page from which individual examples will be accessible.
• The other items in my menu are created by TTG CE2 Pages and will run from their respective default locations.
• The Galleries page created by TTG CE2 Pages will be the main index for my “display only” image galleries where I will showcase the bulk of my work. Because TTG CE2 Pages creates one gallery index, I do not need TTG CE2 Auto Index for this, though I will use TTG CE2 Auto Index to create hierarchical categories within this main index. These need not appear in my primary navigation, however.

Finally, though my shopping cart will not be appearing in my main site navigation, it does need a home. And because I have already familiarized myself with the TTG CE2 Cart setup and documentation, I have determined that my cart should be located at http://campagnapictures.com/cart/.

Now we have a plan, we tentatively know where all of our pieces belong, so let’s start designing …

“No wait, I have a question …”

“Do these things need to be organized in this way?!”

No, they do not. If you want to, you can mix your display galleries, your sale galleries, your videos and your retouch demonstrations all into a single gallery index, or you may subdivide them in any other way that you like.

Or maybe you don’t want a gallery index; you just want one very concise portfolio of work. Then you can eliminate the Galleries page from your export of TTG CE2 Pages, you can remove it from the navigation menu, and you can link directly to an image gallery.

It’s your website. Do whatever you like. TTG plugins are flexible enough to accommodate nearly any arrangement of the pieces. You’ll just need to tweak things to accommodate your particular plan.

Getting into Lightroom

And we finally get into Lightroom! TTG CE2 Pages contains the most universal set of design elements, elements which will reappear in the various other plugins we will be using throughout the creation of our site, and that makes it the best place to begin. But TTG CE2 Pages contains so many features, it tends to be a bit slow. And so I’m going to begin by using TTG CE2 Pages Lite, which strips out some features, but which benefits from speed gains of 30-50% varying by user. If I later decide that I want to use features which are exclusive to the full version of the plugin, I can port my customizations for full version use. This porting of features is going to be something we do a lot of going forward, as it saves us a lot of time and headache when working with multiple CE2 engines; we’ll get into the how-to further along in the tutorial.

But let’s slow it down a bit and setup our workspace. We’re in the Web module, and the first thing I want to do is grab hold of the edge of the righthand control panel with my mouse cursor, and drag to the left as wide as the control panel will go.

Next, I get into my Layout Style list and I select TTG Viewport Sizer. If you don’t have TTG Viewport Sizer, you can download it for free from The Turning Gate’s shop: get TTG Viewport Sizer.

TTG Viewport Sizer does just one thing: it tells you the size in pixels of your preview area. As you resize Lightroom’s window, or widen or narrow Lightroom’s control panels, you can see the measurements changing in real time. So I’m going to grab hold of the edge of the lefthand control panel, and I’m going to drag it wider or narrower until the width of my preview area is 1,200-pixels. If you’re on a very wide display and need to pull a control panel wider than is allowed, hold down the OPT/ALT button on your keyboard; you’ll be able to resize the panel much larger.

Lightroom's Web preview area, measured to a width of 1,200 pixels using TTG Viewport Sizer.

Why 1,200 pixels? Well, I’m going to design my site to a width of 960 pixels, which is pretty standard for web designers. But 1,200 pixels wide, I think, gives me a fair representation of the space that a median sample of users might be seeing as they browser the web — not too wide, not too narrow. There’s nothing scientific about it, I just plucked the number out of the air. But I think it’s a good measurement for a workspace.

Btw, TTG Viewport Sizer is also great for measuring Flash image galleries and slideshows when you know you have a limited amount of space to deal with; I then like to use the ‘F’ key to toggle between full and windowed screen modes while I work on Flash galleries to ensure that my design will work within the space I’ve been allotted. That’s nothing to do with the task at hand, though; I just thought I’d mention it.

So, we have our preview viewport measured to a width of 1,200 pixels, so let’s dig back into the Layout Style list and select TTG CE2 Pages Lite, and we find ourself looking at the default appearance:

The default appearance of TTG CE2 Pages Lite.

The chicken, the egg, the farm or the farmer?

The default design of TTG plugins is intended to be mid-toned, neutral and attractive, to get you up-and-running with the bare minimum of effort. If the design appeals to you as is, then keep on rolling. But defaults aren’t for everyone, and that’s perfectly understandable. TTG plugins pack in lots and lots of options and opportunities for visual and functional customization. But how does one decide on a direction for design? There is no one right answer, so here’s a few possible answers:

• Start with your logo and brand, then design your pages with respect to those items.
• Start with your pages, then design your logo with respect to your design.
• Get in touch with award winning graphic designer and brand consultant Petra Andersson-Pardini via our Branding Services page to commission a new logo and brand identity, then incorporate her design and colors into your pages. This was the course we followed when helping to design a new site for Imagesz Photography.
• Score color swatches from a site like Kuler, then load your color picker with your new favorite colors.
• Start noodling around with the color and layout controls until you hit upon something grooooooovy, and that’s “groovy” with intentionally extra O’s.
• Hit The Turning Gate’s Template & Themes section to expand your starting options with additional pre-made designs.

Seriously, whether you design your pages around your logo or design your logo to fit you pages, it’s entirely up to you. The chicken or the egg, man?

My favored course of action would be to contact Petra and get something professionally done. Petra designed the new TTG logo above, and I love it. My personal photographic identity is still in flux, so I’m holding off on professional logo work until a later time — for this demonstration, I’ll be slapping something together in Photoshop — but when the time comes, Petra will be designing me a second logo. Commissioning your logo is definitely the right thing to do if you’d like your brand to stand out from the crowd.

For an example of branding informing site design, see my article on Imagesz Photography. Going forward in this tutorial, however, I’m going to start my design in Lightroom and will create my logo afterward.

Getting on with the design

I put on some good music to get into the mood — today I’m listening to School of Seven Bells’ Ghostory album — and quickly decide to go minimal with a white background. I open the Site Info control pane and very quickly run through the Page Background, Masthead, Navigation and Footer control groups, setting all of my background-colors to white and making my text and menu hyperlinks black so that I can see them. I then open the Color Palette control pane and set the background-color of the block to white and my heading and text colors to black as well. This is a rough pass, nothing is final, and I’m doing this just to set everything on white and to keep elements visible (because white text on a white background just doesn’t work). I also Edit my identity plate just to put something rough in place; I promise you this will not be my final logo. I press the reload button to refresh the preview, and this is where I am:

My design after a first and preliminary pass at the customization options.

I am not at all set upon my design, but I have a direction now and so I’m going to go back and start filling in some of the administrative details for my site. It’s important that you settle on a direction before doing this, simply because if you start filling in details and then decide to load a design template, the template will overwrite your input. So, apply templates or establish a direction first, then start filling in your personal setup information!

Fill in the details

Close all of the control panes on the righthand side of the Web module, then open the Site Info pane and start at the top with Page Title. This should be your business name, location and maybe a few powerful keywords; don’t go overboard with keywords. I’m currently housed in Silver Spring, MD, so my site title is going to be:

Campagna Pictures – Silver Spring, MD – Portrait, Product, Concert and Fine Art Photography

By no means is this meant to be exhaustive. Much of my photography past and (hopefully) future is Travel and Landscape photography, but I don’t really expect potential clients to be Googling for travel or landscape photographers. Those images will most definitely appear on my website, but they’re not going into my site title. Load your title with the things you think are most likely to get you work; for many, that would put “Wedding” high on the list. But personally I hate weddings and I do not aspire to be a wedding photographer. That’s just me!

Remember that your title will factor heavily into search engine rankings when Google starts looking at your pages. That’s why I’m putting my name, location and marketable photography services here. If someone Googles for “photographer silver spring, MD” or “portrait photography silver spring” then I want to be found!

Make your site title informative! Let people know who you are, what you do, and where to find you.

Now we move down to Page Setup. Meta information has relatively little value these days, but every little bit helps. Notice that I’m loading Meta: Keywords with a lot more detail than I used in my header. No harm in putting all of your disciplines and services here. You might even pack memberships and affiliations into your keywords, like APA Member, ASMP Member, NAPP Member, Adobe Certified Whatever …

Meta information has relatively little value to SEO these days, but there's no harm in using the opportunity to pack information into your page.

Next up, the blog feed …

"If you have a blog ..." it says.

“If you have a blog,” it says. Well, we do! We setup our blog back in part one of this series, so let’s visit our blog now and get our feed address! Now you’re beginning to understand why installing WordPress was one of our first tasks, right?

So I go to http://campagnapictures.com/blog/ where I have my blog installed. Remember that we’re still running the default WordPress theme, so we’re all — without exception — going to have this in our sidebar:

Find the RSS feed link in your blog sidebar.

Locate the “Entries RSS” item and copy the link address. Paste that address into Lightroom as your Blog Feed:

Paste your blog feed address into Lightroom.

Now dig out your Google Analytics Property ID from part one of the series, and add that to Lightroom as well:

Our Property ID for Google Analytics.

If you have a Facebook page you’d like to associate with your photography business, find your Facebook ID and enter that into the Page Setup as well. Mind you, Facebook does not make it easy to find your ID; in fact, they keep changing the site and making the ID even more difficult to find than before. If you look at a photo on Facebook, your ID will be one of the silly numbers in that URL; usually the last string of numbers in my experience. You can test it pretty easily, though. Go to http://facebook.com/XXXXXXXXX, where the X’s are your ID number. If your ID is correct, Facebook will load your profile.

Enable PHPlugins

I love PHPlugins!! I would never, every publish a site without enabling them. Even if you don’t intend to use them right now, enable them and no harm done. You might find them useful later on. And I will definitely be putting them to use later in this tutorial series. For TTG CE2 Pages and TTG CE2 Pages Lite, just enable the checkbox:

Enable PHPlugins. You will thank me later.

That’s it! That’s all you have to do!

Cart Setup

We have not yet created our shopping cart, but we have already decided 1) That we are going to have a shopping cart, and 2) Where that shopping cart is going to live on our server. Open the Output Settings control panel and scroll to the very bottom. Let’s write in our future cart address:

Tell TTG CE2 Pages the eventual location of your shopping cart installation.

This is why we planned ahead earlier in the process. Though our cart is not yet in place, we know where it will eventually be, so we’re able to prepare for it by telling our pages that location.

Close the Output Settings control panel; we have nothing more to do here for the moment.

Save a Template

At this point, we have maybe a rough design or perhaps a fairly complete design from having loaded a pre-made theme. We also have input some fairly tedious information and we’re ready to move on. This is an excellent time to save a template to ensure we don’t lose our work thus far. On the lefthand side of the Web module, open the Template Browser, press the ‘+’ button and create a new template in a new folder; we will put all of our templates saved for this projects into this folder.

Create a new folder for your project, then save this and future templates into the folder.

Back to designing …

Now that we’ve done much of the necessary housekeeping and under-the-hood work, it’s time to smooth over your design. I will mostly leave this part of the process to you to figure out and design to your satisfaction. I will hit upon some of the important highlights, however.

The identity plate

The identity plate — created or controlled from within the Site Info control panel — is intended to be used as your site logo. In most cases, it is best to create this in Photoshop and save your image as a PNG file with a transparent background. While Lightroom does give you the capability to create an identity plate within the Web module, identity plates created thus often feature an odd use of negative space which can be particularly problematic when attempting to center your graphic.

Colors and accessibility

A visitor recently emailed to thank me for using blue hyperlinks on my blog. He said, “I want to thank you for using blue as your links. As a red/green colour blind person, the red/green that most designers use is practically useless to us. I have sent countless emails to sites that continue to use red and green and most don’t seem to care.”

It’s perfectly fine to make a design choice that negatively impacts color blind people, but do it deliberately. You may find this article of interest, Designing For, and As, a Color-Blind Person.

Typography

“The Block” is the section of each page or image gallery that is given over primarily to text. Text in these areas may be formatted using Markdown syntax. A few points on managing textual content and typographic appearance for your site:

• Typography rules should be uniform on all pages of your site. Set your typography rules — fonts, font-sizes, colors, etc. — and stick to them for all pages and galleries.
• You can author text within Lightroom, but Lightroom is not an ideal authoring environment. It’s best to write in a plain text-editor, then to copy-and-paste your content into Lightroom.
• When writing within Lightroom, you may press OPT-RETURN on Mac to create a line-break. On Windows, it’s probably either ALT-ENTER or CTRL-ENTER.
• Within TTG CE2 Pages, the Info page is, by default, a typographic test bed. Use the Info page to style your typography; you will find the typographic options at the bottom of the Site Info control pane, and the typography colors in the Color Palette control pane.
• At any time after exporting your pages, you may update the block content by opening and editing the appropriate files in the /fragments/ folder. This is true for pages created by TTG CE2 Pages, TTG CE2 Auto Index and TTG CE2 Stage; it is not necessary to re-export from Lightroom to make changes to text.

The Galleries page

The Galleries page uses our auto indexing script to make adding galleries to your site an easy job. We have a separate tutorial dedicated to completely understanding the auto index, so check it out to learn everything you ever wanted to know about the auto index.

Contact address

In the Color Palette control pane, toward the bottom, do not neglect to supply a receiving email address for messages from your website. If you want your Contact page to work properly, this is really important! And because we setup @yourdomain.com email address in part one of this tutorial series, you have super-professional, Gmail-powered email accounts set and ready for use, right?!

Use your shiny, new email address(es)!

You can opt to go very personal with an email address like your_name@yourdomain.com, or go professional with something like studio@yourdomain.com or info@yourdomain.com. The free version of Google Apps allows you to create up to 10 different email accounts, so you have plenty of freedom to do as you like here. You can even have your contact form target multiple addresses; supply addresses in a comma-separated list, without spaces.

Save a template!

As you work, remember to update your saved template or to save new templates as you go.

Taking a look at Campagna Pictures

Campagna Pictures as a work-in-progress.

So I’ve gone through all of TTG CE2 Pages Lite and have exported a site, then uploaded it to my server. You can check it out at http://campagnapictures.com. If you’re following along as I go, you’ll see that parts of the site are only roughed-in at this point; if you’re reading this article long after the fact, then things will probably look more complete. But, at time of writing, my Galleries page is still empty (because we haven’t gotten to the point in the tutorial series where we’re creating galleries yet), and my Services page is only sketched in.

On the Home page, I’ve opted for a Flash-based Polaroid gallery. I think this gallery is a lot of fun, and the polaroids go hand-in-hand with the old-fashioned typewriter motif of my site design. An advantage of using a Flash gallery is that I can easily change out my Home page images by changing/updating the Flash gallery, so there is no need for me to update using TTG CE2 Pages just to change those images. The downside is that my Home page gallery will not be available to iPhones, iPads and most other mobile devices because it’s Flash; such devices will see a still-image instead. This may or may not sit well with you; TTG CE2 Pages includes options for several HTML-based galleries that display well on mobiles, so those are always an option. In the end, Campagna Pictures may or may not persist with the Flash gallery, but wait and see; I haven’t decided yet.

My images appearing on each page are not final decisions either, so I will probably be exporting Pages again later. And I decided to axe the Info page while I was designing; after sketching in the Services page, I just felt that the additional Info page would not be necessary right now.

I also axed the “Retouch Services” item from the menu, though I had planned for it early in this tutorial. I’m now thinking I will add that in either as a hyperlink from the Services page, or as a drop-menu item. Either way, it happens later.

The Blog link connects to my WordPress blog, which is still running the default WordPress theme. And my Video and Shop links are addressed, but there are no targets at the addressed locations … so, plenty to do in Part III.