Vanilla website template setup guide (retired template)

The Vanilla 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 , "Advanced"

  1. Site maximum: 1600 x 900
  2. Site minimum: 900 x 700
  3. Site maximum: 1600 x 900
  4. InfoPage Image Aspect ratio: 6:9
  5. Album aspect ratio 16:9
  6. Infolist aspect ratio: 16:9
  7. Thumbnail Size: 65x65

 

Under the "Setup" tab

  1. Server side re-sampling =True       
  2. Re-sample quality percentage = 90
  3. Turn image letter boxing on = True

 

Image and Logo sizes

  1. Info page: 600 x 900
  2. Album Page: 1600 x 900
  3. Info list page: 1600 x 900
  4. Gallery list page: 533 x 300  -  (Hint: this number is based on the Album aspect ration which is set to 1600x900.  Since there are 9 boxes in our 3x3 grid you divide the 1600 by 3 and the 900 by 3 to get a ration of 5.3:3)
  5. logo size: about 200 x 90   
  6. Splash Page: 1600x900   
 
_____________________________________________________________________________________________________________________________

 

 

Create an Info Page (ie: 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 (ie: 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 (ie: portfolio page)

  1. Crop all of your images and save them as webready JPGS.  Our demo images are 1600 x 900 pixels.
  2. Click "Content"
  3. Click the "New" button
  4. Title the page (ie: 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 "Sountrack" 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"
  1. Click on the "Settings" tab
  2. 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. 
  3. Select "true" if you want to "Auto Start" the slideshow.  the will cause the slideshow to play automatically. 
  4. If you want to upload a watermark (in a later step), select "True".
  5. Click "Save"

 

 _____________________________________________________________________________________________________________________________

 

 

Set up an InfoList page (ie: FAQ,)

An InfoList page has a series of items that link together. Foe 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 webready JPGS.  Our demo images are 1600x900 pixels.
  2. Click Content
  3. Click the "New" button
  4. Title the page (ie: FAQ or Frequently Asked Questions) Hint: you can change it later. 
  5. Select "InfoList"
  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. (ie: 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 GalleryList page (ie: 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 porfolio 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 webready JPGS.  Our demo's images are sized to 533 x 300 px,
  2. Click Content
  3. Click the "New" button
  4. Title the page (ie: FAQ or Frequently Asked Questions) Hint: you can change it later. 
  5. Select "GalleryList"
  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. Determin 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 a 16:9 ratio.  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, dont 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 (ie: 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 (ie: 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 (ie: 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 (ie: 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: ir: 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 site. When people save your site as a favorite or bookmark... this is the name that will show in that list
  4. Show image captions: Select "True" if you want captions to show on the images.  (if available)
  5. Enter an SEO blurb.  The 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) 1600 x 900
  3. Enter a title for the link (ie: 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 an external site like your blog. Please make sure you enter in the whole address http://www.domain.com
  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 image, 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 ratio. 

 

_____________________________________________________________________________________________________________________________

 

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. Upload a logo file (our demo logo is a transparent PNG file that is 200 x 90 pixels)
  4. Site logo link: Your logo will by default link to the splash page or homepage.  You can override this here.  
  5. Background Gradient Top Color: Select the top color for the background. If you want the background to be all one color, make sure the gradient bottom color is the same.
  6. Background Gradient Bottom Color: Select the bottom color for the background. This will create a gradient blend from top to bottom. If you want the background to be all one color, make sure the gradient top color is the same.
  7. Site loader color: When the site loads this is the color of the percentage that is seen.
  8. Body Color: this will change the color that the images and text sit on
  9. Body Shadow Color: Select a color for the shadow behind the body. (most select black)
  10. Body Shadow Opacity: Determine how light or dark you want the shadow to appear.
  11. Body Shadow width: the higher the number the bigger the shadow. 
  12. Show Keylines: there are some horizontal and vertical lines in the design (most obvious is in the navigation)
  13. Horizontal line color:  Select a color for the horizontal keyline
  14. Vertical line color:  Select a color for the vertical keyline
  15. Contact form line color:  Select a color for the contact form keyline
  16. Loader color:
  17. Thumbnail bar background color: This is the color of the background on the thumbnail bar below the main large picture.
  18. Thumbnail Arrow Color: The color of the arrows that are to the far left and far right in the thumbnail bar.
  19. Thumbnail border color: The color of the boarder on the above mentioned arrows.
  20. Thumbnail border Stroke width: change the size of the stroke around the thumbnail
  21. Font Style: Choose a font from the drop-down menu.
  22. Navigation Bar Background Color: This is the color of the navigation tabs background color.
  23. Navigation Text Color will change the color of the navigation text. (i.e.: the main button at the top of the site)
  24. Navigation Text Highlight Color will change the color of the navigation text when you roll over it. 
  25. Navigation Text Selected Color will change the color of the navigation text when you click it.
  26. Navigation Text Size will change the size of the navigation text. We set the demo to 16.
  27. Title Text Color will change the color of the title text on each page.
  28. Title Text Size will change the size of the title text on each page. We set the demo to 24.
  29. Description Text Style: Choose from the drop-down menu.
  30. Description Text Color will change the color of the description text.
  31. Description Text Size will change the size of any description text.  We set the demo to 12.
  32. Space between Text Lines refers to the space between the lines of the paragraph.  We set the demo to 1.
  33. Footer text Color refers to the color of the text in your footer (i.e.: Copyright 2011 Jay Photography) 
  34. Footer text size refers to the color of the text in your footer (i.e.: Copyright 2011 Jay Photography) We set the demo to 12.
  35. Social Bar Color:  This color will appear behind the social information at the bottom of your site.
  36. Social Bar Foreground Color refers to the color of the icons, text, etc.  This will not change the Facebook, Google, or Twitter social buttons. 
  37. Social Bar Highlight color refers to the color that appears on rollover of click-able items.  

 

Advanced tab

  1. Background Image: You can upload an image here to display as your background. This image should be cropped around 1600x1200 pixels.
  2. Background mode: If you uploaded an image as the background, decide how you want it to display.
  3. Embed Font Glyphs most of the time will be set to "False".  Select "True" if you have special characters in your text.
  4. Margin Widths:  default 20
  5. Body Corner Radius: This number will change the corners of the body.  "0" will be no rounded edge, "25" will be very round.
  6. Info Page Image Aspect Ratio is set to 4:5.   This will determine the size of the images on this page.
  7. Album Aspect ratio is set to 16:9.  This will determine the size of the images on this page
  8. Thumbnail size: Default 50 x 50 px
  9. Video Player Skin:  Select from the drop down to change the style of your video player.  
  10. Video Player Show Fullscreen Icon:  Select "True" if you would like your users to be able to watch the video fullscreen. 
  11. Video Player Background Color: This is the color that surrounds any letter boxed images.  Most people set this to the same color as the body.  
  12. Site Maximum is set to 1600 x 1200 (this determines the maximum size of the website)
  13. Site Minimum is set to 900 x 500 (this determines how small the site can get)
  14. Info list Aspect Ratio: 900:360.
  15. Social Bar Height: Determine the pixel height of the social bar.  (this is something you can activate in another step)
  16. Social Bar Opacity: Change the opacity of the social bar.

_____________________________________________________________________________________________________________________________

 

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. Slideshow timer: This is how quickly the photos transition to the next one in queue
  12. 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".
  13. Turn Image letterboxing on (global): Default true
  14. 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.
  15. 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.
  16. 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"

 

Have more questions? Submit a request

5 Comments

  • 0
    Avatar
    Zoltan Fogarasi

    You should update it. A lot of things changed since you wrote it.

  • 0
    Avatar
    Jessica S

    Following this to the letter I still get "Info page" that won't show text and stretches any photo. The time I have spent trying to figure this out could have well be spent earning money instead of losing both my money and my mind.

  • 0
    Avatar
    Jessica S

    My above comment was responded to quickly and throughly, and I appreciate all the help and hard work. Part of my problem was an update that apparently didn't take - but seemed like it did. When I forced through the update again, many things changed and I was able to work as intended. Just wanted to update for those reading!

  • 0
    Avatar
    Meghan Boyer

    Is there a way to turn off the splash page? 

    Also, is there a way to control the speed of the slideshow in the portfolio/albums page? Mine is flying spending less than a second on each image. 

  • 0
    Avatar
    Dana Jav

    All of a sudden, I'm experiencing an issue where my site isn't scrolling down, so you can't even enter it! Any ideas on how to fix?? I need it fixed ASAP!

Please sign in to leave a comment.
Powered by Zendesk