The Annatto website template

All of our templates websites are search engine optimized and allow you to have unlimited pages and navigation items.  You must create at least one page before you can see the site or you will receive a 404 error. 

 

 

_____________________________________________________________________________________________________________________________

 

 

 

Login to the admin

1. Go to your www.yoursite.com/?admin
2. Enter your username and password
3. Click login

(HINT: If you installed the website in a sub directory ie: “/sites”, then you will go to www.yoursite.com/site/?admin ) (If you are having issues, please refer to the email sent to you after installation. It will tell you where to login to your admin and where your site lives.)

 

_____________________________________________________________________________________________________________________________

                  

Images and sizes in our demo

The following are the image sizes and settings that you see in our demos.  We think these sizes work great with the template and take much of the guess work out of your set up process.  We encourage you to crop a few images and create just a few pages before you make changes to the sizes and ratios. 

 

Under "Design" tab , "Settings"

1. Site minimum: 900 x 500

Under "Setup"

1. Server side re-sampling =True
2. Re-sampling quality 90%
3. Turn image letter boxing on = FALSE
4. Use Image Magick Library = True
5. Automatically Sharpen Resampled Images = True

 

 Images and Logo sizes

1. Album 1600 X 900 px
2. Info Page 600 x 900 px
3. Info list: 1600 x 900 px
4. Gallery list 1600 x 900 px
5. Navigation logo 130 x 50 px
6. Splash Page logo 309 x 150 px

_____________________________________________________________________________________________________________________________

 

Create an Info Page (i.e.: bio page)

Info pages are basic pages that have a title, image(s), and text.  Most photographers use this type of page for a bio page, details page, prices, etc.

1. Crop your images and write your bio.  The images sizes on our demo are 600 x 900 pixels
2. Click Content
3. Click the "New" button
4. Title the page (i.e.: about me)
5. Select "Info Page"
6. Click "Create Page"

Now you will see the page in the list of the "All Pages" panel on the left. 

1. Click on the page you just created
2. On the right panel find the "Image List" tab
3. At the bottom of that panel, click the "Upload" button
4. Click "Add files from your computer" , select your images from your computer
5. Click "Done" once all of the images have loaded. 

(You must wait for all of the images to finish loading before you close the window. Once you click "Done" your files will appear in the panel. )

1. Click on the "Settings" tab
2. Type your bio in the "Description" section
3. Select from the drop-down if you want the image on the right side or left side of the page. 
4. Select "False" if you do not want the watermark to appear on this page.  (you can set this up in a different step)
5. Click "Save"

 

_____________________________________________________________________________________________________________________________

 

Create an Album page (i.e.: portfolio page)

1. Crop all of your images and save them as web ready JPGS.  Our demo images are 1600 x 900 pixels.
2. Click "Content"
3. Click the "New" button
4. Title the page (i.e.: portfolio or weddings or portraits or babies or work) Hint: you can change it later. 
5. Select "Album"
6. Click "Create Page"

Now you will see the page in the list of the "All Pages" panel on the left. 

1. Click on the page you just created
2. On the right panel find the "Image List" tab
3. At the bottom of that panel, click the "Upload" button
4. Click "Add files from your computer" , select your images from your computer
5. Click "Done" once all of the images have loaded

(You must wait for all of the images to finish loading before you close the window. Once you click "Done" your files will appear in the panel. )

1. Click on the "Tracks" tab if you want to add music to this specific album page.  You can also use the "Soundtrack" button at the top to upload music for the entire site.  You can read more about this later. 
2. At the bottom of that panel, click the "Upload" button
3. Click "Add files from your computer" , select your images from your computer
4. Click "Done" once all of the images have loaded
5. Click "Save"
6. Click on the "Settings" tab
7. Show Image captions: Select "True" if you are going to add captions to each image.  You can do this by clicking on the image in the "Image List" tab and clicking "Edit" at the bottom. 
8. Select "true" if you want to "Auto Start" the slideshow.  The will cause the slideshow to play automatically. 
9. If you want to upload a watermark (in a later step), select "True".
10. Click "Save"

 

_____________________________________________________________________________________________________________________________

 

Set up an Info List page (i.e.: FAQ,)

An Info List page has a series of items that link together. For example, on an FAQ page, the questions link to the answers.  This page has many uses from frequently asked questions, to package descriptions. 

1. Crop all of your images and save them as web ready JPGS.  Our demo images are 1600 x 900 pixels.
2. Click Content
3. Click the "New" button
4. Title the page (i.e.: FAQ or Frequently Asked Questions) Hint: you can change it later. 
5. Select "Info List"
6. Click "Create Page"

Now you will see the page in the list of the "All Pages" panel on the left.

