Me on the left.

I had a lovely time catching up with the guys, most of whom I have not seen in several years. Shot this using my favorite lens, the Canon 35mm/1.4 L USM. This lens is for sale, by the way, as I am in the process of changing over to the Nikon system. I’ve had a few bites on the lens, but have not yet come up with a buyer, so please contact me if interested. It’s a stellar piece of equipment in need of a good home.

My 100mm Macro is also still available, and I have a 24-70mm f2.8 L that I have not yet officially listed for sale, but please contact me if interested. Full info on the items I am selling may be found here.

In other news, TTG CE2 Stage is officially underway. Still rough around the edges, but I have a working prototype and things seem to be on good track for a not-so-distant release. Now that I am returned from my travels, I expect this to be a high-priority project until completed.

I’d also like to take a moment to shout out to forum members rodbarbee, mridley and Kris for being a great big help in the community forum. I really, really appreciate your presence and expertise in the forum and the assistance you give to new users, especially at times when I am unavailable. You guys deserve a resounding round of applause.

We also have a really excellent success story newly posted to the forum. I love to hear this stuff. If you have an extra minute, check it out.

Lastly, I’m not ready to offer details, but just wanted to mention that Ben and I have been deep into R&D the last few weeks on some new projects, which is why we’ve been fairly quiet on other fronts. We’re hoping to have some really cool things happening later in the year. For the immediate future, though, my efforts will be on TTG CE2 Stage, with TTG CE2 Client Response Gallery to follow.

I hope you’re all having a lovely week, thus far. Thanks for reading; I’m off to bury my head in code for the remainder of the afternoon.

Cheers,
Matt

Professional landscape and nature photographer Michael Frye returns to the Craft & Vision stable to unleash his new ebook Exposure for Outdoor Photography.

There is more to exposure than just getting the right amount of light into the camera. Every exposure also creates a specific aesthetic. Exposure For Outdoor Photography is about natural-light photography and the creation of exposures that are not only technically perfect, but aesthetically compelling.

This 50-spread PDF ebook, tackles the basics, and goes on to discuss the different ways of accomplishing different exposures to bring about different aesthetics. It covers metering modes, exposure modes, histograms, high-contrast scenes, depth of field, shutter speeds, and exposure blending, and more, and includes 10 case studies, and beautiful photographs, to illustrate. There is a lot of information for photographers of all levels in this book and if you’ve ever wrestled with your exposure, Michael Frye can move you forward.

My own estimation of the book is that it’s another solid release, something the Craft & Vision label is well-known for. The book is thorough, well-organized and beautifully illustrated by Michael’s images. Rather than abstract technical conversations, the book favors education through example, being largely devoted to its case studies. It’s an effective approach, and Exposure for Outdoor Photography is another quality release.

Discounts

For the first five days only, The Turning Gate readers may use the promotional code EXPOSURE4 during checkout to purchase the PDF version of Making the Print for only $4 OR may use the code EXPOSURE20 to get 20% off when purchasing 5+ PDF eBooks from the Craft & Vision collection. These codes expire at 11:59pm PST February 20, 2012. Use the link below to buy.

Shop Craft & Vision.

But first, let me share my pain with you. I love beautiful code. I adore carefully hand-crafted websites. And hand-crafted care is just what you get when you use TTG; I’ve written or chosen every snippet of code that appears in your page, and have taken care to make it all as elegant as I possibly can. Then along come the social networking sites and their Like/Tweet/+1/Pin/Share/Recommend/Shout buttons, and they muck up everything. Every one of these inclusions added Javascript and iframes to your pages, which muddies the waters and slows your page loads. But the resulting mess is the price you have to pay when throwing a party in your house … so, we’re going to do this; it just ain’t pretty.

Frequent visitors no doubt know that I tend to recycle the same images over and over in my demonstrations. Well, today I am happy to share with you a demonstration gallery of all new images, photographed just yesterday as I walked idly about the grounds. Here’s what we’re going for: Demonstration gallery.

And here’s what to do …

Step 1.
We’ll need a custom stylesheet. So if you haven’t already done so, you’ll want to act on our tutorial for adding a custom stylesheet.

Step 2.
To make our lives easier, we’ll want to enable the CE2 integration for Facebook’s Open Graph Protocol. Not only does this get us started on our Facebook Like button, but it also gives us access to the currentPageURL() PHP function that I’ve already written. It will be of use to us.

Step 3.
Add the following functions to your PHPlugins implementation.

// Social Media Toolbar
function ttg_canvas_top( $style, $path ) {
	echo '

	<div id="social-media-toolbar">
	<div id="social-media-content">	

	<a href="http://pinterest.com/pin/create/button/?url=' . currentPageURL() . '&media=' . currentPageURL() . '" class="pin-it-button" count-layout="horizontal">Pin It</a>

	<a href="https://twitter.com/share" class="twitter-share-button" data-url="' . currentPageURL() . '">Tweet</a>

	<div class="fb-like" data-href="' . currentPageURL() . '" data-send="false" data-layout="button_count" data-show-faces="false"></div>

	<g:plusone size="medium"></g:plusone>

	<script type="text/javascript">
	// Google +1
	  (function() {
	    var po = document.createElement(\'script\'); po.type = \'text/javascript\'; po.async = true;
	    po.src = \'https://apis.google.com/js/plusone.js\';
	    var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(po, s);
	  })();
	</script>

	<div id="fb-root"></div>
	<script>
	// Facebook Like
	(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) return;
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, \'script\', \'facebook-jssdk\'));</script>

	<script>
	// Twitter Tweet
	!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

	<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

	</div>
	</div>

	';
	return true;
} // END

And then we’ll add some styling to your custom stylesheet:

#social-media-toolbar {
	height: 20px;
	margin: 0 auto;
	padding: 10px 0 0;
	position: relative;
		top: 0;
		right: 0;
	width: auto;
	}

