Responsive Templates: Sonnet Template FAQ and General Information

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

Introductory Page

Logo

Contact Info

Cover Images

Portfolio Stories

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.

Sonnet-Template.jpg

 

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.

 

contactinfo.jpg

 

Cover Images

Cover images appear in three places:

1. The Introductory Page

2. The Contact 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 Contact Page - The Site Builder

  • Cover image: in the Site Builder on the Contact 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 Contact Page, click the “edit” icon labeled “Background Image” in the middle 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

sonnet-thumbs.jpg

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

smallimagesicon.png

 

  • Large Image View

sonnet-large.jpg

    • 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

sonnet-slideshow.jpg

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

 

imagebrowser.jpg

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.

 

twoupverticals.jpg

 

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.

header.jpg

 

  • Also color of the background behind iconography.

background.jpg

 

Brand (e.g. logo):

  • Color of site name and iconography on top of images.

sitenameandiconography.jpg

 

Text (navigation):

  • Text in navigation

nav.jpg

 

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.

contactpagetext.jpg

 

Links:

  • Links and hover state of social media on Large Image View

socialhover.jpg

 

Font Controls

Brand:

  • Logo

sitename.jpg

 

Headline:

  • Portfolio story title

portfoliotitle.jpg

 

  • Page headlines

contactpageheadline.jpg

 

Still have questions? Contact us.

Comments

Powered by Zendesk