1. Add your video to a video gallery
2. Make a large image for the video thumbnail (1860 x 1140 or whatever the dimensions of your video)
3. Choose “upload thumbnail” for that video in the video bank and add the large image.
4. Goto the Images tab in the admin and the Upload Images page and upload the exact same thumbnail (this makes the thumbnail available to the site in all the sizes it needs).

Your ideal image size is 1860 x 1140 pixels for a spread (930 x 1140 for a single), but there’s no need to crop your images just match one of those numbers (This is the size of a 23-inch Apple Cinema HD Display minus 60 pixels for a site border). The site uses dynamic resizing so you can load any size image you want, just make sure you save for web in photoshop (quality of 40% seems to be nice), because large files take a long time to load and will bum out your clients (oh, and then everyone will start talkin’ about how slow the APF sites are).

Important note about naming: Your image names cannot have spaces or characters like this: å, é, ü, ö or symbols except dash and underscore.

THIS IS VERY IMPORTANT: You have the ability to load huge images on your site. Please make a conscious decision about this and realize that the bigger the image the slower it will load. Anything over 300-350kb is big and we strongly recommended using save for web at a quality of 40% and a width of no more than 1860 pixels. It’s your call so decide what’s best for you.

If you add a logo start with 320 x 74 pixels (or around that). Use a photoshop png file and knockout the background if you want only the logo to show up.

If you want to add pictures to text pages start with 300 x 215 pixels (or around that).

Your website comes with a slideshow on the landing page (after the intro but before someone clicks on a menu item). To activate simply load images in the extra files folder under the advanced tab (you can also use FTP to do this. Put them in httpdocs–>extra and make sure you save for web in photoshop so they’re not huge (100-350 kb max)). Make sure to name them 01, 02, 03… to force a display order. Speed of the show can be adjusted in the template settings.

There are two settings for the slideshow that can be found in the template settings. Normal will give you a slideshow that fits within the picture box and full will give you a slideshow that fills the browser window.

You can also have a single image or logo display instead by loading a background image. Note: The sideshow only works when the background image is unselected.

Template Settings For the new D1 -SoHo

NEW - Watch a video talking about all new template settings.
NEW- Check out this template settings map and download the pdf

Design 1 has a special feature that allows you to have large thumbs for video. Go here to learn how to make it happen.

Logo Properties

Horizontal Offset: Set the horizontal position of your logo.
Vertical Offset: Set the vertical position of your logo.
Logo Font Size (main): The font size of the logo on your homepage.
Letter Spacing: Determine the spacing between letters if you are using a text logo.
Transparency: 100 is solid and 0 is transparent. This effects the logo on the homepage.
Drop Shadow: Add a drop shadow to a logo if you like.
Blend Mode: The logo allows certain blend properties to occur between it and the image below. To learn more about the different blend properties go (here).
Logo Alignment: You can elect to anchor the logo on the top left, center or right of the page.
Logo Font Size (intro): The font size of the logo on the intro.

Image Properties

Top Margin: Set the space between the top of the window and the image.
Right Margin: Set the space between the right of the window and the image.
Bottom Margin: Set the space between the bottom of the window and the image.
Left Margin: Set the space between the left of the window and the image.
Scale Type: If you set the scale to full the image will always fill the image space. This means cropping in most cases. If you set the scale to normal the image will not crop and any extra space will show the background color.
Image Transition: Select a transition type for advancing the image.
Transition Duration: Set a duration for how fast the transition takes place.
Cursor Blend Mode: The cursor navigation allows certain blend properties to occur between it and the image below. To learn more about the different blend properties go (here).
Cursor Icon Style: Choose between 4 different styles for the mouse navigation indicators.
Vertical Image Alignment: Determine the anchor point for your image scaling here (e.g. Top will cause the images to scale from the top down, Center will cause them to scale from the center, up and down).
Peripheral Image Transparency: Use this to adjust the transparency of the previous and next images. 0 is solid and 100 is transparent.
Intro Scale Type: If you have a swf (flash) intro, use this to make it full screen.

