Sonnet Template FAQ and General Information – PhotoShelter Support Center

FAQ

Who is this template designed for?

Does this template support collections?

Does this template work on mobile devices?

Does this template have a gallery limit?

Getting Set Up

The Site Builder

Color Schemes

Color Controls

Font Controls

FAQ

Who is this template designed for?

Sonnet is primarily for photographers who do long-form storytelling. Their images tend to be grouped into galleries by place and event rather than a general theme. They also tend to use gallery description text to explain the contents of the gallery.

Does this template support collections?

Sonnet does not currently support collections.

Does this template work on mobile devices?

Yes. The template was designed and built for mobile first.

Does this template have a gallery limit?

No. Currently this template does not have a limit for the number of galleries you can include.

Getting Set Up

Introductory Page

Sonnet includes an introductory page, the purpose of which is to act as an introduction to your site and your brand. The page consists of a cover image, logo, nav icon, and down arrow. For your cover image, we suggest you use an eye-catching image that you feel is well-representative of your work and you.

Logo

In this template, your logo will appear on top of an image in two places:

1. The Introductory page (see above image)

2. The Contact page

Your logo exists on all pages, including the navigation, with the exception of the Portfolio Stories.

If you opt to upload an image logo, you will want to make sure it is a transparent png. Regardless of if you choose a text logo or an image, you will want to choose a logo color (in the Site Builder, this is your Brand color) that works well on top of your chosen cover images for those pages (or conversely, you will want to choose cover images that contrast your logo color). We also recommend using cover images that provide ample negative space around the logo to ensure legibility and visibility.

Contact Info

In addition to the contact page, you may also add your contact information prominently in the navigation.

Cover Images

Cover images appear in three places:

1. The Introductory Page

2. The About Page

3. Portfolio Stories / Galleries

Cover images are cropped as different screen sizes and devices scale accordingly, so we advise you to use the Focal Point Selection tool to ensure the most important parts of your photographs are visible at all times and on all devices. All pages have iconography on top of the images, including the “nav” icon (on all pages) and the right and left arrows (on the Portfolio Stories). To ensure legibility and visibility, the iconography has a background color (in the Site Builder, this is your Header color).

To edit the cover image or focal point:

1. On the Introductory Page - The Site Builder

Cover image: in the Site Builder on the Introductory Page, click the “edit” icon labelled “Background Image” in the middle of the screen. Click the “edit” icon under “Image” and choose your image.

Focal point: in the Site Builder on the Introductory Page, click the “edit” icon labeled “Background Image” in the middle of the screen. Click the “focal point selection” icon under “Image.”

To navigate back to the Introductory Page, click on the logo on any page or in the nav.

2. On the About Page - The Site Builder

Cover image: in the Site Builder on the About Page, click the “edit” icon labelled “Background Image” at the top of the screen. Click the “edit” icon under “Image” and choose your image.

Focal point: in the Site Builder on the About Page, click the “edit” icon labeled “Background Image” at the top of the screen. Click the “focal point selection” icon under “Image.”

3. Portfolio Stories / Galleries - The Image Browser & Site Builder

Cover image: in the Image Browser, change the cover image of the gallery.

Focal point: in the Site Builder, click on the nav icon on your site -- click on “Featured Work” edit icon -- click on the “focal point selection” icon.

Portfolio Stories

In Sonnet, a "story" is a gallery you have chosen to feature in your portfolio. Each story includes:

1. A title

Your gallery name as set from within the Image Browser.

2. A description

Descriptions smaller than 400 characters appear in a single line. Descriptions larger than 400 characters appear in two columns. You can change your description text in the right pane of your Image Browser.

3. Social sharing tools

Gallery-level social sharing is enabled and cannot be turned off.

4. A series of portfolio images with three viewing sizes:

Small Image View

This is the default image viewing setting for all Portfolio Stories and is connoted by the Small Image View Icon. You cannot change the default setting. This view does not include any meta data or controls. Clicking on an image switches your view to Large Image View and changes the view icon to the Large Image View Icon.

Large Image View

This view can include the following (which can all be turned on/off in the Site Builder):

Social sharing (OFF by default)
Link to Archive view of image (OFF by default)
Image name (ON by default)

Images are ordered in such a way to ensure that on all devices, the entire image is visible. This means depending on the device, a photo in this view might be on its own, with one other photo or with two other photos. Clicking on an image in this view switches your view to Single Image Slideshow View.

To edit the above controls, make sure you are in Large Image View and click on the “Image Thumbnails” edit icon on the top left corner of your top photo.

Single Image Slideshow view

This view brings you to our HTML5 slideshow, which is built into the Sonnet template. It includes the two sets of options (which can all be turned on/off in the Site Builder):

Image Viewer settings

Image count
Gallery name
Info pane
Auto advance images (on by default)

To edit the above controls, make sure you are in Single Image Slideshow View and click on the “Image Viewer” edit icon on top of your photo.

Image Display settings

Image framing (fit or fill)
Transition between images
Time per slide

To edit the above controls, make sure you are in Single Image Slideshow View and click on the “Image Display” edit icon on the left side of the page.

The order of the Portfolio Stories can be edited in the Site Builder. Click the nav icon and then click the “Featured Work Settings” icon. You may then drag and drop to reorder.

Please note that we recommend you place vertical images next to one another in the Image Browser to decrease title and caption truncation.

To change the order of your images, go to the Image Browser and select “Custom Sort.” More on how to sort your images can be found here.

This will also help to ensure a “two-up,” vertical diptychs layout.

The Site Builder

Color Schemes

Classic Light (for dark images):

Light background. Best for dark to medium range images as the Brand is light.

Classic Light (for light images):

Light background. Best for light to medium range images as the Brand is dark.

Classic Dark (for dark images):

Dark background. Best for dark to medium range images as the Brand is light.

Classic Dark (for light images):

Dark background. Best for light to medium range images as the Brand is dark.

Color Controls

Background:

Background of all pages

Header:

Color (semi-transparent) of the header of your Portfolio Stories as you scroll down.

Also color of the background behind iconography.

Brand (e.g. logo):

Color of site name and iconography on top of images.

Text (navigation):

Text in navigation

Text (body):

Text in all places outside of the navigation, including: Portfolio Stories titles and descriptions, About, Contact, Video, Blog, Instagram, etc. header and body text.