User Tools

Site Tools


a_beginner_s_guide_to_ce3_web_publishing

A Beginner's Guide to CE3 Web Publishing

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. And after that, we'll throw the publisher into the mix, because the publisher is awesome.

Goals

In this tutorial, you will learn how to create a website including pages and image galleries, and learn how to use the publish services plugin to create and manage image galleries.

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: Creating Pages

Creating a website begins with TTG CE3 Pages.

The purpose of TTG CE3 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 gallery/slideshow options for greeting visitors with your best images. The Contact page contains an email contact form that allows visitors to send you messages; there's also a Thank You page to which visitors are sent after submitting a message. And the Galleries page uses our auto indexing technology to create a navigable and easily maintained index of your image galleries.

To get going, purchase TTG CE3 Pages from the shop and install it according to our installation instructions. Launch Lightroom, then select some images that you'd like to appear on your site's pages – some images for a Home page slideshow, maybe a portrait of yourself for the About page, and whatever images you'd like to appear on your other pages (one image per page, except the Home page).

Go to the Web module, access the Layout Style panel on the right side of the module and select “TTG CE3 Pages” from the list of installed engines.

Now pause, because TTG CE3 Pages won't win any races. In being very flexible, Pages has lots of options that Lightroom needs to grind through in generating the preview. We don't consider this a problem, but merely a point worth mentioning. Loads in CE3 are actually much improved over previous versions, so you shouldn't be much put off by the wait, but we still advise some patience.

That said, when the preview is finished rendering you're ready to work. There are many, many options, 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 CE3 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.

Now, let's take it from the top.

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

Website

The root location of your website, i.e. Home. This takes an absolute URL .

If running at the root location of your domain, then you can either leave the default / or fill in the full URL of your site, http://yourdomain.com/.

The gallery will make use of this information in various ways, such as establishing navigation or locations of shared assets. For the most part, if this is set correctly, then you shouldn't have to think about it beyond this point.

If running your site from within a sub-folder on your domain, then you would need to treat that location as the root, i.e. /sub-folder-name/ or http://yourdomain.com/sub-folder-name/.

PHPlugins

I'd rather not even mention PHPlugins right now, but the controls are between what's above and what's below, and so you're bound to see them and want to know, so …

PHPlugins are a part of our set of advanced extensibility features. Not too difficult to use or understand, but not for beginner's either. Also, PHPlugins are COMPLETELY OPTIONAL.

We think they're great, and we encourage you to set them up (which is an extra step, but easy to do). Even if you don't plan to use them now, you may want to use them later. And if you don't set them up from the start, you'll probably want to kick yourself down the road when you decide that you do want them.

But because PHPlugins are covered in great detail in a dedicated section of the wiki, and tutorialized aplenty on our blog, I'll say no more about there here. For more information, see the PHPlugins section of the wiki.

Page Title

Very, very important to any site is its title, which fills in the HTML <title> element. This will appear in search results, and weighs heavily into your search engine optimization. Seriously, DO NOT LEAVE THIS BLANK.

For our purposes, this is a universal page title that will be used throughout your site. It's not a gallery title, so don't treat it as such. What belongs here is your name or name of business, and your location. For example:

Matthew Campagna Photography - Seoul, South Korea

More Info

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.

More Info

The default menu includes links to each of the default pages, as well as a “Blog” link. You can navigate to the preview for each page by clicking the corresponding link in the menu. Within Lightroom, however, clicking the Blog link does nothing.

Each link needs a Label and a Target.

The Label is the text that will appear in your menu, while the Target is the destination to which that link will lead. For pages created by TTG CE3 Pages, you should set the target using the drop-list of options; to access the drop-list, click the page title to the right of the “Target:” label:

For external targets, you can write in any relative or absolute URL:

Optionally, you may set the link to open its target in a new browser tab/window.

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:

The link will no longer appear in our menu.

More Info

Social Networking

Here you may paste in URLs for your various social networking profiles, including Google+, Pinterest, Instagram, Twitter, Facebook and LinkedIn.

More Info

In the footer, you may wish to replace the Attribution/Copyright Notice with something more specific, for example “Copyright 2013 Matthew Campagna” if you were me.

More Info

Typography & Core Elements

Here you can setup basic appearance for various page elements, text color, hyperlink colors, etc. But this tutorial is focused on functionality, not aesthetics, so we'll only mention this in passing for now. For more information, see the Basic Framework Concepts section of documentation.

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, but we'll keep the defaults for this tutorial. For a broader understanding of CE3 page layout, see Page Structure in the CE3 Framework.

Within the block, text may be formatted using Markdown syntax. The easiest way to author content is to do so outside of Lightroom – after all, Lightroom is a photo processing application, not a writing application. I like to write using a plain text-editor, then to copy and paste my content into Lightroom.