Page Properties

Top Margin: Set the top margin for page text.
Right Margin: Set the right margin for page text.
Bottom Margin: Set the bottom margin for page text.
Left Margin: Set the left margin for page text.
Page Text Font Size: Set the font size for page text here.
Show Page Titles: Pages have titles on them that match the name on the menu. You can turn this off here.
Page Title Font Size: Set the font size for page titles.
Scrollbar Alignment: When you have more text than will fit on the page a scrollbar appears. You can have it appear on the left or the right of the text.
Scrollbar Horizontal Offset: Adjust the positioning of the scrollbar here.
Scrollbar Vertical Offset: Adjust the vertical position of the scrollbar here.
Scrollbar Width: Set the width of the scrollbar.
Scrollbar Transparency: Set the transparency for the scrollbar here (100 is solid).
Page Margin Scale Type: Choose pixel based to pad (margin settings above) the pages by pixels, choose percentage based to pad the page text by percentage (margin numbers must be between 0 and 100 for percentage based).

Menu Properties

Menu Font Size: Font size for the menu items (categories).
Sub Menu Font Size: Font size for the sub menu items (galleries).
Menu Background Transparency: Set the transparency for the menu color (0 is transparent 100 is solid).
Menu Width: Set the width for the menu. Note: allow enough space for the category, gallery and page names.
Vertical Menu Text Alignment: Allows you to anchor the menu items on the Top, Middle or Bottom of menu bar.
Horizontal Menu Text Alignment: Allows you to justify the menu text Left, Center or Right.
Vertical Menu Text Padding: Allows you to add space to the top of the menu to move the text down.
Horizontal Menu Text Padding: Allows you to add space to the left of the menu to move the text right.
Menu Item Bullet Type: There are several types of bullets available to help people know where they are in the menu.
Vertical Bullet Offset: You can adjust the alignment of the bullet here. Different fonts cause the bullet to misalign.
Category Menu Item Gap: Adjust the gap between categories here.
Gallery Menu Item Gap: Adjust the gap between the galleries here.
Leading Gallery Menu Item Spacer: Adjust the gap between the Category and the first gallery that appears under it (if you have galleries dropping down).
Trailing Gallery Menu Item Spacer: Adjust the gap between the last gallery under a category and the next item on the menu (if you have galleries dropping down).
Horizontal Menu Offset: You can move the menu closer or further away from the images.
Gallery Indent: When the galleries drop down under the category you can have them indent by adjusting this setting.
Category Config: Allows you to place video categories/galleries above image categories/galleries on the menu (select videos-images to do this).
Category Underline Transparency: Categories can have lines under them. Adjust the transparency to make them visible (zero is transparent).
Menu Letter Spacing: Use this to create more space between letters on your menu item text.

Thumbnail Properties

Preview Thumb Size: While the images/videos load in a gallery a preview thumb is shown first. Choose between small, medium, large and full sized previews.
Thumbnail Background Transparency: You can have the thumbnail transparent (0) or you can make it solid (100) plus any setting in between.

Slideshow Properties

Slideshow Scale Type: If you select full images will bleed to the edge of the browser window (this will crop them to fit the window as well).
Slideshow Speed: Set the speed that the images change on the homepage slideshow. Note: Speed is limited by they load time of the image.
Randomize Slideshow: If set to true, when a client visits your site they will see a different image each time.

Video Properties

Auto Play: If set to true videos will play automatically when a client visits the video gallery.
Video Fullscreen: If set to true videos will start fullscreen otherwise videos will play normal size.
Vimeo Width: Set the width of any embedded Vimeo videos.
Vimeo Height: Set the height of any embedded Vimeo videos.
Play Icon Transparency: Set the transparency of the play icon on top of the thumbnail (100 is solid).
Auto Advance: Set this to true and the next video will start playing automatically after each video finishes.
Thumbnail Icon Size: Video thumbs have a play button icon. Use this setting to make it large, medium, small or none.
Video Smoothing: Use this to turn off automatic video smoothing.

