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]
Learn how to prepare images for your site
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.
Learn how to prepare video for your site
You have two options when it comes to adding video to your website:
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 “https://vimeo.com/” 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.
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.
One More Step: Follow these instructions to encode your video for FireFox browsers (WebM)
1. Visit the WebM project website to see a list of encoders available for free or for purchase (here).
2. Re-encode your video to the WebM format so that the name is exactly the same filename as the .mp4 video file except the extension will be .webm
3. Upload your video to the media library.
Note: do not add the video to a menu item only the original video needs to be in a gallery (menu item) and when the FireFox browser is used the site will play the proper version.
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).
Learn about the ACCOUNT tab in your website admin
[watch fullscreen to see all the detail]
This video is NEW as of 1/1/2015.
Learn about the MEDIA LIBARARY tab in your website admin
[watch fullscreen to see all the detail]
This video is NEW as of 1/1/2015.
Learn about the LAYOUT tab in your website admin
[watch fullscreen to see all the detail]
This video is NEW as of 1/1/2015.
Learn about the PDF BUILDER tab in your website admin
[watch fullscreen to see all the detail]
Learn about the UPDATE CDN button in your website admin
UPDATE: We are discontinuing use of the CDN and you may not see this button in your admin.
[watch fullscreen to see all the detail]
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 6 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 HelloWORK Portfolio By A Photo Folio on your iPad or in iTunes or using this link:
https://itunes.apple.com/app/hellowork-portfolio/id689700469
You need to now include www with your domain name when logging in. So, robhaggart.com would be www.robhaggart.com
[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.
Learn about other additional topics for your website
NEW How To Float Your Top or Bottom Menu on Top of Your Image [go here]
NEW Embed your blog inside your Photo Folio website [go here]
NEW How To Create Index Thumbs In v10 of Design X [go here]
NEW 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.
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.
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.
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.
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.
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.
There are two important parts to making your new APhotoFolio website “live”:
1. Deciding where you want to host email. Either setup using google apps or keep email where its currently hosted.
2. Pointing your domain name (e.g. robhaggart.com) to our servers so your new site becomes visible to the world.
If you are simply upgrading to Design X and your site is already “live” submit a support ticket to have it switched instead of following these steps. You still need to submit your sitemap for SEO
If you are ready to make your site “live” move on to Step 1 >>>>
Taking your site live on Friday afternoon is 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 download our free iPad App.
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: support.aphotofolio.com
If your blog is already moved to Flywheel you can contact their support team for any of your needs: getflywheel.com/help