1. Click the "Entries" Tab
2. Click "New" at the bottom of the panel
3. Under "Page Title" enter the first question. (i.e.: what should I wear to a shoot?)
4. Upload an image under "Assigned Image" that corresponds to that question (optional).
5. In the "Description", enter the answer to the question
6. Click "Save"

Repeat all of these steps to add more entries to this page. 

 

_____________________________________________________________________________________________________________________________

 

Set up a Gallery List page (i.e.: the page that looks like a grid of images,)

This page is a grid of images.  Each image has a title and the ability to link to other pages or external URLs.  If you have 9 portfolio type pages, this is a great gateway page to use page to use.  You can create a 3x3 grid of images that link to all the different portfolio pages you have.  However, it has many additional uses.  If you have a studio with 6 people, you can create a 3x2 grid of bio pictures and names that link to individual bio pages. 

1. Crop all of your images and save them as web ready JPGS.  Our demo's images are sized to 533 x 300 px,
2. Click Content
3. Click the "New" button
4. Title the page (i.e.: FAQ or Frequently Asked Questions) Hint: you can change it later. 
5. Select "Info List"
6. Click "Create Page"

Now you will see the page in the list of the "All Pages" panel on the left

1. Click the "Entries" Tab
2. Click "New" at the bottom of the panel
3. Under "Page Title" enter the first title (this will be the top left box)
4. Upload an image under "Assigned Image" that corresponds to that box 
5. Determine if and where this image is going to link to: Click "Link to a Page you created" if you have already made that page or Type the URL for an external link in the field right below it. 
6. Select "Open in the Same Window" if it is an internal page.  Select “Open in a New Window" if you are linking to an external page.  This will spawn a new browser window so that your site doesn't go away. 
7. Click "Save"

Repeat all of these steps to add more entries to this page. 

1. Click the "Settings" tab to set up your grid
2. We have 3 "Grid Columns" and 3 "Grid Rows"  
3. Click "Save"

Under the design tab, you will see that we set our Album page ratio to be 16:9.  The Album page helps define the size of the body of the site.  Our demo's images for Gallery list page are sized to 533 x 300 px  This is a ratio based on the ratio of the Album page 16:9 divided by the 3x3 grid = 5.3:3.  If this is too much math for you, don’t worry about it.  Our demo sizes work really well.

 

_____________________________________________________________________________________________________________________________

 

Set up your Contact page