Contact Properties

Contact Page Name: If you use the contact form this is where you set the name. Note: If you are NOT using the contact form make sure you give it a different name than the page you have your contact information on (e.g. contact and contact form).
Bottom Contact Font Size: Set the font size for your contact information.
Bottom Contact Offset: Set the vertical position on the page of the contact information.
Contact Page Font Size: Set the font size for the information on the contact form if you are using one.
Bottom Contact Horizontal Offset: The bottom contact info is anchored to the edge of the image. You can move it further our or in with this setting.
Show Phone On The Contact Bar: Set to false if you want to prevent this information from appearing on the front of your site.
Show Email Address On The Contact Bar: Set to false if you want to prevent this information from appearing on the front of your site. Note: Very useful if you are using a contact form (email required for this) but don’t want your personal email to appear on the site.
Show Copyright On The Contact Bar: Set to false if you want to prevent this information from appearing on the front of your site.

Fullscreen Button

Fullscreen Button Icon Type: Fullscreen button can be indicated on the site with an icon, label or both.
Fullscreen Button Label: Type the label you want for fullscreen.
Fullscreen Tooltip: Type the information you want to appear when someone hovers over the fullscreen button with their mouse.
Normal Button Label: When in fullscreen mode this is the label people click to return to normal mode.
Normal Tooltip: Enter the information you want to appear when someone hovers over the normal button with their mouse (while in fullscreen mode).

Navbar Properties

Map Navbar Font To: Determine what font the nabar uses.
Navbar Font Size: Set the size of the navbar font.
Horizontal Navbar Offset: Set the horizontal position of the navbar.
Vertical Navbar Offset: Set the vertical position of the navbar.
Navbar Gap: You can set the gap between navbar items here.
Horizontal Navbar Icon Offset: Adjust the horizontal position of the navbar icon (some fonts cause the icon to not be lined up)
Vertical Navbar Icon Offset: Adjust the vertical position of the navbar icon.
Horizontal Navbar Anchor: The navbar can be anchored to the left of the image or the center.
Daisy Chain Galleries: False - When a viewer reaches the last picture in a gallery and then hits the next button it takes them to the beginning of the gallery. True- When a viewer reaches the last picture in a gallery and then hits the next button it takes them into the next gallery on your menu.
Persistent Captions: Forces captions on when someone visits your site.
Gallery Scrollbar Thickness: Set the thickness of the scrollbar for your galleries.
Gallery Scrollbar Vertical Offset: Adjust the vertical position of the scrollbar here.
Gallery Scrollbar Transparency: Set the transparency of the scrollbar (100 is solid).
Gallery Scrollbar Grip: Add optional grip marks to the scrollbar by setting this to true.
Gallery Scrollbar Tooltip Label: Add a tooltip to the scrollbar (shows up when you hover your mouse over the scrollbar).
Horizontal Scroll Swipe: Set this to true to allow two finger swiping of your galleries.
Swipe Cursor Type: Add a hand to the cursor to drag images left and right.

Loader Properties

Loader Type: Choose between 4 different image loading indicators. Spinner, Percent, Vertical Line, Horizontal Line and None.
Loader Anchor Point: Determine where the loader sits on the page.
Loader Horizontal Offset: Move the loader position from the anchor point horizontally.
Loader Vertical Offset: Move the loader position from the anchor point vertically.
Loader Font: Chose where the font is pulled from for the Percent loader.
Loader Font Size: Chose the font size for the Percent loader.
Loader Thickness: Chose the line thickness for the line loaders.
Loader Transparency: Chose the transparency for the loader.
Loader Blend Mode: Determine how the loader blends with the background. To learn more about the different blend properties go (here).
Align Loader To Image: When set to true the loader will center on the image. When set to false it will center on the whole site (menu included).

Caption Properties