Give each page a title and write or paste in whatever text you'd like to appear on the page. There are separate text-entry fields for each page, so six content entry areas that look like this:

You may also opt to display an image on each page:

Image ID corresponds to the image's position in the filmstrip. By default, the image displayed will be as described in the Filmstrip above.

Following the content entry area for the Contact page, you will also find settings for the Contact Form. This step is very important if you actually want messages from your site to reach you. Provide your email address!

the Appearance pane

From within the Appearance pane you control the multimedia area of each page, which we call “the grid”.

On the Home page, you will have various image gallery options here. On the Galleries page, you may customize your gallery index. And on the other pages, you will have options to include other types of content: a still image, video, etc. 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

If you want a gallery to appear on the Home page, scroll down to the Home Page: Staging control group and select a Gallery Style.

Whatever images you have in the filmstrip in excess of your assigned page images – by default, that's the 7th image in the filmstrip and every image thereafter – will appear in your Home page gallery. For more information on the various gallery features, though, please see the larger documentation.

Galleries Page: Staging

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. Several layout styles are available for the gallery index, with the Descriptive and Masonry layouts being the most automatic, hands-off choices for easy maintenance. The Iconic layouts require some extra effort, being well suited to those who wish to create custom thumbnail images for each gallery. The Descriptive layout is default.

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 CE3 Pages. For the purposes of this article, we have no need to work in the remaining Image Info or Output Settings control panes. So, save your settings as a template using the Template Browser. Then press that Export button …

… and save it to your desktop …

Saving will create a folder on your desktop, and within this folder will be created all of the published assets comprising your website:

We'll want to be putting these online.

Upload via FTP

To move these assets from our desktop to our web server, we'll need to use an FTP client. Don't worry, FTP is easy. And I've got your back with a very thorough FTP tutorial, Introduction to File Transfer Protocol.

Once you've published your assets to the web, you should be able to visit your new website. Not bad, eh? But that Galleries page is looking pretty empty, so let's build some image galleries …

Act II: Creating Galleries

TTG CE3 Gallery is our flagship image gallery plugin and the one we'll be discussing for this article. Many of the same procedures will apply when using our other gallery plugins.

TTG CE3 Gallery is the successor to both TTG CE2 Highslide Gallery and TTG CE2 Photoswipe Gallery, which you may have ready about elsewhere, and combines the best features of both while bringing plenty new to the table.

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:



Using this method to match settings across our plugins, we can usually skip over the Site Info pane for subsequent plugins, as changes therein should not be necessary. Here's what's left to do …

the Color Palette pane

For every gallery, provide an Album Title and Description using the controls pictured below; leave Album Thumbnail blank.

Optionally, you may provide a gallery description; providing text here can yield tremendous SEO benefits. You may use Markdown syntax here to format your text.

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.

Of particular note …

Gallery Style allows you to choose from a number of available layouts for your thumbnail grid. Choose the layout you like best:

For Presentation, you may choose the default Photoswipe or one of two possible Highslide configurations. Highslide: Slideshow is my personal favorite.

Regardless of your choise of presentation, TTG CE3 Gallery will also create a mobile gallery for phones and tablets that always uses Photoswipe, as it's the best choice for touch screens. Because this is automatic, your choice here generally only impacts the traditional desktop experience.

For more information on the gallery styles and presentation types, see the TTG CE3 Gallery documentation.

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.

If you want to display metadata on the thumbnail, such as the image file name, enabled Metadata 1 and 2 and select an appropriate metadata source. Reload the page to see your changes.

the Output Settings pane

In the Output Settings control pane you may set your image export parameters – large image size, thumbnail size, image quality, sharpening, etc. – and also setup e-commerce integration, password protection, and some other cool stuff somewhat beyond the scope of this explanation. See the complete documentation for details.

And that's all we need to do, so let's revisit the Template Browser and save another template. We can reuse this template later when creating additional galleries. When we reuse the template, just remember to:

1. Visit the Color Palette pane, update the Page Copy with new text for the new gallery. 2. Visit the Output Settings pane, update the Info for Auto Indexing with new Album Title and Album Description appropriate for the new gallery.

And again, press that Export button …

… and Save it to your desktop. This time, take care in naming your folder. As we'll be using the folder online, avoid capital letters, spaces or punctuation marks. It's okay to use hyphens ( - ) or underscores ( _ ) to separate words …

… and we're ready to put our gallery online.

Uploading Galleries

Fire up your FTP client again. You may remember that amongst our assets for TTG CE3 Pages, there was a folder named “galleries”. Here it is:

We want to locate this folder on our web server and, using our FTP client, upload our gallery folder into the “galleries” folder. Then 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 CE3 plugins. Here we've covered our most basic solution for a complete website, using only two engines: Pages + 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 and blog, where you will find much information and many tutorials.

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.

