All Help Topics

Search Help:

Manual Customization Help

Table of Contents
  1. Overview
  2. Using JavaScript
  3. Using CSS
  4. Widget List
  5. Custom Image Sizes
  6. Creating Your First Page - Primer
  7. Using Favicons
  8. FAQ
  9. Change History

Creating Your First Page - Primer

The primer assumes that you have a strong working knowledge of HTML and CSS. PhotoShelter does not provide generalized help with these open technologies. Please consult the myriad of tutorials on the web, or contact us for an hourly consulting rate.

Basics

This primer is meant as a non-comprehensive tutorial to create your first customized page.

Setting a Public Page Master Template

The Master Template establishes the basic look and feel for your site. Most sites can be decomposed into a few basic areas:
  • Header & Navigation
  • Main Content
  • Footer
In this familiar example, you can see these three areas.

Even when navigation elements sit to the side, the same basic areas still apply. The Master Template sets the look and feel for the "Header & Navigation" and "Footer" areas.

Thus the Master Template is divided into two sections, 1) the stuff before the main content, and 2) the stuff after the main content. When you preview your Master Template, you'll see the area where the main content will go.

Any CSS Styles you create will typically go at the top of this file. You can also source an external CSS file if you already have one on your own website, for example.

A list of available widgets on the page appear in the blue box to the right. Widgets are little bits of code that PhotoShelter parses and converts into links, images, forms, or other data relevant to the page.

Different widgets are availabe on different templates. For example, you can't use the search results widget on the homepage since there are no search results. Clicking on the widget name in the blue box will pull up information about the specific widget.

Some widgets can accept various options. For example, there is a widget to display a "next" link when you are navigating through a series of images or pages. The [[page_next]] widget will simply print out a link that says "next" by default, but you can override this with different text or an image by using its options.

[[page_next text="next >>"]]
or if you wanted to use a graphic instead of text:
[[page_next image="/images/next-arrow.gif"]]
Similarly, certain widgets have CSS styles that you can define. In this particular case, the valid style is "A.page_next SPAN" so you could create the following style: 
A.page_next SPAN {
	background-color: #efefef;
	border-bottom: 1px solid red;
}
In the case of the Master Template, the options are mostly related to navigation to other pages. If you want to create a link to your list of public galleries, use the "Gallery List Page URL". When the widget is processed by PhotoShelter, it will convert the widget into the appropriate URL based on your customized site URL.

<a href="[[gallery_list_url]]">This is a link to my galleries</a>
Obviously, if you are creating a navigational toolbar, you probably won't want a sentence as your link. More likely:
<a href="[[gallery_list_url]]">GALLERIES</a>
or
<a href="[[gallery_list_url]]"><img src="/images/galleries.gif"></a>
The Master Template shouldn't have any <html>, <body> or <head> tags in it. PhotoShelter handles this for you automatically, and inclusion of these tags could lead to unpredictable results.

At any time while you're creating your template, you can click the "Preview" button to see your work. Previewing the page does not save it, so make sure you click "Quick Save" or "Save" to commit the page.

Setting up a Public Page Template

In this example, we'll set up the page that displays the thumbnails within the a gallery.
  • Click "My Account -> Customization"
  • Click "edit" next to "Gallery Display"
PhotoShelter always inserts a default template for you so you have a starting point to work from. Click the preview to see what the page looks like currently. I've made a minor adjustment so the complete code in the template looks like this:
<div class="header">[[gallery_name]]</div><br>

[[gallery_thumbs index]]

Which appears this way:

Looking at my widget list for the page, I noticed that I can display the number of images contained within the gallery. I also want to list the file name instead of an index (counter) number.

<div class="header">[[gallery_name]]</div><br>
This gallery contains <b>[[num_images]]</b> images.

[[gallery_thumbs filename]]

You can begin to see how powerful the use of HTML, CSS and widgets can be in determining not only colors and images, but page geometry as well.