User Tools

Site Tools


ce4_101

A Beginner's Guide to CE4 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 skillzzz. 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.

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.

We'll be using the following plugins, available individually or discounted in the CE4 Web Publishing Bundle*:

* The bundle also includes CE4 Auto Index and CE4 Viewport Sizer, not discussed in this tutorial.


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.

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.


Creating a Workspace

To make the most of CE4 plugins, you should properly setup your workspace. We've got a dedicated tutorial on just how to do that, so go check it out and then come back here to continue.

Tutorial: Creating a Workspace


Get Started with CE4 Pages

In this context, creation begins with CE4 Pages.

The purpose of CE4 Pages – we'll call it “Pages” from here – is to create the core structure for your website. You have six pages to work with, designated as Home, Galleries, Services, Info, About and Contact.

On each of these pages, you may author text in one or two columns, and include an image. Pages also supports the creation of one gallery, one gallery index, and one contact form, each of which you may assign to appear on any page.

Typically, we would assign the gallery to the Home page, greeting our visitors with a selection of our best or most representative work. The gallery index would appear on the Galleries page, and would provide a table-of-contents for your image galleries. And the contact form should usually appear on the Contact page, and allows visitors to contact you via email. Of course, if you want to put the gallery index on your Home page, you can do that too …

To get going, purchase CE4 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, and perhaps 10-25 images for your gallery).

Go to the Web module, access the Layout Style panel on the right side of the module and select “CE4 Pages” from the list of installed engines. The engine will load and the Home page will be displayed in the Web preview:

In the righthand panel, there are many, many options. In this article, we'll be glossing over most of the aesthetic features and honing in on the essentials. 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.

And when in doubt about a particular feature or option, trust the defaults. The defaults are sensible and functional, and designed to get you up-and-running as quickly and with as little fuss as possible.


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 intended root location of your website, i.e. Home. This takes an absolute URL with the trailing slash,  / . The slash is important.

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

[ More ]


Page Title

The title of your page. This should be the name of your business or website, and should be identical in all plugins (i.e. do not include gallery title, page title, etc.; we will frequently concatenate this title with page/gallery specific titles).

You may also wish to include your location in your title, as it will help with search results. A good Page Title might look like this:

 Happy Accident Photography - San Francisco, CA 

[ More ]


PHPlugins

COMPLETELY OPTIONAL, but TOTALLY RECOMMENDED, PHPlugins are a part of our set of advanced extensibility features. Not too difficult to use or understand, and we've done a lot of the heavy lifting so that beginners can easily get started implementing modifications using copy-and-paste.

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.

For example, PHPlugins are the BEST way to change your site navigation menu after publishing, if you want to add or remove pages later, etc.

But because PHPlugins are covered in great detail in a dedicated section of the wiki, with lots of tutorials and examples, I'll say no more about there here. For more information, see the PHPlugins section of the wiki.


The Masthead and Identity

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 “Heading” field using your business name.

[ More: Masthead / Identity ]


Each hyperlink is comprised of a Label and Target. The Label is how the link will appear in your navigation menu, while the Target is the address to which that link will lead.

When setting navigation links to pages created by TTG CE4 Pages, use the Target pull-down to select the target page:

Otherwise, you may write-in either absolute or relative URLs to other pages or sites:

We'll later be setting up CE4 Publisher, which includes search functionality. If you'd like to support image search on your site, then be sure to add a “Search” menu item. For target, select “Search” from the drop-list.

If you want to eliminate an item from the menu, leave its Label blank.

[ More ]


Social Media Sharing

Here we can make our site Facebook, Twitter, Google+, etc. friendly. Enable the “Embed Open Graph Protocol for Facebook / Twitter” checkbox:

[ More ]


Etc.

We've skipped over a lot of stuff: Typography, Page Footer, Social Media Profiles, etc. For in-depth coverage of these items, check out our full documentation.

For now, we move on …


the Color Palette pane

Here you will find headings such as the Home page, the Galleries page, and so on for each of your six pages. For each page, you may enter text for one or two columns, and select an image to appear on the page.

The text inputs accept Markdown and HTML, which allow you to format text however you like. Lightroom's Web module is not a very good text-editor, though, so you would do well to write your content externally, then copy-and-paste into the Web module. I recommend using one of the free Markdown editors, Mou (Mac OS X) or MarkdownPad (Windows).

To preview each page as you edit, click through the navigation menu in the Web preview.


the Appearance pane

Here you may setup the Auto Index, the Gallery and the Contact Form. There are a lot of customization features here, but we will once again be touching upon only the essentials. To dig deeper, you'll want to hit the full documentation.

the Auto Index

By default, this appears on the Galleries page. Click the “Galleries” link in your navigation menu to get eyes on the thing.

We're not going to make any changes, but I wanted to point out the location of the controls and get you to have a look at the page. If you'd like to change the layout or aesthetics, this is where you'd do it. Several layout choices are available, but the “Descriptive” layout is the easiest choice for hands-off maintenance, as it does not require custom thumbnails.

Also take note, the images appearing on this page in Lightroom's 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.


the Contact Form

By default, this appears on the Contact page. Click the “Contact” link in your navigation to get eye on it.