Persistent Captions: Set to true if you want the captions to be always on.
Anchor Point: Determine where the captions are anchored on the page.
Caption Width: Set the width of the caption box.
Horizontal Offset: Move the caption horizontally from the anchor point.
Vertical Offset: Move the caption vertically from the anchor point.
Map Font To: Determine which font to use for the captions.
Font Size: Set the font size for the captions.
Caption Text Alignment: Change the justification for the caption text here.
Background Radius: Use this number to create rounded corners or not.
Background Transparency: Set the transparency for the background of the caption box (100 is solid).
Blend Mode: Determine how the loader blends with the background. To learn more about the different blend properties go (here).
Blank Box: This box allows you to transfer settings so that individual captions can behave differently. See the Image Captions page for more information (here).

Navbar Site Settings

Button Type: Choose what type of button you want. Note: you can drag and drop the buttons to reorder.
Button Label: Write some text for a button label to appear on the site.
Icon Type: Choose wether you want just an icon, just a label (using text above) or both.
Tooltip Label: If tooltip is on in template settings write the text that will appear when someone hovers their mouse over the button.

Here’s how you do it:

1. Create a new text page and call it whatever you want

2. Visit the vimeo page of the video you wish to embed.

3. Grab the url of the video

4. Put the following as the only text on the page you created:

vimeo:http://TheVideoUrlYouCopied

5. Visit your template settings page to adjust the width and height of the embed (Note: it will scale to fit the screen up to this limit).

Note: You can only have 1 vimeo video per page, so if you want a gallery of vimeo videos you need to create subpages with each video in a subpage. Make sure the parent page (Lecture in the example) is a redirect to the first video:

make sure the page title matches the URL exactly so if you have an Uppercase page title it needs to be uppercase in the link.

That’s it!

Note: Google changed the access to the email settings. Click the gear icon to find the email settings:

Configuration instructions for different email clients and devices can be found here:

For IMAP

For POP

If you are having problems sending or receiving emails try these troubleshooting guides:

Receiving Email Problems

Sending Email Problems

Finally, you will want to setup email for your computers and phones. Go here to do that >>>>

Note: Keep in mind you can always access your email online by going to: http://gmail.com

If you need to move your blog go here to learn how to do it >>>>

If you are ready to point your domain to our servers here’s what you need to do. Visit the place where you bought your domain name and either log into the account and change the DNS (domain name servers) yourself or contact customer support and ask them to change them for you. Here’s what they need to be changed to:

ns.rackspace.com
ns2.rackspace.com

Watch this video to see how to change your dns settings yourself:

Note: It can take 24 hours for the new site to be visible around the globe because the internet will have your old website location cached.

If you are using your own email provider you are done.

If you are using Google Apps you have several more steps. Go here to complete them >>>>

Go here to setup email and create your google apps admin account.
Important Update: Google no longer offers free email. They now charge $50/year per user. Contact support to find out how we’re addressing this unfortunate change in their email service.

Move to the next step: pointing your domain to our servers>>>>

Note: We do not provide email because it would be impossible to offer POP and IMAP plus 10 mailboxes with 7GB of space for free like google does. We’ve thoroughly tested their service and our customers love using it.

After you have your MX Records submit a support ticket letting us know to change them because you will be keeping email where it is. After this is done you will want to wait 4 hours before you move to the next step: pointing your domain to our servers >>>>

Note: If you’re using Livebooks or another website provider for your email this is not possible.

If you’d rather use google apps click here>>>

1. Keep your email where it is. Click here >>>>

2. Use google apps for email. Click here >>>>

1. Setting up your email so there is no disruption of email service.

2. Pointing your domain name (e.g. http://robhaggart.com) to our servers so your new site becomes visible to the world.

If you are ready to make your site “live” move on to Step 1 >>>>

Important: Taking your site live on Friday afternoon is generally not a good idea. If problems arise over the weekend our response time will be delayed and you could be without email for several days.

Once your site is live you might want to add our free PDF Creator:
apfmanual.com/pdf-creator
download our free iPad App:
apfmanual.com/ipad-app
or add the free Facebook app:
facebook.aphotofolio.com

Also, to be included on our list of clients: live.aphotofolio.com
you can submit your “live” url to live@aphotofolio.com