But the above only covers the traditional Export-and-Upload method of publishing a site. You can also manage galleries using Lightroom's Publish Services and our TTG CE3 Publisher plugin! Keep on reading!

Bonus Act: Publisher

TTG CE3 Publisher – a.k.a. “Publisher” or “the publisher” – is entirely optional, but can really improve your Lightroom-to-Web workflow. We highly recommend it, and we really think you're going to like it.

TTG CE3 Publisher is a plugin for Lightroom's Publish Services which allows you to easily manage photos and albums on your server when using supported TTG image galleries, without having to output images through the Web module.

Using the methods described above, to create a new gallery you would need to use the Web module to design and export your gallery, then an FTP client to upload the gallery to your server to be viewed online; you would repeat this process for each gallery to appear on your site. A change to published gallery or galleries – a design change, or the addition of images to or removal of images from the collection – requires that you recreate the gallery or galleries in full and upload everything again. In short, making changes to published galleries can be a time-consuming chore.

TTG CE3 Publisher utilizes Lightroom's Publish Services to change the game. Templates may be created from the Web module, then re-used as needed via the publisher to create any number of galleries; changes made to that one template are immediately pushed to all related galleries. You can publish new images individually or in groups to existing galleries directly from the Library module, or you can remove or reorder images in an existing gallery, all without having to revisit the Web module.

TTG CE3 Publisher can save you a lot of time and makes uploading and managing image galleries significantly easier.

TTG CE3 Publisher is fully documented elsewhere on this wiki. Below, we'll breeze through the process for tutorial purposes.

Setup the Publisher

TTG CE3 Publisher is a separate purchase from the TTG Shop. After purchasing and downloading the package, you will see that the publisher consists of two parts: a Lightroom plugin and a web app.

The /publisher/ folder is the web app, and will be uploaded to your web-server. The TTG-CE3-Publisher.lrplugin is the plugin to be installed to Lightroom.

1. Using your FTP client, upload the /publisher/ folder to the same location as your assets from TTG CE3 Pages. Once uploaded, it will appear with your Pages assets as pictured below:

2. While we're logged into the server, there are a few other things to do.

  • Edit the /publisher/api/config.php file. Create a unique API key and replace the default 'ttg8888':
// Change this to a strong password
define('API_KEY', 'ttg8888');
  • Change permissions on the /galleries/ folder to either 777 or 755; depending on your server one may work while the other may not.

3. In Lightroom, go to the File menu and select Plugin Manager to install the TTG-CE3-Publisher.lrplugin. Follow through the process of adding and activating the plugin; see the complete documentation for specifics.

4. After installing, you will find the publisher listed in the Library's Publish Services panel:

5. Click “Setup…” on the publish service, then setup the Publisher API Details by providing the address to the web app's /publisher/api/ folder on your server and your unique API key. Press the “Check Authetication” button to verify that your information is correct. Dial in your other preferences, then press “Save” when finished. You're almost ready to publish!

Create a Publisher Template

To publish galleries, we need a template. Luckily, we already have one. Do you remember the image gallery we uploaded in Act II above? It's currently residing in the /galleries/ folder on your web server. We're going to move it.

In your FTP client's folder view, open the /galleries/ and /publisher/ folders in the tree so that you can see the contents of each. Then drag the published gallery from the /galleries/ folder into the /publisher/templates/ folder as shown below.

The process of creating a publisher template is mostly the same as creating an image gallery, so you can return to the Web module to create as many templates as you need simply by exporting as we did in Act II above. When creating new templates later, remember that publisher templates need not include images (in fact, the fewer images exported, the better) and the block content (i.e. the gallery description) doesn't need to be set in the Web module; feel free to leave it at the default text.

We have now done the following things:

  • Installed and configured the Publisher web app.
  • Installed and configured the Publisher plugin for Lightroom.
  • Loaded a template to /publisher/templates/ on our web server.

And so, we are ready to publish our first album. Everything from this point forward is super easy.

In Lightroom's Publish Services, right-click the TTG Publisher service and select “Create Album…”

A new window will appear with options for creating the album. Give the album a name, optionally provide a gallery description in the “Content Block” area, and select a Template from the list of available choices. When finished, press the “Edit” button.

In the Library, you may now surf through your Folders or Collections. Select images and drag them into your album in the Publish Services pane. When you're ready to publish, select the album in Publish Services, then look for the “Publish” button in the top-right corner of the thumbnail grid:

Press the button and Lightroom will begin to generate and upload your images. When it's done, you will be able to visit your gallery online.

You may add images to the gallery, remove images from the gallery, reorder images within the gallery, create a new gallery/album, delete an existing gallery/album … all from Publish Services and using that magic “Publish” button.

a_beginner_s_guide_to_ce3_web_publishing.txt · Last modified: 2013/09/10 04:03 by admin