#social-media-content {
	margin: 0 auto;
	text-align: left;
	width: 960px;
	}

#social-media-content > div, #social-media-content > iframe {
	float: right !important;
	}

Variations

In the function above, we’re hooking into the ttg_canvas_top page location. You could just as happily hook into other locations; ttg_block_top and ttg_grid_top are also likely contenders.

Regardless of where you’ve hooked into, you can further manipulate the buttons’ positions by adjusting the CSS position properties on #social-media-toolbar. And if you want more of a ‘toolbar’ look, add a background-color and border to that element.

Maybe you want a blog and a shopping cart, a multitiered, sprawling network of categorized image galleries, a video gallery, a protected client area, and a before-and-after gallery to show off your mad retouch skillz. TTG can do all of that, but let’s not get ahead of ourselves. You’re a beginner, so we’ll start at the beginning.

Two plugins in two acts. One for your pages. One for your galleries.

A Brief Introduction to the Web Module

In Lightroom, at the top click on “Web”. Welcome to the Web module. A few points of interest:

- On the right, at the top, find the Layout Style control panel. Here you may choose to work with one of your installed web engines. If you have installed any TTG web engines, you will find them here.

- On the left, in the middle, find the Template Browser. When you’ve customized your design, you can use the Template Browser to save your customizations as a preset for later use.

- On the right, at the bottom, find the Upload Settings control pane. Never, ever use it. Lightroom’s upload functionality is shaky at best, and this is absolutely not the way to manage your website. So, now that we know it’s here, we can ignore it all the better.

- On the right, beneath Layout Style and above Upload Settings are located several control panels: Site Info, Color Palette, Appearance, Image Info, Output Settings. These house the controls for the active web engine and will change depending upon which engine you’ve selected from the Layout Style list. Within each of these panels, TTG plugins organize related controls into “control groups” easy to identify by their yellow headings.

- The control panel titles — Site Info, Color Palette, Appearance, Image Info, Output Settings — are misleading. They are set in stone within Lightroom and cannot be changed, so we ignore them. It’s the yellow control group headings which provide meaningful insight into the controls there.

For more information on using the Web module, see the Foundations section of our wiki.

Requirements for Use

The shop page for each TTG plugin lists out the system and software requirements for running the web engines, as well as the hosting requirements for publishing content to the web. Pay close attention to these requirements when purchasing. For hosting, we recommend a web server meeting the following bullet points:

- Linux OS
- Apache server
- PHP 5.2.6 or newer

If you are yet in need of hosting, or would like to move to a new host, we recommend Bluehost. Fair prices, great support and everything you need for publishing from TTG plugins.

Act I: Pages

For our first act, we require TTG CE2 Pages.

The purpose of TTG CE2 Pages — we’ll call it “Pages” — is to create the core pages of your website. Pages gives you six pages to work with: three general purpose pages identified as Services, Info and About, and three special purpose pages. The Home page is your frontpage and offers several unique slideshow options for greeting visitors with your best images. The Contact page contains an email contact form that allows visitors to send you messages. And the Galleries page uses out auto indexing technology to create a navigable and easily maintained index of your image galleries.

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

Now pause. Because TTG CE2 Pages does run slowly. We’ve packed a literal ton of options into the engine, and Lightroom takes time to grind through your settings to generate the preview. If you find that TTG CE2 Pages is running too slow, then try TTG CE2 Pages Lite instead; it sacrifices some infrequently used options to offer speed gains of 30-50%!

When the engine finally renders the preview, you’re ready to work. There are a lot of options — a literal ton, as I’ve said — but we’ll be glossing over most of them and honing in on just the essentials for this article. Some of this will be repeated from our TTG CE2 Pages documentation. I will be skipping over a lot of options and features to get at those which are most important, so look for the yellow labels to match the stops I make below.

From the top …

the Filmstrip

Before getting started with TTG CE2 Pages, create a collection of six images. These images will be used on each of your pages. TTG CE2 Pages requires a minimum of 6 images, and the order in which those images are arranged is important. The images in your filmstrip will appear on your pages as shown:

The first image will appear on your Home page, the second on your Galleries page, the third on the Services page, the fourth on the Info page, the fifth on the About page and the sixth on the Contact page. The seventh image and every image thereafter will appear in your Home page slideshow if/when using one of the HTML image gallery/slideshow options.

So, if you wanted a self-portrait to appear on your About page, for example, then the image should be the fifth image in your filmstrip.

Workflow

Within TTG web engines, the best way to work is from the top down. Start with the Site Info control pane, and work your way down through the options. Do not jump around; it’s the best way to get lost and overlook important items.

the Site Info pane

The Site Info pane is devoted to the general well-being of your website. It’s where you setup your masthead and branding, basic colors, navigation menu, and setup a lot of the search engine optimization for your page. You can spend a lot of time here tweaking things for best effect, but the bare essentials are …

Page Title. The most important “under-the-hood” setting in the entire page, populates the <title> HTML element used to identify your page within the browser UI and to search engines. I like to load this with information. When I was living and shooting in Los Angeles, I might have done:

Matthew Campagna Photography – Los Angeles, CA – commercial product and apparel, fashion, portraits, headshots

… Which says quite a lot about the type of work I was doing, and where I was doing it — things people will want to know when finding you by search engine. Super important, though, to include your name or business name here.

