New PF photofolio logo 200



Scroll down  or press the menu icon    on the left 


Watch this video to get a basic overview of the Design X system

[watch fullscreen to see all the detail]

NOTE: We no longer have an Update CDN button.

Image Prep

Learn how to prepare images for your site

Your website resizes images on-the-fly, so they will fit any size screen, which is super exciting, but means you must take a few special steps to prepare the images you upload.

1. Upload a large image (don’t worry we make smaller versions for mobile devices and ipads): Your ideal image size is 1860 x 1140 pixels for a horizontal (930 x 1140 for a vertical). No need to crop your image, just make one of those dimensions the biggest (i.e. 1860 x 1072 or 1700 x 1140).

2. Use “Save For Web” in Photoshop or the equivalent in lightroom “File –> Export”: You want the images in the 250 – 550 kb range (the less colors the easier it will be to get it lower), so use a lower quality setting to get it down there. When saving for web make sure you include a color profile and XMP so your caption and copyright remains.

This video will help you with image resizing:

Watch this Video to see how to batch resize all your images at once:

3. Name your images properly: Avoid using anything but letters, numbers, underscores and dashes (and only one period before the jpg) when naming your images. Each image must have a unique name.

Video Prep

Learn how to prepare video for your site

You have two options when it comes to adding video to your website:

+ - I don't want to fuss with encoding my videos for streaming online.

No problem. Go get yourself a Vimeo account (pro account if you want HD streaming) and upload them there. Leave the encoding to Vimeo. Here’s how you embed Vimeo videos on your site:

1.) Go to your Vimeo page. Make sure the settings for your video allow it to be viewed by the public, or setup so that it will only play on your domain name.

2.) Copy the numerical ID number that you see after the “” in your address bar of your browser (it’s different for each vimeo video you have)

3.) Login to your APhotoFolio account and click MEDIA LIBRARY

4.) Click (+ VIMEO) and give your vimeo video a “Title”. Then paste the numerical ID # that you copied, into the “Vimeo ID” field.

5.) In the “Custom Thumbnail” field, click the (+ ADD) button to upload a .jpg image as the placeholder thumbnail for the vimeo video. (we recommend uploading custom thumbnail images that are 1860 x 1140 pixels in .JPG format)

6.) Click DONE to save the new video addition to your MEDIA LIBRARY and repeat the process for any additional videos you have.

7.) Drag-and-drop the video to assign it to a menu title in your WEBSITE MENU column, just like you would with any images.

+ - I want to encode them myself for online streaming. I want to control all the settings.

Awesome. Are you sure? Encoding for streaming is not the same as playing a video on your desktop. If your answer is yes, well that’s great, here are the requirements:

First, if you can get your hands on Quicktime Pro, it’s the easiest and simplest method to encode a video. If you have experience with more advanced editing programs by-all-means use those.

Video Size: I recommend 640 pixels wide to accommodate all sizes of screens and devices, but there’s nothing to stop you from rocking 1280 × 720 pixels (720p) or 1920 × 1080 pixels (1080i/1080p).

Streaming Rate: 800 – 3000 kbits/sec is the recommended data rate and keep in mind the higher you go the better quality the video but the slower the playback will be. Of course it all depends on the viewers connection speed.

Audio: AAC, 44.100 or 48.000 kHz and 128 or 144 or 160 kbps.

Format: The video should be exported as mp4 and MUST have h.264 compression enabled (optimized for streaming natch). Only mp4 is accepted by all browsers and devices.

Streaming: Make sure you “Enable Streaming” and “Optimize for server” on the streaming tab.

 Video size is capped at 250MB for each video (for server performance reasons). If you need more space contact support.

If you are using Final Cut Pro and Compressor there an excellent article about encoding (here).

Additional Topics

Admin – Account

Learn about the ACCOUNT tab in your website admin

[watch fullscreen to see all the detail]

NEW under ACCOUNT –> SITE DISPLAY: Enable Cookie Banner (EU Cookie Law). Turning this ON will place a banner on the bottom of your website with the following message: “We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies. Learn more.” There is an x-out on the banner for people to remove it and it is only shown once to new visitors. This is compliant with new European Cookie Law.

NEW under ACCOUNT –> SOCIAL: Enable Pinterest Extension. Turning this ON allows pinning your images on Pinterest when a visitors browser has the pinterest extension. A Pin It button will appear on top of the image.

Admin – Designs

[watch fullscreen to see all the detail]

You can see examples of all the pre-configured designs here:

Admin – Media Library

Learn about the MEDIA LIBARARY tab in your website admin

Our admin currently does not support Wacom Tablets. Please use a mouse.

[watch fullscreen to see all the detail]

NEW Feature: Caption Control. Watch this video to learn more.


To Opt-In to the beta release of Design X Version 12 and receive the Caption Controls do the following:

1. Log into your site admin
2. Launch the ACCOUNT panel
3. If you do not have the “Make Beta Updates” button visible under the NOTIFICATIONS tab FORCE an update.
4. A new button will appear that you turn ON to “Make Beta Updates Available”
5. FORCE an update again

Important Note: Pasting text from wordprocessing programs (e.g. Word and Pages) can cause bad characters to appear on your text pages. Either save as plain text and then paste or input by hand. Here’s how: open the document in Word,  do a “select all” (ctrl+A),  “copy” (ctrl+C),  PC: open Notepad (found in Start > All Programs > Accessories) MAC: open TextEdit (found in applications), “paste” (ctrl+V) the content into Notepad/TextEdit, save the file, open again, copy and paste into your website. 
Important Note #2: At this time there are a few characters that cannot be used to name menu items. The following characters will cause the menu item to not work if used in the name / \ , ” < # % 

Additional Advanced Topics

Admin – Layout

