About Responsive Templates
What are responsive templates?
Our responsive, HTML5 templates allow you to show off your work beautifully on nearly any screen size or device. They integrate with all of PhotoShelter’s business tools, and connect seamlessly with third-party platforms, including video and blogs. Our responsive website platform itself is built on an API that will allow us more flexibility and efficiency in delivering new features, designs and technology updates.
Can I manually customize the site using HTML/CSS?
There are no plans for a full manual mode (similar to the classic PhotoShelter websites) at this time. However, we will be making our API publicly available in the coming months, allowing more flexibility for full custom solutions.
Are responsive sites optimized for all mobile devices?
Responsive websites feature images that will display at the automatically detected, most appropriate size for the visitor’s screen. Currently, the sites and images render the best on desktop, laptop and tablet devices. Further updates are planned to the platform to make the websites themselves even more compatible with smartphones like the iPhone and Android.
Are these sites optimized for search engines (SEO)?
Yes. The sites have been carefully designed to adhere to emerging best practices for search engines -- without compromising on visuals. Furthermore, responsive sites are linked directly to your Archive site, where the most indexable content -- IPTC metadata, gallery descriptions, dynamic page titles, custom text, etc. -- is visible to search engine crawlers. We have a team of experts closely monitoring the ever-changing SEO standards, and we'll continue to do our best to make sure responsive sites remain technologically forward yet optimized for search traffic.
Always remember that the most important SEO influencer tends to be “off-page factors,” such as backlinks to your site from other sources. Put simply: The more that people feel it’s worth linking to your site, the more a search engine trusts that there’s good content there. More on this topic can be found in PhotoShelter’s free guide, SEO for Photographers.
How do my clients download and purchase images?
With all of our responsive templates, the navigation beneath, above, or beside the enlarged versions of your priced images (depending on the template you are using) will include a Buy/License button. Alternatively, your site visitors may click the “Archive” link in your site’s navigation (if you've chosen to include it) and select the image they wish to purchase or download. (Or, from the single-image view within the portfolio, they can click on the “Information” button [again, if you've chosen to include this]. This will also take them to the Archive area of your site.)
We support the current and one previous major versions of the following browsers:
Google Chrome (recommended)
Mozilla Firefox (recommended)
We also support Internet Explorer, version 11 only. This is in line with Microsoft, who has dropped support for earlier versions.
The responsive website platform is designed to take advantage of features found in the most recent versions of popular web browsers. This commitment helps to ensure that our platform and the services we provide remain fast, reliable and secure.
In general, we recommend the latest stable version of Google Chrome or Mozilla Firefox. PhotoShelter may not work as expected when used with an unsupported or old browser, including Internet Explorer 9 or earlier.
Any visits to your responsive portfolio from an unsupported browser will redirect to your Archive (“All Galleries”), which functions more reliably with older web browser versions.
Have important clients or significant traffic using Internet Explorer 8 or 9? Be aware of potential compatibility issues with your responsive site, and be sure to test it yourself before a big shoot.
Basic Site Setup
How do I edit my responsive site?
You will use the Site Builder to edit your portfolio and preview the changes live. When the Site Builder is engaged, it appears positioned to the left of your live site (but is visible only to you). Using the Site Builder controls, you can customize your site according to your preferences, and you may click Save to publish what you like as you go along. To edit a specific website element, click on the blue pencil icon that appears over it in your site preview.
To start, click Website from within your account’s Admin Area. Then, click the “Enter Site Builder” button, which will launch your website with the Site Builder open and ready for customization.
Can I edit colors/fonts?
Yes indeed! The Site Builder offers controls for both Colors and Fonts, through which you may customize the look and feel of your site. Start by choosing from color and font presets, and then change individual site colors or fonts to enter Custom mode. From Custom mode, you’ll have access to additional colors and fonts that aren’t included in the list of presets.
Color and Font controls are viewable from the Site Builder in its default state. Please note that if you have clicked a pencil icon on the right to edit that specific site element, you’ll need to save those changes before being able to access your Colors and Fonts controls again.
Use the drop-down menu to choose from pre-built color schemes. To further customize, you may click on the color for each section to make your own desired choices.
How do I set up my portfolio?
By default, your portfolio will be populated with your Image Browser’s most recently updated public galleries. To feature additional galleries and/or collections, click the blue pencil icon labeled “Featured Work” or “Featured Galleries” (you’ll see this text when you hover over the icon).
Here you may stick with featuring your most recently updated galleries, or you may switch to feature specific galleries/collections you choose. If you'd like to feature your recently updated work, but you wish to create a new gallery to feature, you may click the "+ Gallery" button. You'll then be able to name your new gallery, and add images to it directly from the Site Builder.
If you'd rather feature specific work here, choose “Specific galleries/collections” from the drop-down. The "+ Galleries/Collections" button you'll then see will allow you to either create and upload to new galleries, or choose work from your Image Browser.
NOTE: If you create a new gallery here, by default that gallery will be featured and public (meaning it’ll have a visibility of “Everyone” and will be listed on your website). These settings may later be edited from your Image Browser as needed. Additionally, any images uploaded via the Site Builder will be automatically marked as “publicly searchable." You may adjust this setting from your Image Browser, as well, where you may also make additional changes like assign pricing profiles, edit metadata, hide certain images entirely, etc.
If you choose to feature galleries or collections that already exist in your Image Browser, you may choose from your “Listed on Website” or "Unlisted on Website” sections, provided that the gallery's visibility is set to Everyone.
The galleries you feature will show a gear icon upon hover. This icon will allow you to do things like remove the gallery from your featured list, rename the gallery, or upload more images into it. (Learn more about what "Focal Point" means in the 'Editing your Images' section below the heading - Am I able to control the way my images are cropped on the site?)
Featured galleries/collections may also be reordered here using simple drag and drop.
Click to the left of the gallery/collection titles and drag and drop them to create whatever order you choose.
Can I feature collections in my portfolio?
Currently, only the Marquee and Element templates allow for the featuring of collections (meaning groups of galleries and/or other collections nested under one root heading).
With Marquee, if you choose to include a collection as a featured portfolio item, your site visitors will be able to click on the collection’s name to view the galleries within in filmstrip format.
Galleries that live in featured collections are displayed as filmstrips. These particular filmstrips are the galleries housed in this photographer’s “Wildlife" collection.
With Element, your collections will be listed in your left-hand navigation for quick and easy access to your nested content.
The “Music” collection expands right inside the navigation so visitors can view the nested content straight away.
Can I upload a logo?
Yes; however, that logo must be stored within your Image Browser first. Get a step-by-step overview here.
You may also see our detailed documentation on logo sizing and display.
Can I add social media "follow" buttons?
You sure can! The Site Builder offers a built-in icon generator that allows you to display social follow icons such as Twitter, Facebook, Instagram, etc. without any coding required.
Please see our detailed documentation on adding your social follow icons, including where they will display per template, and where to find the proper info for each social media site, here.
How do I return to my Admin Area?
The “Admin Bar”, which lives at the top of your portfolio editing page (see below image), will allow you to toggle between the Edit Mode and Admin Area of your account (where you’ll find the Image Browser, your Archive, Image Delivery tools and other Account features). This will only display to you when you are logged in -- never to your site's visitors.
How do I push my site live?
Though the Site Builder’s live preview feature allows you to see the edits you make to your site prior to saving them, the site itself is live from the moment you opt into the new platform, so there is no need to publish any content after making your edits. Just Save and either exit to the Admin Area of your account or log out.
I’m trying to edit the pages under my “Archive” menu, but the Site Builder keeps disappearing. Why?
Currently you may only live-edit the portfolio pages of your website. All of the pages in your Archive area -- your list of galleries/collections, individual images with client-facing tools present, the search page, shopping cart, and client area -- will be editable from the back-end of your PhotoShelter account. Further, you must also edit much of the image-specific information, like custom sorts, metadata, etc., from within your Image Browser.
Why aren't all of my settings preserved when I switch my responsive template from one design to another?
Responsive template settings are independent of one another - so your settings in Promenade are not related to the ones in Element, etc. The plus of this is that each of your template setups are "frozen" and saved if you switch back and forth between templates, so going back to an old template will restore the exact settings you last had there. The obvious downside is the first time you try a template you have to set each it up from scratch.
Editing Your Images
How do I edit the order of the images on my site?
The order of images within a gallery on your responsive site is dictated by the order you select for that gallery from within your Image Browser. There you can choose to order images by name, date modified, date created -- you may even custom sort. Much more on that here.
Am I able to control the way my images are cropped on the site?
Currently, there are two circumstances under which you may experience cropping of your images:
1. You are using a template that showcases a “full-bleed” image presentation: Sonnet, Marquee, Downtown, or Promenade.
Because the sites were responsively designed, meaning they scale to properly fit and work with whatever screen size or device a viewer may be using, any page showcasing a full-bleed image will crop accordingly. However, you may define what you feel to be the “focal point” of the image so that the crop will take place around that point (instead of just cropping around the center of the image by default).
Click the area of the image on which you would like the crop to focus, and click save.
You may access our Focal Point tool as follows:
The Sonnet template allows for full-bleed images in a number of places. Please see our detailed help article on Sonnet for more information on how to access and use the Focal Point tool with this design.
Click the blue pencil icon labeled “Featured Work” (you’ll see this text when you hover over the icon). The Site Builder will allow you to feature your most recently updated galleries/collections by default, or you may specify the work you wish to feature by choosing galleries/collections from your Image Browser. Either way, your featured selections will be displayed in a list. Just hover your mouse over over the desired gallery/collection, and a target icon will appear. This icon allows you to edit the focal point of that gallery or collection’s cover image.
Downtown & Promenade
Click the blue pencil icon labeled “Portfolio Cover” (you’ll see this text when you hover over the icon). The Site Builder will allow you to feature the cover images from your most recently updated galleries by default, or you may specify images to feature by choosing them from your Image Browser. Either way, your selections will be displayed in a list. Just hover your mouse over the desired selection, and a target icon will appear. This icon allows you to edit the focal point of that image.
Please note that even if you do choose to define your desired focal point using this tool, we still advise using landscape-oriented images only for the Marquee, Promenade, Downtown or Sonnet full-bleed presentations. You will also want to make sure the images you choose to display full-bleed do not have a lot of detail around the edges.
2. The image thumbnails on the Archive side of your site are set to "Fill".
If your gallery/collection cover images or individual image thumbnails are set to "Fill (crop to fixed size)" from the Archive Page Settings area of your account, they will display in a square format, which means some detail may be cropped out of the frame. You may change this setting to "Fit (do not crop)" if you would rather see your thumbs display in a more natural aspect ratio/orientation.
An example of a "Fill" thumbnail and a "Fit" thumbnail side by side.
What’s the difference between the “portfolio” view and the “more info” view of a single image?
Once a site visitor clicks “more info” on a single image within your portfolio, they are led to the “Archive” area of your site. This is where all of the client facing tools (e.g. purchasing, download options, etc.) and image details live, allowing your portfolio view to remain as uncluttered and streamlined as possible. The “more info” option is visible by default with all but the Sonnet template, where you must specifically choose to enable the feature. More on Sonnet can be found here.
How large do my images need to be for a full-bleed presentation?
For optimal image quality, we recommend you upload your original files (suggested minimum of 1440px on the image's longest side). No matter which template you choose, the design will handle the downscaling for you.
Editing Your Site’s Navigation
Can I add more pages to my site’s navigation?
Yes, you may create an unlimited number of new and totally custom pages, links or menus to display in your site’s navigation. Just click the blue pencil icon that sits atop your site’s navigation bar. The Site Builder will present you with an “Add to Navigation” option, which will allow you to choose whether you wish to create a new page, a new link, or a new menu for your nav.
If choosing to create a new custom page, you’ll see the following popup:
Can I create “drop down” menus for my navigation?
Yes, you may “nest” links under a particular item in your navigation’s menu. When choosing to create a new menu, you’ll see the following popup:
In this example, we've named the menu "Multimedia."
You may then choose to “nest” other pages or links underneath your menu to create the dropdown effect. From the Site Builder, just drag the nav items you wish to nest into the menu, and you’ll see you can drop them there to create nested content.
Can I create links to my social media pages?
Absolutely. You may choose to do this instead of using our social follow icons, or in addition to -- whatever suits your preferences. Just click the blue pencil icon that sits atop your site’s navigation bar. The Site Builder will present you with an “Add to Navigation” option, which will allow you to choose whether you wish to create a new page, a new link, or a new menu for your nav.
Here you will want to select the “Link” option, which will present you with the following popup:
In the “Link URL” field, you would just place the direct link to your Facebook profile, your Twitter page, or wherever else you may be looking to direct your site’s visitors.
How can I edit the Archive navigation menu?
Currently this pre-created menu, which leads your site’s visitors to your full image library, shopping cart, client area, etc., is not editable. However, you may choose to hide it altogether, and create a new menu for any of the pages nested here you may still want to link to.
For example, if you only want the Archive menu to link to your full list of galleries and the search page, but maybe not the shopping cart or client area of the site, here’s what you would do:
Navigate to both your gallery list and search pages. Copy and save the links to those pages, as you’ll need them later.
While in Edit Mode, click on the pencil icon to edit your site’s nav. Then, click the “Add to Navigation” option, and choose to create a new menu. You may label this menu Archive, or call it whatever you like.
Click the “Add to Navigation” option again, and this time choose to create a new link. When you do this, you will be asked for the Link URL, as well as the Navigation Label. Using our example, place the URL for your gallery list page, which you’d copied and saved earlier, into the URL field, and label the page however you like (e.g., “All Galleries”). Create another new link for your search page.
Drag the new links into the new menu you created in step 2, so they are nested beneath that menu.
Drag your old, precreated Archive menu into the “Hidden Navigation Items” area.
Save your work, and you’ll be all set!
How do I change the order of the links in my navigation?
Click the blue pencil icon that sits atop your site’s navigation bar. From the Site Builder, you may drag and drop your navigation items into whatever order you choose. Before exiting, make sure you click Save.
Customizing Your Pages
How can I customize my About page?
While in Edit Mode, click on “About” in your site’s navigation. There, you’ll see the editable fields for that particular page, indicated by the blue pencil icons. The About page fields will vary by template, but may include customizable text (via a text editor), an About page “portrait”, or a background image for the page.
The text editor will allow you to add copy directly to your About page.
To add an About page portrait, click the pencil icon labeled “Image” (upon hover). The Site Builder will allow you to choose the image from within your Image Browser. Just hover your mouse over the text “None selected”. A pencil icon will appear, which when clicked, will bring up a pop-up allowing you to locate the image from either the Listed or Unlisted sections of your Image Browser. Before exiting, be sure to click Save.
An already configured About page using the Marquee template, with all editable fields still present.
Is the Contact page customizable?
Yes, though the customization options may vary by template. To edit your Contact page, click on “Contact” in your site’s navigation while in Edit Mode. There, you’ll see the editable fields for that particular page, indicated by the blue pencil icons. You may have the option to add custom text to the page, alter the “submit” button for the contact form, etc.
Can I upload video to my site?
While you cannot upload and host videos in your PhotoShelter archive, you may display and play videos directly on your site via our Vimeo integration. Learn more.
How can I integrate my blog?
If you have a blog with either WordPress or Tumblr, you may pull that content directly into your portfolio site’s design via our direct integration. Learn more.
How does the Instagram integration work?
Similar to our Vimeo and blog integrations, you may pull your Instagram feed directly into your PhotoShelter site via our Instagram integration. Learn more.
Switching from Classic (Legacy) to the New Platform
How do I switch my current website design to one of the new responsive templates?
Simply log into your account, and click on Website in the top navigation. Under Design & Customize, you’ll see a banner above the list of classic templates (see below). Click on that banner, then click the "Join Now" button, and you’re all set.
Do I have to switch?
No. You may continue to use any of our Classic templates and/or maintain any customization that you’ve made to your site. No changes to your existing workflow or design are necessary.
I don’t want to switch yet. What does that mean for my current site?
Nothing. Your existing site will be unaffected by the introduction of the new, separate responsive platform. There are no current plans to “retire” or make changes to the Classic websites that would remove any functionality you currently enjoy.
Do responsive sites work with my other PhotoShelter features?
Yes. The responsive websites integrate with all the other features in your PhotoShelter account; it’s simply a new way to show off your work in an online portfolio format. Visitors may click through from your portfolio to the “Archive” area of your site, where -- according to your preferences -- they may select, download, license or purchase images. You can also continue to store all your images behind the scenes and give clients discretionary, private access to view and download them.
How are responsive sites different from my Archive website?
Responsive websites are meant to showcases your work in a portfolio-style format -- essentially in the cleanest and simplest way possible. Your Archive website will continue to serve as the “workhorse” for your business, presenting your full list of galleries to viewers, as well as the lightbox, downloading tools, and shopping cart.
Can I keep my old site live while working on my responsive site?
No. A switch to the responsive platform replaces your old (“Classic”) site design with the default template, Marquee, which will apply to both the portfolio and archive sections of your site. All links from your Classic site will remain active -- the pages will simply have a different design.
Will I lose my Classic site/settings if I switch?
No, your Classic site will be preserved, and you may choose to switch back over to it at any time. However please note that any custom text you have added to your Classic site will not automatically transfer over to your new, responsive site when you switch. You will want to copy and save any About or custom page text so you can add it into your responsive site after switching. Again, if you move back to your Classic site, all previously configured settings and custom text will still be there.
How will switching my classic site to a responsive site affect my search engine optimization (SEO)?
Switching your existing PhotoShelter site to the responsive platform should not materially affect your SEO. All links to your Classic site will still work, and any image- or gallery-level information that you've made public (e.g. IPTC metadata, gallery descriptions, etc.) will remain unchanged. Essentially, search engines will simply have new content to discover on your portfolio site.
One note on switching: Any custom page titles and meta descriptions that you've set on your Classic site (e.g. your About, Contact, and custom pages) will not automatically transfer to those pages on your responsive portfolio. Responsive sites are built on an entirely new platform, which means that your (non-image) content pages will need to be re-made within the new environment. This in mind, we suggest that before you switch, you copy the custom SEO data you've set (along with any page content), paste that into a separate document, and then re-paste it into your new responsive pages after switching.
Again, it's important to remember that while a search engine-friendly site design is hugely important, the single most important SEO factor comes from backlinks -- other sites linking to you, effectively “voting” for the quality of your content.