Masthead. Here you may set your identity plate — your logo — to display at the top of the page. You can create this within Lightroom, but it’s best to create a graphical identity plate in Photoshop and use that instead. Directly beneath the identity plate graphic controller, be sure to fill in “Alt Text for Identity Plate” using your business name.

Navigation: Hyperlinks. Our default menu includes an item for Blog, but this tutorial won’t be getting into blog creation. And so we will not be needing that link. To remove the link is simple; locate and delete its label. By default, “Blog” is assigned to ( 03 ) Nav Hyperlink, so go there and delete the label:

Deleting the label removes the link from our menu.

Deleting the label removes the link from our menu; it’s okay to leave the Target as is. Feel free to remove links to any other pages you do not intend to use.

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

the Color Palette pane

Our most important tasks in the Color Palette have to do with establishing our page content, primarily being the text appearing on each page. Our content appears in an area of the page which we refer to as “the block”, and the block sits within the larger context of “the canvas”. There are many possible layouts that may be achieved by manipulating our options here, and we’ll learn about some of these options by example as we work on our pages. Visit the wiki for a more thorough look at the CE2 page structure.

Text may be formatted using Markdown syntax, and the easiest way to author your content is to do so outside of Lightroom. I like to write using a plain text-editor, then copy and paste my content into Lightroom.

So we’ll move past the first couple of control groups to do with the overall aesthetics of the block and focus on the important bits, beginning with …

Home Page: The Block. We’ll want a great big presentation on our frontpage, so let’s set:

Canvas Layout: The Grid Up, The Block Down
Block Layout: No Image, Copy Only

Then drop down to Page Copy (md) and write/paste your text for the Home page.

Galleries Page: The Block. To keep things simple, on the Galleries page we’ll display only our galleries, no text block. To rid ourselves of the block, we set:

Canvas Layout: The Grid Only, No Block

With no block, we have no need of Page Copy so ignore it.

Services Page: The Block. As one of our generic-type pages, we’re going to keep it simple here. Write/paste your Page Copy into the provided field so that your text will appear on the page. This is a good place to write something about the services you may provide to your clients: portrait sessions, wedding photography, commercial photo services, etc.

Info Page: The Block. Another generic-type, and a good place to provide additional information about your business. Again, we’ll keep the default layout and simply fill in the Page Copy area with text to appear on the page.

About Page: The Block. Yet another generic-type page, and a great place to write a bit of background about yourself or your business, or to describe your approach to the craft.

Contact Page: The Block. From here, visitors may send you messages. Let’s keep it simple, to the point. Provide some Page Copy encouraging prospective clients to get in touch, then set:

Block Layout: No Image, Copy Only

… to be rid of the image on the page.

Form-to-Email Settings. Very important, this. In the “Receiving Email Address” field, provide a correct and valid email address at which to receive messages sent from your site. This is where visitors will contact you.