Again, we're not going to do much. If you prefer not to use the “Telephone” or “Website” fields, you can change them or disable them entirely using the provided controls.

Later, you will need to supply a contact address at which to receive your messages, but this is not the place.


By default, the gallery is disabled. I imagine you will probably want to enable it, so let's assign it to the Home page:

Any images in the filmstrip not assigned to appear on another page will be included in the gallery automatically.

There are two supported gallery types, “Flip, Full-screen” and “Galleria”. These types work both on desktop and mobile browsers, so you're free to choose whichever you like for each platform. To customize the galleries in Lightroom, use the “Gallery Type :desktop” option to access options for each.


Ready to Export CE4 Pages

And that pretty well covers the essentials for CE4 Pages. Once more, if you'd like to explore the other options, the full documentation has you covered.

On the lefthand side of the Web module, access the Template Browser and click the “+” button to create a new preset. This saves our work so that we may resume it at a later time, and also allows us to copy our work to use with other CE4 plugins. You should create a new folder to store your website templates, and give it an easily recognizable name:

When you're ready, click the EXPORT button …

… and save your work 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.

Using your FTP client, copy the contents of your exported folder (not the folder itself, but everything inside of it) to the top-level of your website, such that it will become accessible at http://yourdomain.com.

Once you've published your assets to the web, you should be able to visit your new website.


Setup TTG-BE

Now, keep that FTP client running. We're going to be using it.

CE4 Pages is online and looking good, and it's time to setup TTG BE. TTG BE will help us to get our contact form working, and will also be important later on when we setup CE4 Publisher.

Your should have downloaded the TTG BE zip file along with your CE4 Pages download, so unzip it and do the install. Return here when finished.


With TTG BE installed, log into the TTG BE Admin. In the menu, go to Settings > TTG BE Settings.

Click the “Edit Settings” link at the top of the page, then run through the settings. Fill in the “Site Email” and “Vendor Email” settings with your email address, make any other necessary changes, then Save Settings.

Visit your website's Contact page and test the contact form by sending yourself an email. Check your email to confirm receipt of the message before moving on.


Now visit your Galleries page. It's looking pretty empty, so let's create an image gallery …

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

Matching Settings with CE4 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.

Check out our technique for sharing templates between CE4 plugins, then return here to carry on.


Album Title & Description

Under the Color Palette pane, the first group is Album Info.

Every gallery should be assigned a Title and Description. These will not appear on the page, but will be used for search engine optimization and social media.


Content / Description

A little further down, you may provide a gallery description under Content / Description.

If you don't want a description, then simply disable the “Display on page” checkbox. However, if creating a publisher template, then you should keep this option enabled.


Large Image Presentation

Under Appearance > Large Image Presentation, set your preferences for “Presentation :desktop” and “Presentation :mobile”. I like to use Highslide JS and Magnific Popup, respectively. But it's entirely up to you which to choose.


Export and Upload

And that is all for CE4 Gallery. There's much more we could do, but nothing that we need to do just now.

Press the EXPORT button and save the gallery to your desktop. Then use your FTP client to upload the saved folder into your /galleries folder online, the one that was created by CE4 Pages.

Revisit your Galleries page online, and you will see your new gallery has magically appeared on the page!


Setup CE4 Publisher

CE4 Publisher requires TTG BE. Happily, we've already set that up.

The next two steps are well documented, so I'll ask you to see those sections, then return here:

Having worked through the items on that page, you should now be ready to publish your first album using Publish Services.


At this point, you should now have setup and authenticated your publisher instance, and you're ready to publish your first album. Or nearly so.

Did you create and upload a gallery template? If not, then go to the gallery we uploaded previously, in /galleries; we're going to move it.

So if you had:

/galleries/my-first-gallery

Then I want you to move the gallery folder to /ttg-be/templates/gallery, such that you will have:

/ttg-be/templates/gallery/my-first-gallery

Any exported gallery uploaded to ttg-be/templates/gallery will be available for use as a gallery template when publishing your albums.

Now in Lightroom, in the Library module, locate Publish Services in the lefthand panel and your CE4 Publisher instance. Right-click the instance, and from the menu select Create Album…

Creating an album is very similar to creating a collection, just with more options. The essentials are:

Name
The name of the album in Publish Services. Use this to identify your album in Lightroom.

Album Title
The name of the album as it will appear online.

Album Description
Some descriptive text about the album. Depending on your Galleries page layout, this may or may not be displayed on the page.

Slug
The folder name for the album, as it will appear in the page URL. Can also be used to sort your albums, for example 01-Travel, 02-Portraiture, etc.

Template
The template dictating the design and feature set for your album.

Page Content
Under the Page Content tab, you may provide a description for your album.

When ready, press the Create button.


You will now have an album listed under your CE4 Publisher instance. But it's empty! Drag some images into the album from elsewhere in your Library.

When ready, locate the Publish button in the upper righthand corner of the image grid. Press this button to publish your images online. You may add and publish new images at any time, simply by dragging them into the album and pressing this Publish button.

For an overview of this process, please see our YouTube video, http://www.youtube.com/watch?v=OgvIvj79N4g.

ce4_101.txt · Last modified: 2014/08/11 04:48 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.