1. Click "Contact"
2. Click the "Settings" tab
3. Add a title for this page (i.e.: contact us)
4. Description: Write something about contacting you like hours of operation, address, phone number, etc.
5. Your Website URL (http://...): In the first field, you can add your website address. In the second field, add how the link should read.
6. Your Email: In the first field, add your email address. In the second field is what they will see when receiving an email from this system (i.e.: from your name or company name).
7. Server Email: You can leave this blank unless you have a Yahoo email address. If you have a Yahoo email, they will give you an additional Server email address to put in the first field.
8. Click "Save"

Form Fields Tab

• The form fields tab will allow you to edit what the fields of the contact form say. 

Advanced Tab

• The advanced tab will provide you with the ability to change some of the responses like when a message fails to send. 
• The "Email Message Body" is an advanced feature.  It structures how the information collected is displayed in your email.  

_____________________________________________________________________________________________________________________________

 

Set up your Sitemap (Navigation Buttons)

Navigation button can link to an internal page or to an external URL.  Your main navigation buttons might look like: home, about, portfolio, contact blog.  The first four buttons might link to pages you have created and the last button might link to an external blog.  Either way, you must have your pages created first before you can link to them.  

1. Click "Sitemap"
2. Click "New" at the bottom of the "Navigation" panel
3. Add a navigation title (i.e.: about or portfolio)
4. Either click "link to the page you create" and link to one of the pages that you created OR type the URL in the "Enter URL" field if you want it to link to something like your blog. 
5. Choose where this link opens:  Select same window if it is linking to an internal page.  Select a new window if you are linking to an external URL. 
6. Click "Save"
7. Continue these steps until all of your main navigation buttons are make and linked. 

You can create sun-navigation buttons to better organize your site.  For example, you can make a main button called "Portfolio" (follow the steps above), and add sub-navigation under that button that links to weddings, portraits, babies, etc. 

1. Click on the main navigation button that you recently created
2. Click new at the bottom of the right panel
3. Add a navigation title (i.e.: about or portfolio)
4. Either click "link to the page you create" and link to one of the pages that you created OR type the URL in the "Enter URL" field if you want it to link to something like your blog.
5. Choose where this link opens:  Select same window if it is linking to an internal page.  Select a new window if you are linking to an external URL.
6. Click "Save"

Now your sub-navigation button should appear in the right panel.  Continue these steps until all of your sub-navigation buttons are made.

 

_____________________________________________________________________________________________________________________________ 

Set up your Splash Page

A splash page is a gateway page that links to different web entities.  It can link to your website, your blog, and other sites that you may have.  Many photographers link to different websites: i.e.: enter my weddings site, enter my portrait site, etc.  Some splash pages come with images, some are just links. 

1. Click "Splash"
2. Click on the "Settings" tab
3. Add a "Title" for the link.  (i.e.: enter website)
4. Show image captions: Select "True" if you want captions to show on the images.  (if available)
5. Enter an SEO blurb.  This is a description for search engines about what the site is. 
6. Click "Save"

Now you can add links on your splash page.  Not every template is going to be set up the same.  Some have images some are just text. 

1. Click on the "Photo 1" tab
2. Upload an image (if available)
3. Upload a title for the link (i.e.: enter site)
4. Write a description (optional.  This will only appear if you marked this "True" in the "Settings" tab above.
5. Choose the destination of the button: Either click "link to the page you create" and link to one of the pages that you created OR type the URL in the "Enter URL" field if you want it to link to something like your blog.
6. Choose where this link opens:  Select same window if it is linking to an internal page.  Select a new window if you are linking to an external URL.
7. Click "Save"
8. Repeat these steps for the additional tabs if necessary. 

You can set your splash page ratio (see above).  When you add more images, it will maintain that ratio but make the images smaller to fit the additional images.  So if you have a ration of 16:9 with two images, those two images will get small when adding a 3rd image.  But they will maintain their 16:9 ratios. 

 

_____________________________________________________________________________________________________________________________

 

Set up your music

You can upload MP3 files to play on your website.  Please be aware, that you can also upload specific MP3 files for Album pages when you set up that page.  In addition, under the "Setup tab" you can set the music to mute on the splash page.  

Track Listing Panel

1. Click "Soundtrack"
2. At the bottom of that panel, click the "Upload" button
3. Click "Add files from your computer" , select your images from your computer
4. Click "Done" once all of the images have loaded.

(You must wait for all of the images to finish loading before you close the window. Once you click "Done" your files will appear in the panel. )

Setting Panel

1. Enable: Select "True".  This will allow your songs to be played.
2. Volume: You can increase the number to increase the volume. (Hint: 50 is a good number)
3. Loop: Decide if you want the song list to loop when done playing.  If so, select "True"
4. Click "Save"

 

_____________________________________________________________________________________________________________________________

 

Set up your Design

The following sizes and setting are based on our demo.  These sizes are a great way to get started and work for most people.  If you want to play around with the ratios and the image sizes, know that you will have to set them here first.  

Settings tab

1. Click Design
2. Click the "Settings" tab
3. Navigation logo will be on the main site next to the navigation.  This logo should be a minimum of 40 pixels tall.  Our demo logo is around 130 x 50.
4. Navigation logo link: Your logo will by default link to the splash page or homepage.  You can override this here.  
5. Splash Page logo will be on the splash page if you have one.  We uploaded an image that was 309 x 150
6. Site Minimum:  900 x 500
7. Body Background Color:  The Color of the letterbox
8. Navigation Background Color: Color of the Navigation bar
9. Auto-hide navigation:  This allows a more full screen type look for your photos.
10. Page Background Color: is the main color of the background behind the content of the website
11. Foreground Color:  This is for the keylines, thumbnails buttons, etc.
12. Show keylines: are lines used to separate areas on the website. 
13. Thumbnail height:  Demo set to 60 px
14. Thumbnail portions: Auto size will base the thumbnail on the image.  Square will make them all uniform squares. 
15. Show Thumbnails:  This allows you to choose to see thumbnails of the photos in a slideshow
16. Video Player Skin:  Select from the drop down to change the style of your video player.  
17. Social Bar Height:  Demo is set to 40 px
18. Social Bar  Background Color:  This color will appear behind the social information at the bottom of your site.
19. Click "Save"

Fonts Tab

1. Embed Font Glyphs most of the time will be set to "False".  Select "True" if you have special characters in your text
2. Font Style: Choose a font from the drop-down menu.
3. Splash Page Test Color will change the color of the links (i.e.: "Enter site", "Enter blog")
4. Splash page text size will change the size of the link text.  We set the demo to 14
5. Navigation Text  Color:  Color of the navigation
6. Navigation Text Size will change the size of the navigation text. We set the demo to 14.
7. Navigation Text Highlight Color will change the color of the navigation text when you roll over it. 
8. Navigation Text Selected Color will change the color of the navigation text when you click it.
9. Title Text Color:  Color of the Title
10. Title Text Size will change the size of the title text on each page. We set the demo to 24.
11. Description Text Style: Choose a font style from the drop-down menu
12. Description Text Color will change the color of the description text
13. Description Text Size:  We set the demo to 12
14. Space between Text Lines refers to the space between the lines of the paragraph.  We set the demo to 4.
15. Footer text Color refers to the color of the text in your footer (i.e.: Copyright 2011 Jay Photography 
16. Footer Text Size will change the size of the title text on each page. We set the demo to 12
17. Social Bar Foreground Color refers to the color of the icons, text, etc.  This will not change the Facebook, Google, or Twitter social buttons. 
18. Social Bar Highlight color refers to the color that appears on rollover of click-able items.  

_____________________________________________________________________________________________________________________________

 

Setup your site options

Settings tab

1. Site name: This is important for SEO. To be geeky about it, creates the text for the H1 tag. You can use your name, your company name, or a keyword that is important to you. Please only use one important keyword or search term...don't overdo it.
2. Browser title: This is what will be seen at the top of the browser. Leave the {PAGE_NAME} as is and add a “-” and the title of the site. (i.e.: {PAGE_NAME}- Intothedarkroom) The {PAGE_NAME} will be replaced with the page name that they are on.
3. Meta Tag Description: Write a 250 character paragraph describing what this site is for. Do not add a bunch of spam words. Write it as if your clients are going to read it.
4. Meta Tag Keywords: Comma separate your keywords (i.e.: Carlsbad photographer, Jay Reilly, etc)
5. Footer Link Text: choose from the dropdown how you want the link to read.
6. Site Footer text: Add your copyright information here. (i.e.: © 2010 ITDR | intothedarkroom | all rights reserved)
7. Google Analytics User Agent: When you set up your Google Analytics account, they give you a UA code. Just put this code in this field. It looks like this: UA-XXXXXXX-X.
8. Use Server Side resampling: if you select “True”, this will reduce the file size (by percentage) of your images making them easier on the user’s bandwidth. However, we do suggest that when you are in Photoshop, you adjust the quality of your images to make them the optimum size for reduced bandwidth.
9. Resampling Quality: Turn the percentage of the server side re-sampling up or down to increase or reduce the size of the files.
10. Show Share in Navigation:  Turn this to "True" if you want a "share" button for social networking sites in your nav.  This will not turn on if your social bar is activated. 
11. Mute Music on Splash Page: If you set up a splash page, you may not want music playing until someone enters the site.  If this is the case, select "True".
12. Use Image Magick Library if available: (Not all servers have this.) Select “True” if you are using the server side re-sampling feature. This could process your images faster at higher resolutions.
13. Automatically Sharpen re-sample Images: Selecting True will sharpen the images as they are scaled down in the server-side re-sampling process. This will keep your images from looking soft.
14. Click "Save"

Language Tab

• All of the text for all of the buttons can be changed in the Language tab. This is completely optional if you choose to do this.

Web Services Tab

1. The Facebook is the thumbnail that appears on people’s wall when they share your website.  This image will not appear automatically.  It takes Facebook a while before it can read the image.  
2. Your Facebook URL:  Enter the URL for your account.  Do not forget the http://www.
3. Your Twitter URL: Enter the URL for your account.  Do not forget the http://www.
4. Your LinkedIn URL: Enter the URL for your account.  Do not forget the http://www.
5. Your Google+ Profile URL: Enter the URL for your account.  Do not forget the http://www.
6. Use Facebook like button: Select "True" if you want this to appear on your Social Bar. 
7. Use TweetMe Button: Select "True" if you want this to appear on your Social Bar. 
8. Your Twitter Username:  If your Twitter URL is "twitter.com/intothedarkroom", you would just type in "intothedarkroom".  This will pull your last tweet onto the social bar. 
9. Use Google +1 Button: Select "True" if you want this to appear on your Social Bar. 
10. Recent Post RSS Feed URL:  Most blogs have an RSS icon on the blog.  If you click on that icon it will show you the RSS feed.  Copy and paste that feed in this field and your recent blog posts will be available on your social bar.  (i.e.: http://carveculture.com/?feed=rss2)
11. Click "Save"

Watermarking tab

1. Use Watermarking Image: If you select “True” this will turn watermarking on. If you select “False” watermarking will be turned off.
2. Watermarking Image: Upload an image you would like to use for your watermark. We recommend a one color logo saved as a transparent PNG.
3. Watermark X Offset: This helps you determine the horizontal position of the watermark. 0 will move the mark left, 100 will move the mark right.
4. Watermark Y Offset: This helps you determine the vertical position of the watermark. 0 will move the mark up, 100 will move the mark down.
5. Watermark Opacity: You can control the opacity of the watermark with the numerical number.
6. Draw Crosshairs: if you select “True”, a one pixel “X” will be drawn over the image serving as a protective watermark.
7. Crosshairs Color: The color of the watermark lines can be determined by the color picker.
8. Crosshairs Opacity: You can control the opacity of the watermark with the numerical number.
9. Click "Save"