Social Networking. Are you on Facebook? Twitter? You can link to your profiles from your Contact page. Set “Social Networking Icons” to “32px”, then fill in the addresses to your various profiles using absolute URLs (full addresses beginning “http://”).

the Appearance pane

From within the Appearance pane you control the multimedia area of each page, which we call “the grid”. You may embed slideshows of various kinds on your pages, customize the appearance of your gallery index and more. But, in the interest of sticking to basics, many of these features we’re not getting into here.

There appear to be a lot of options in the Appearance pane, but mostly it’s just the same set of options iterated for each individual page.

Home Page: Staging. Remember we said we wanted a large presentation on the frontpage? This is where we do it. Set:

Media Presentation: HTML Media
HTML Presentations: Still Image

You now have a great big image on your Home page.

You could instead have a slideshow if you wanted; you’d need 7+ images in your filmstrip, and would want to select either “Galleria Slideshow” or “Photoswipe Slideshow” as your HTML Presentation. If you’d like to know more than that, see the documentation.

Galleries Page: The Gallery Index. We’re not going to do anything here, but I just wanted to point out the location of these controls. If you wanted to change the appearance of your gallery index, this is where you’d do it.

Also take note, the images appearing on this page in the Lightroom preview are for stand-in purposes only, giving you something to look at while you design your site. When published to the Web, this page will be empty. Thumbnails will only appear here later, after you’ve created and uploaded image galleries to your site.

Finishing up with Pages

And that’s all we’re doing with TTG CE2 Pages. For the purposes of this article, we have no need to work in the remaining Image Info or Output Settings control panes. So, save your settings as a template using the Template Browser. Then press that Export button …

Export your site.

… and save it to your desktop …

Save to your desktop.

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

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

We’ll want to be putting these online.

Upload via FTP

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

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

Act II: Galleries

For image galleries, you have several options. At time of writing, you may choose between TTG CE2 Highslide Gallery, TTG CE2 Horizon and TTG CE2 Photoswipe Gallery. While there are some feature differences between the engines, the primary difference is that of visual presentation. Visit the shop pages, explore the demonstration galleries and decide upon which gallery you like the best for presenting your work. That’s the one you’ll want to use.

For the purposes of this article, let’s assume you’ve chosen TTG CE2 Highslide Gallery; it’s the longest lived of our gallery offerings, and probably the most popular choice amongst our users.

A match to our pages

Ideally, we want our galleries to look the same as the pages we’ve already designed. This helps to promote a sense of unity and cohesion amongst the various pages and galleries which comprise our website. We could go through the control panels one-by-one, making the same changes to our gallery that we’ve already made to our pages, but that’s tedious, time-consuming and prone to pilot error. Happily, there is an easier way. It’s a hack, but a simple hack.

We have step-by-step documentation how to share templates between engines, and there’s an older YouTube video that walks you through the process as well:

Now, assuming we’ve used this method and gotten our settings to match. Here’s what’s left to do …

the Color Palette pane

At the very top of the Color Palette control pane, find the option for Canvas Layout. If you want to provide a title and descriptive text for your gallery, set “The Block Up, the Grid Down”. If you do not want to provide text to accompany your gallery, you may eliminate the block altogether by choosing “The Grid Only, No Block”.

These options should be familiar from before, when we had chosen page layouts for TTG CE2 Pages.

Assuming you do want to provide some text, scroll down to the bottom of the Color Palette and write/paste your copy into the Page Copy ( md ) field. The “md” indicates a field that supports Markdown syntax, so you can format your text just the same as you did with Pages.

the Appearance pane

Here you have a great many controls to do with “the grid”, the area of the page which contains your thumbnail images. Your options for the display of large images — click on a thumbnail, see the large image — are also to be found in the Appearance control pane. There’s a lot you can do, but again I say we’re going to keep things simple in this tutorial and run with the default configuration. You can faff about with the many options on your own time.

the Image Info pane

If you have filled in metadata for your images in the Library, from here you may access that metadata and pull it into your image gallery. For example, if you have provided captions for your images you may display the captions with your large images. Let’s take a look at how to do just that.

In the Library, you should fill in the Caption IPTC field for each image.

Back in the Web module, in the Image Info pane, find “Large Image Caption | <img alt=”. To the right, access the drop-list and select “Caption”.

Reload the preview, click a thumbnail image, and you should see the large image appear on-screen accompanied by it’s caption metadata.

the Output Settings pane

There’s some good stuff in here, such as shopping cart integration and password protection, but these features are beyond the scope of this article. What’s truly important to us is the control group labeled “Info for Auto Indexing”.

You may recall the thumbnail images which appeared in the preview of our Galleries page when we were working with TTG CE2 Pages previously. It would have looked something like this:

The Galleries page.

To get the Album Title and Description to appear on the Galleries page, we have to provide that information here for each of our galleries. Fill in the Album Title and Album Description fields only; leave the others blank:

Fill in Album Title and Album Description.

Finishing the gallery

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

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

And again, press that Export button …

Export your gallery.

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

Save your image gallery into an appropriately named folder.

… and we’re ready to publish our gallery online.

Publish the gallery online

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

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

We want to locate this folder on our web server and, using our FTP client, upload our gallery folder into the “galleries” folder. Like this:

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

If we now visit our Galleries page, we will find our image gallery listed there. To add additional galleries, simply repeat this process of creation, export and upload.

Wrapping up

And that is how to build a basic website using TTG plugins. Here we’ve covered our most basic solution for a complete website, using only two engines: Pages + an image gallery. Using TTG there are many more possibilities, many options and configurations more advanced. We could add a blog, a video gallery, a shopping cart … For more information on how to do these things and more, I encourage you to explore our documentation wiki and to keep an eye here on the blog, where more tutorials are yet to come.

Finally, this article has been written from my own perspective as the developer of TTG plugins. User Rod Barbee has written an excellent tutorial from the user’s perspective, and you may which to pay him a visit to check it out.

Most of all, have fun. It can be very satisfying to publish your own website, and to know that you are in control of your content. Put in the time, keep on smiling, and hit us up on the community forum if you have questions. We have hands to lend those who ask for help.

The ubiquity of the Internet and social networking sites such as Facebook, Twitter and YouTube is such that you may not even think about it. You publish content to your website or your profiles, people see it, mission accomplished. But there’s more going on than that, and it’s worth thinking about.

Now let’s stop a moment. I’m not a legal professional. I’m a photographer and a web-designer, a content creator just like you. I am not a licensing or usage expert, and as I write this, I’m not even sure where it’s going. So file this under the heading of Open Discussion or Food for Thought, and do feel free to extend the discussion in the comments following. I have no intention of telling you what you should or should not be doing, though I may offer some friendly advice along the way. I’m only wanting to raise the matter for conversation, give you some things to think about, and let you draw your own conclusions along the way. And that said, let’s stumble on …

Fact: Every time you publish content online, you license it away to someone. If you post a video to YouTube, you have licensed that video to YouTube. When you post a photograph to Flickr, you have licensed that photograph to Flickr. When you post a status update or an opinion to Facebook, you have licensed your psychobabble to Facebook; as of yesterday, Facebook owns my low opinion of George Lucas.

If you use these sites or sites like them, then somewhere in the front or back of your mind, you are probably already aware of this. But here’s one you might think less about: when you publish content to your own website, you have licensed that content to your hosting provider.

Another fact: You don’t own your webspace; you lease it. Whether you host with Bluehost or MediaTemple or (God forbid) GoDaddy, you regularly license your content to that entity. Such licensing is necessary so that that entity may display your content online on your behalf, because — unless you run and maintain your own server from your basement — the host is without exception a middleman between you and your audience.

I perpetually recommend Bluehost to TTG customers, 1) because I think they’re great, 2) because they support everything required to run the full TTG feature set, and 3) because I earn affiliate commissions on references (but just so we’re clear, #3 wouldn’t matter if #1 and #2 weren’t the case). A few months ago, a user emailed me very upset about Bluehost’s terms of service, specifically the portion which reads:

“… By submitting content and data to Bluehost.com, Subscriber grants to Bluehost.com, its successors and assigns, the worldwide, royalty-free, and nonexclusive license under Subscriber’s copyrights and other rights, if any, in all material and content displayed in Subscriber’s web site to use, distribute, display, reproduce, and create derivative works from such material in any and all media, in order to maintain such content on Bluehost.com’s servers during the term of these Terms. Subscriber also authorizes the downloading and printing of such material, or any portion thereof, by end-users for their personal use. This license shall terminate upon Subscriber’s cancellation of the Services as set forth in Paragraphs 2.01 and 3.0 …”

Upon reading this, his survival instinct kicked in — a good instinct — and he panicked. I assuaged his fears by asking him to slow down, take some deep breaths and a closer look. When you upload content to your host, it is then the host who provides a public-facing portal for that content. In effect, the host becomes your proxy, publishing your content with permission on your behalf. For them to do that, you must agree to the terms which grant them that permission and which indemnify them against any potential legal repercussions of putting that content forward to the public. Such terms are completely normal for any entity which endeavors to publish content on your behalf, whether Bluehost or otherwise.

We can also pull a few key phrases to demonstrate that Bluehost really is a reputable bunch:

“… in order to maintain such content on Bluehost.com’s servers during the term of these Terms …” basically says that yes, we are assuming these rights, but only so that we may maintain your content in accordance with the services for which you have hired us.

“… Subscriber also authorizes the downloading and printing of such material, or any portion thereof, by end-users for their personal use …” not because Bluehost wants to give your content away, but because they have no control over the people who visit your site, some of whom will inevitably download your images, copy your text, or print your pages to paper.

And my favorite bit, “… This license shall terminate upon Subscriber’s cancellation of the Services …” which basically states that Bluehost is not assuming such rights for eternity, but only so long as you need them to have such rights in order to perform their services on your behalf. When you no longer need or employ them to host your content, they give up all rights to display that content.

In short, Bluehost assumes only those rights which are necessary to perform their services on your behalf, and only so long as you wish them to perform such services. Good folk, them Bluehost.

Whomever your host, you should look for similar language in their Terms of Service, and dodge any hosting provider which would assume such rights until the end of time.

You will find similar language in Google’s terms of service for Google+, which states:

“11.1 You retain copyright and any other rights you already hold in Content which you submit, post or display on or through, the Services.”

And which goes on to say:

“By submitting, posting or displaying the content you give Google a perpetual, irrevocable, worldwide, royalty-free, and non-exclusive license to reproduce, adapt, modify, translate, publish, publicly perform, publicly display and distribute any Content which you submit, post or display on or through, the Services. This license is for the sole purpose of enabling Google to display, distribute and promote the Services and may be revoked for certain Services as defined in the Additional Terms of those Services.”

Like any other online service, they need some type of policy in place to post and use your images — you must allow them the rights to publish your content.

Early on, Facebook’s terms of use were downright frightening, by many counts unscrupulous. Over time and through revision, those terms have become more acceptable, but it’s for you to judge whether they’re now good enough.

Facebook, Twitter, Google+, Picassa, Flickr, 500px, LinkedIn, Model Mayhem, Vimeo, YouTube are just a few of the many entities to which photographers often license their content. If you sign up for any one of these sites or any one of the thousands like them, then you also accept their terms — whether you read them or not. And I will be the first to admit that I don’t always read them; they make for dry reading at best, and there’s only so much time in the day. Most legalese goes over my head anyway, or straight through me. But I’ve agreed nonetheless, and granted such entities whatever rights they say to use my images, my words, my thoughts and whatever else I hand over to them in the course of my days.

And then what happens?

Here’s an Esurance commercial now being frequently aired on television. Watch for the “Ultimate Dog Tease” clip from YouTube around the 0:07s mark.

So here’s a question or few — and no, I don’t have an answer, though I’ve looked: Did Esurance pay any licensing fees to use that clip? And if so, to whom? To YouTube/Google? To the content creator? Because they used a capture of the YouTube website rather than the source video itself, to whom would such licensing fees be owed, if owed at all?

Here’s a clip of YouTube promoting themselves, which includes lots and lots of content created by YouTube users.

And I think I can safely assume that none of these content creators has been paid by YouTube for their use of said content, thanks to this gem in the terms of use:

“… by submitting Content to YouTube, you hereby grant YouTube a worldwide, non-exclusive, royalty-free, sublicenseable and transferable license to use, reproduce, distribute, prepare derivative works of, display, and perform the Content in connection with the Service and YouTube’s (and its successors’ and affiliates’) business, including without limitation for promoting and redistributing part or all of the Service (and derivative works thereof) in any media formats and through any media channels …”

Chew on this. I have just posted these videos on The Turning Gate, a commercial website. I have done so under the pretext of open conversation, but let’s not be naive. I blog to promote The Turning Gate. By providing content, any content, even conversational content, I am encouraging your to spend more time on the site from which I do business. Even as you read this, I have suckered you out of a piece of your mindshare. And I have done so by posting content created by others, to whom I have paid no compensation, and to whom I owe no compensation thanks to another gem in the YouTube terms of service:

“… You also hereby grant each user of the Service a non-exclusive license to access your Content through the Service, and to use, reproduce, distribute, display and perform such Content as permitted through the functionality of the Service and under these Terms of Service …”

There’s an interesting article in Time Magazine this month, The Beast With A Billion Eyes (subscribers only), all about YouTube and the completely insane numbers that drive the site. It’s worth the read. The article gets started with a montage of still captures from popular YouTube videos. Among them, our dog friend from the Ultimate Dog Tease and — one of my personal favorites, a still from Kina Grannis’ music video for “In Your Arms”, made out of jelly beans:

According to Wikipedia, Time is the world’s largest circulation weekly news magazine with a readership of 25 million, of which 20 million are in the US. For an advertising photographer, licensing for images to appear in an advertising campaign with a circulation of such magnitude would be quite a significant sum of money. And yet, the content creators of the YouTube stills appearing in the magazine likely haven’t been paid a dime. Nor are they very likely entitled to any form of compensation thanks to the licensing terms under which their content was published.

Wrapping back around to the beginning of this babble in search of a point, you — my dear Photographer — are a content creator. And this could very well happen to your content. Am I saying that you shouldn’t post your content to YouTube, Vimeo, Facebook or the like? Not at all. But you should know what you’re getting into when considering such prospects, and be prepared to make an informed decision and to accept whatever consequences may follow.

If your content were to go viral, would the benefits of mass exposure outweigh the potential damages of uncontrolled public access to republish your content? You could dodge licensing your video content to YouTube, opting instead to host it locally on your own website. But then you forfeit a great deal of potential exposure from YouTube’s massive network of content-sharing, Facebook-posting, viral video-blogging users. An acceptable loss?

Comedian Daniel Tosh has a popular cable television show, Tosh.0, which airs and picks fun of videos from YouTube. And I sincerely doubt the show’s producers are contacting each and every content creator to ask permission before running their videos on broadcast television. But I might be wrong …

I’m talking a lot about video. Lots of photographers are getting into video, and plenty more are not. But similar licensing covers your still images as well, though avenues for consumption may not be so overblown (there is no Tosh.0 equivalent for Flickr images, for example).

Let’s maybe try to bring this back around to still imagery …

Google has this cool new thing, Search by Image. It’s really, really cool. It’s also potentially dangerous for photographers.

It used to be that image file names and “alt” content (associated text in the page’s source code) were the extent of search engine optimization for images on the Web. But now Google is able to search using virtual eyes, by analyzing the content of the actual image and searching for images of similar content. So, let’s take the technology for a test drive.

I uploaded this image of my own:

The Pacific Ocean from Hermosa Beach, CA.

And Google found me these:

Google found these similar images.

Pretty good results, though not one of these images is as nice as my own. If I were stealing images, I’d definitely steal mine.

Another go. I fed it another of my images:

Hermosa Pier, CA.

And Google gave me this:

Okay, Google, not such a good job this time ...

So, not such a great job on the second set of results. But you can see that it’s trying; similar color palettes and compositions, though the subject matter is way off base. It did manage to turn up the same image on several pages on The Turning Gate, though, including screen captures which include that image in the broader context of my computer display.

So I added the words “Hermosa pier” to my search to refine results, and Google did a much nicer job:

Refined search results based on my image + the words "Hermosa pier".

That image on the bottom left is actually damn pretty, and I could totally steal it. But I won’t, because …

I am the world’s biggest Battlestar Galactica fan. And Battlestar Galactica fans are good people, who don’t steal. I know what you’re thinking: “No, you’re not! I AM THE WORLD’S BIGGEST BATTLESTAR GALACTICA FAN!!” But you’re wrong; it’s me. And I will fight you to prove it. So I threw a photo of Tricia Helfer at the search. Here’s the photo:

Tricia Helfer, from Battlestar Galactica.

I even thought I’d try to trick the search by renaming the file something obscure. Google gave me this:

Google's results for similar images.

… plus a list of pages containing the same image, which it matched not using any text data, but by looking at the image itself and searching for similar images. Notice also that the search then associated the image with text, its best guess being spot on, “number six battlestar galactica”. One click away in an attempt to find images that are “visually similar”, I was given more and different images of Tricia Helfer, as well as images for Battlestar co-stars Grace Park, Katee Sackhoff and Mary McDonnell, images of Jewel Staite from Firefly (another sci-fi television show), as well as various cast members from Stargate: Universe (yet another sci-fi television show). All of that and more, without supplying Google a single word of text.

In the words of a skilled hunter a moment before being killed by a dinosaur, “Clever girl …”

Now, let’s play Let’s Pretend. Let’s pretend I’m an evil content thief. And I’m looking at Martin Evening’s website. You might know Martin Evening, he writes a lot of books for Adobe products, including the official Lightroom book and many volumes on Photoshop. I decide that I like this image of Martin’s:

Hi Martin. Do you mind if I borrow your image? I'd like to make a point, or something like a point ...

But I decide that Martin’s images are too recognizable to steal outright, so I’d like to find something similar, but not this. I feed it to Google and this is what I get:

Google results for images similar to Martin's.

… plus a link back to Martin’s website, not shown in my screen capture. Smart, Google.

A few clicks and not a single word later, and I settle on this image, which I’m now posting to this article, right here:

A similar image, sufficiently anonymous for our purposes.

I don’t know where this image came from. I don’t know who took the photograph. I don’t know who is in the photograph. Wouldn’t know where to get that information if I wanted it short of Googling the image again. But here it is on my blog. And my not knowing is just the point. I never set foot or finger — virtual or otherwise — on the source website. And yet, the image is now in my possession, plucked straight from Google.

And people can find your images in just the same way.

So, first thing that comes to mind. Those people spending their time disabling the right-click menu or covering their images with transparent GIF files in an effort to defeat drag-and-drop copying from the browser, are diverting their energies in the wrong direction, assuming your images will be taken from your website. I’ll say it again, I never set foot on this person’s website.

So, how can we stop unauthorized or unlicensed use of our content? There is one sure way to protect ourselves. Only. One.

Don’t put it online. Ever.

… But then we forfeit all benefits of having our content online, like oh, let’s say … having people see it.

So what else have we got?

Metadata and watermarks. And there’s Digimarc, a paid image protection … thing. But I honestly don’t know much about it, so I’m not going to mention it again.

So, metadata and watermarks. The best tools in the toolbox. And I’ll tell you straight up, I rarely use them. But it’s only out of laziness, negligence and foolishness that I do not. Because obviously I know better.

Metadata isn’t foolproof. It can be stripped out of an images. But most people doing a quick grab-n-post from Google won’t bother, so your image will very likely carry your contact information and photo credits out into the world wherever it may end up. And if you take the time to setup a metadata preset that gets added to all images on import to Lightroom, then be sure to always export your images with full metadata intact, it doesn’t take much effort to maintain.

While metadata is sneaky about putting info into your images, watermarks are more obvious. A name and a web-address applied to each image — obnoxiously or not — will ensure that anyone who sees the image will know who you are and where to find you. The only way to get the watermark off of most images is to crop it, which can often ruin the image and leave it useless. Or maybe people will be less inclined to use the image because it’s watermarked, which precludes the image from at least some unauthorized appearances.

An unobtrusive watermark doesn't ruin the image -- could feasibly be cropped out of the image -- but anyone finding the image on Google or through any other means not my website will know who I am and where to find me.

So, there you have it. I’ve babbled on enough about all this. In conclusion, I’ll say this:

Be mindful of where you publish your work. Be aware of to whom and in what ways you license your work away when publishing it to the Web, because you’re always licensing it to someone for something. Use metadata and watermarking to identify your images and to discourage unauthorized, unlicensed use. Know that your images will not always be found on your website or on your profiles; they may just show up in Google results or on sites like Ffffound, the entire point of which is to lift images from the sites of hot photographers. And believe me, the folks that hunt for Ffffound will not be daunted by your silly, blocked right-click menus. Use the Web to every advantage, but read the fine print when you’re signing up. Because knowing is half the battle. Yo, Joe.

What do you think?

The color picker.

Scrub the rainbow

The easiest way to choose your color is to click on the color picker’s rainbow and drag your mouse around until you find something pretty. Your currently selected color is displayed as a swatch in the upper-right corner of the color picker, so you can always see what you’ve got.

Click & drag to explore your colorful possibilities.

Keep an eye on that swatch as your scrub the rainbow, though, and you’ll see that only half of the swatch changes. The other half always displays the previously selected color, allowing you to compare the new color to the old. And if you don’t like the new color, you can always roll back to your previous selection by clicking the left side of the swatch.

The color swatch preview shows the original color (yellow) on the left and the currently selected replacement color (blue) on the right. Click the original color to discard the your new color.

To Saturate, or to Desaturate; that is the question.

Control the saturation level of your currently selected color using the Saturation slider.

The Saturation slider allows you to control the saturation level of your currently selected color. Make your color as bright as bright can be, or drag it down into drab greyscale.

Numerical control

The color picker accepts numerical input in a number of popular formats. On the left, we have HSL color — Hue, Saturation and Luminance. On the right, RGB — Red, Green and Blue color channels which allow us to mix colors the way our computer displays do.

HSL and RGB color inputs.

But we’re in the Web module, emphasis on the Web. And on the Web, we use hexadecimal colors — HEX for short — a six-digit series of numbers and letters that represent the RGB color channels in the format RRGGBB. The range of values runs from 0-9, then A-F with 0 being darkest and F being lightest. A value of #000000 is total black, 0% or 0 on the RGB color scale; a value of #FFFFFF is total white, 100% or 255 on the RGB color scale.

In the lower-right corner of the color picker, we can hover over the word HEX to see our hexadecimal color value in a tooltip:

Hover on the word "HEX" to see the hexadecimal color value.

… or click on the word HEX to do away with the RGB inputs and replace them with hexadecimal inputs:

Input or edit your colors using the hexadecimal color format favored on the Web.

You can edit or input your own hexadecimal color values now. And if you want the RGB color inputs back, just click on “RGB” in the lower-right corner, where it has replaced “HEX”.

Manage Your Palette

Easily my favorite aspect of the color picker, though, is the swatch palette located above the rainbow.

The swatch palette.

The left-most swatches are pure white and pure black, #ffffff and #000000 respectively. By default, the five swatches on the right provide various shades of grey. What many users may not realize, however, is that these five swatches may be used as a custom palette.

Did you just hear that? It was the sound of your mind being blown.

If adhering to proper design principles, you’ll want to settle on a small group of groovy colors and then use them repeatedly throughout your design. Creating a custom palette makes it very easy to keep your chosen colors at hand. Setting up your palette is easy.

1. Select a color and make it your actively selected color.
2. Right-click the swatch to which you would like to assign the color.
3. Select “Set this Swatch to Current Color” from the menu.

Customize your palette by selecting "Set this swatch to Current Color" to assign colors to each of the five configurable swatches..

Do this for each of your swatches and setup a custom palette for designing your gallery. Reusing colors is now as easy as selecting the desired swatch.

A custom swatch palette! Degas would be proud.

Color Sampling

You can sample colors from anywhere on your display. To do so, click-and-hold within the color picker’s rainbow, then drag out from there to anyplace on your display to sample whatever color you like. Be careful, though, as it can be very difficult to get consistent color values from one sampling to the next, even when sampling from an area which appears to be of the same color. Me’thinks Lightroom’s sampling may be just a tad buggy.

Choosing Colors

Taking charge of your palette is a fantastic thing to do, but it’s all for naught if you poorly choose your colors. There are lots of sites out on the Web that can help you to create a coherent palette, but one of my favorites is Adobe’s Kuler website.

Adobe's Kuler website is a great help in creating color palettes.

Using the Kuler website, it’s possible to create new color palettes using base colors and a variety of color relationship rules. You can also select from amongst more than 17,000 saved palettes created by Kuler users. Create a Kuler account to save your original palettes and/or to assemble a collection of favorite palettes from those pre-existing.

Your colors are a part of your brand

The colors you choose are an important part of your brand. Your chosen colors will represent you as an individual, a photographer and a business. Choosing the right colors can help you to effectively communicate your desired brand image to existing and potential clients alike. A professional designer can help you to assemble a formidable palette and can use those colors to create a memorable mark or logo for your brand. The Turning Gate retains the services of award-winning graphic designer Petra Andersson-Pardini. To learn more about what Petra can do for you and your photo business, visit our Branding Services page and get in touch. A strong mark, effective use of colors, and well-designed marketing materials can mean the difference in establishing yourself as the foremost local photographic professional, and setting you apart from the deluge of amateur photographers competing for work in your area.

Bah! Who needs a preview anyway?!

You think your panels are as wide as they’ll go, eh? Can’t go wider? I’ll bet you’re wrong. Hold the Option/Alt key, grab onto the edge of the thing and drag it wide as you like. Who needs a preview anyway? Previews are for girls.

And no, it’s not just the Web module. You can do it all over Lightroom. In the Develop module, the Library, the cupboard, on the kitchen table … Go nuts. Have fun.

Responsive web-design is a hot topic right now, websites that adapt to varying display sizes — on desktops, laptops, tablets and phones — and reflow their content to best accommodate the display.

The thing I constantly get hung up on, though, is forms. It’s difficult to make them both responsive and pretty. Most of the solutions I’ve seen sacrifice one or the other, or land somewhere in between but achieve neither with grace. In tinkering I’ve come up with a potential solution, a solution almost too simple. Can it really be this easy? And if so, why isn’t everyone already doing it? I am very likely not treading new ground here, but if there are similar solutions out there, I haven’t seen them.

You may want to take a look at our end result before we get into the details. Here it is.

The Problem

First thing we want to understand is that responsive design is all about adaptable widths. The maneuvers I’m about to demonstrate have to do with moving our width settings away from our form elements, to elements over which we have greater control. We then use the container to shape the form element, kind of like manipulating the shape of water within a balloon by squeezing the balloon.

The input and textarea elements remain oddballs in HTML5. For every other element (except images), we’ve done away with sizing in HTML and instead use CSS to determine the element’s width and height. And while images do have width and height attributes in HTML, we are still able to override those values to fully manipulate images with CSS.

But even when we use ‘display: block‘ to make input and textarea elements behave as block-level elements, their width is still largely determined by their HTML attributes, size for the input element, and cols and rows for the textarea element.

We can use CSS to set our own width and height, but setting ‘width: auto‘ does not behave as we might expect a block-level element to behave, making responsive forms very difficult to create. Most elements will expand to the full width of their containers, while form elements will adhere to sizes defined by HTML or lacking sizes, will assume the browsers’ seemingly arbitrary default values.

We might set our forms using ‘width: 100%‘ and they will then stretch to fill the container; but if we should apply a CSS border or padding, the form element will overflow the container, being 100% + the added size of the border and padding. We could use a smaller percentage, but then we end up with an amount of unused space not occupied by the form, and I find that unattractive.

So, the question becomes how do we create forms which are responsive to the size of their container, while still being able to style our input areas with padding and borders?

The Solution

The solution that I propose is simple: we wrap our input and textarea elements each in a div. At its most basic, our code looks like this:

<fieldset>
<div>
	<input type="text" />
</div>
</fieldset>

Our input will be set as ‘width: 100%‘, and our borders, padding-left and padding-right will be set on the div. The div we allow its natural behavior as ‘width: auto‘ so that it will dynamically adapt to fill its container:

fieldset > div {
	background-color: #fff;
	border: 1px solid #ccc;
	margin: 0 15px;
	padding: 0 5px;
	}

input[type=text], textarea {
	background-color: transparent;
	border: none;
	line-height: 1.2em;
	margin: 0;
	outline: none;
	padding: 3px 0;
	width: 100%;
	}

fieldset > div, input[type=text], textarea {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	}

Conclusion

So that’s it. Fully responsive forms, and by styling the surrounding div to be indistinguishable from the form element, we’re free to make them as pretty as we like. The only drawback is that semantically, our forms have extra div elements that we might prefer were not there. I consider this a small tradeoff for the extra control over my form elements, though.

I’ve created a demo page with more complete markup and styling. See the demonstration.

If any other web-designers stumble upon this article, I’ll be curious to hear your thoughts for or against this technique.

At this point, there are no known outstanding bugs for any CE2 engines. I expect that statement to remain true for about five minutes. In addition to the updates below, Fotomoto has also fixed a bug on their end which caused some layout issues for Fotomoto-enabled Horizon galleries. The fix will have been pushed to all existing galleries, so once more: there is no need to re-export existing Horizon galleries.

Also, I still have some great Canon lenses for sale. Please have a look and let me know if you’re interested in anything I have available. I’d really like to find good homes for this gear.

TTG CE2 Pages v5.2.1

Fixed the version number.
Iconic layout overlays now adhere to border-radius settings.

TTG CE2 Auto Index v5.2.1

Fixed the version number.
Iconic layout overlays now adhere to border-radius settings.

TTG CE2 Highslide Gallery v4.1.3

Fixed broken permalinks when pagination is enabled.
Highslide UI background now matches box background/border; previously, button backgrounds were always white.

TTG CE2 Horizon v3.0.8

Added ‘Padding-bottom’ slider to footer to match TTG CE2 Theme for WordPress UI.
Border-radius (rounded corners) now previews in LR4.