Learn about the LAYOUT tab in your website admin

[watch fullscreen to see all the detail]

NEW Feature: Caption Control. Watch this video to learn more.


To Opt-In to the beta release of Design X Version 12 and receive the Caption Controls do the following:

1. Log into your site admin
2. Launch the ACCOUNT panel
4. Update!

We recently introduced two new settings to better control the Menu on tablets and mobile. The Background Width Tablet will allow you to change the width of the tablet menu and the Background Transparency Mobile/Tablet sets the transparency of the menu for both Tablet and Mobile devices.


Admin – Navbar

Learn about the NAVBAR tab in your website admin

[watch fullscreen to see all the detail]

This video is NEW as of 1/1/2015.

Admin – PDF Builder

Learn about the PDF BUILDER tab in your website admin

[watch fullscreen to see all the detail]

iPad Portfolio App

Your Design X website comes with its own iPad app that allows you to sync your website to an iPad. (NOTE: iPad must be running ios 7 or later). Syncing downloads your menu with images, videos and text pages directly to the ipad so you can hand-out or mail iPads as portfolios (no internet connection required). All the downloaded work is editable so you can customize the experience for each client. NOTE: Hidden content is synced to the app which allows you to show work not available on your website.

Download the app to your ipad by searching for PhotoFolio Photo and Video Portfolio on your iPad or in iTunes or using this link:

  You need to now include www with your domain name when logging in. So, would be

[watch fullscreen to see all the detail]

  UPDATE (4/9/14): v2 of our app is in the iTunes store and we’ve made a couple really great improvements.

Custom Thumbs – All the custom thumbs you are using on your site for photos, videos, text pages and contact forms are now uploaded to the app.
Multimedia Swipe – You can now swipe between images, videos, text pages and contact forms. True multimedia support.

Note: As explained in the video to get a png logo to appear correctly (with knocked out background) on the ipad you must transfer it to your ipad by emailing it. If you sync using iphoto the png does not work. Email it to yourself and save it to photos on the ipad.

Note on Vimeo playback with no internet connection. Most people are using Vimeo on their website because of the excellent streaming and encoding. But, Vimeo videos will not playback on the ipad app if there’s no public wireless internet connection (Art Directors office). A very simple workaround is to upload a duplicate set of mp4 (design x video player) videos to the ipad app using hidden menu items. Hidden menu items upload to the ipad app so you can transfer content to the app without it being visible on your website. Once uploaded you can either remove the Vimeo videos or have them both for either situation.

Additional Topics

Learn about other additional topics for your website

Create A Custom Menu Bullet [go here]

Use Your Own Custom Icons On The Menu & Footer [go here]

Hosting & Linking to Your Own PDF in the Media Library [go here]

How To Float Your Top or Bottom Menu on Top of Your Image [go here]

Embed your blog inside your Photo Folio website [go here]

How To Create Index Thumbs In v10 of Design X [go here]

Fotomoto (image sales) Integration [go here]

Creating a logo for Retina displays [go here]

Creating custom logos for ipads and iphones [go here]

Submit your sitemap for SEO [go here]

Adding social media icons to your site (facebook, twitter, etc.) [go here]

Using HTML to style text pages [go here]

Guide to control email share and password box settings [go here]

How to make browser icons (favicon) [go here]

How to add tracking code other than Google Analytics [go here]

Moving your existing blog to your APF site [go here]

Activate Thumbs first option for galleries [go here]

How to make your images full bleed in the galleries [go here]


Learn how to improve the SEO of your website

Design X comes with powerful SEO options that we highly recommend you take advantage of. Here are the ways you can optimize your website for search engines.

+ - Browser Title & Description

When logged into the admin of your site select the ACCOUNT panel and SEO tab. Here you will find places to enter a Browser Title, Meta Description and Meta Keywords for your site. Browser Title and Meta Description are very important for SEO. 

+ - Use Global Browser Title

Under the SEO tab you will find a switch to turn on or off the global browser title. Here’s what each setting does.

OFF. Turning the Global Browser Title OFF allows you to set a unique title for each page of your site (powerful seo). But, to do this you must change the title for each and every one of your images (lots of work). The title you give to the image is used for the page title then the Browser Title is appended to that.

ON. Turning the Global Browser Title ON lets your site use the Browser Title you entered on every single page first then appends the gallery name and a number for the image. Still works great for SEO and not as much work.

+ - Advanced SEO

Turning the Advanced SEO: ON allows you to set a unique title for each page of your site (powerful seo). But, to do this you must change the title for each and every one of your images (lots of work). The title you give to the image is used for the page title and that’s it (NOTE: This is different than turning the Global Browser Title OFF because nothing is appended ).

Also note the browser title field (from above) is only used on the homepage of the site.

+ - Built-In Sitemap

The site comes with its own sitemap that you can submit to google so they can find all the pages on your site.. Follow this link to see how to do it. 

+ - Image Captions

To further enhance the SEO you should add captions to your images (you can leave the caption button off the navbar if you don’t want the public to see them). An image caption will help search engines understand what the image on the page is all about.

Please be patient and understand that getting good results from search engines can take time and lots of effort. Using social media, blogging and asking for links back to your site from places where your pictures appear will all add significant weight to what you are doing here. In many cases those things are more important. Finally, you should know that google places a lot of emphasis on how long a website has been around and the seo they’ve accumulated over the years. This is great if you are moving your site to our service as you will not lose SEO in the transition but bad if you are brand new and want to rank with established sites because it will take time.


Learn about Wordpress and other blogging options

We have partnered with the fine folks at Flywheel to provide blog hosting, maintenance, updates and support to all our Photo Folio customers for FREE.

To get started blogging or to move an existing blog please contact support:

If your blog is already moved to Flywheel you can contact their support team for any of your needs: