Fennel website template setup guide (retired template)

The Fennel 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”, "Settings"

 

  1. Album aspect ratio 3:2
  2. Thumbnail size 100 x 75 px
  3. InfoPage Image aspect ratio 6:9
  4. Infolist image aspect ratio 16:9
  5. Splash Page Image aspect ratio 15:10

 

 

 

Under "Setup"

 

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

 

 

 

Image and Logo sizes

 

  1. Album 1500 X 1000 px
  2. Info Page 600 x 900 px
  3. Info list: 500 x 333 px
  4. Gallery list 500 x 333 px  (Hint: this is a ratio based on the ratio of the Album page 15:10 divided by the 3x3 grid = 5:3.3)
  5. Splash Page 1500 x 1000 px
  6. Logo: 280 x 90 px (saved as a transparent ping)

 

 

_____________________________________________________________________________________________________________________________

 

 

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 600x900 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 1500 x 1000 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 500 x 330 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 500 x 333 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 a 15:10 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 500 x 333 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 15:10 with two images, those two images will get small when adding a 3rd image.  But they will maintain their 15:10 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 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 280 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. Turn on image matting = True
  6. Image Matte Color: This is the color that surrounds any letter boxed images.  Most people set this to the same color as the body.  
  7. Body Highlight Color: this will be the highlight color of specific text items (ie: pause on the gallery page, selected items on the infolist)
  8. Album aspect ratio is 3:2
  9. Thumbnail sizes for the album pages are set to 100 x 75 pixels
  10. Info Page Image Aspect Ratio is set to 6:9.   This will determine the size of the images on this page.
  11. Info list Aspect Ratio: 500:333
  12. Splash page Image Aspect Ratio 3:2
  13. Social Bar Height: Determine the pixel height of the social bar.  (this is something you can activate in another step)
  14. Social Bar Color:  This color will appear behind the social information at the bottom of your site.
  15. Social Bar Opacity: Change the opacity of the social bar. 
  16. 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. (demo: Raleway thin)
  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 22.
  5. Navigation Text Color will change the color of the navigation text. (i.e.: the main button at the top of the site)
  6. Navigation Text Size will change the size of the navigation text. We set the demo to 22.
  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 will change the color of the title text on each page.
  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: Select the font style from the drop down.  This will affect body the main text on the pages.  
  12. Description Text Color will change the color of the description text.
  13. Description Text Size will change the size of any description text.  We set the demo to 12.
  14. Space between text lines will change the space in the paragraph from sentence to sentence.  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. Foot text size refers to the size of the text in the footer.  We set the demo to 14
  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.  
  19. Click "Save"

Background Tab

  1. Use Designer Background marked as True will add a pre-designed "papery texture" in the background. 
  2. Background color effect will determine how the Designer Background is treated.
  3. Background Effect Color will change the Designer Backgrounds color tone.
  4. 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.
  5. 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.
  6. Background Image: You can upload an image here to display as your background. This image should be cropped around 1600x1200 pixels.
  7. Background mode: If you uploaded an image as the background, decide how you want it to display.
  8. Click "Save"

Video Tab

  1. Video Player Show Fullscreen Icon:  Select "True" if you would like your users to be able to watch the video fullscreen. 
  2. Video Player Skin:  Select from the drop down to change the style of your video player.  
  3. 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. 

 

_____________________________________________________________________________________________________________________________

 

 

Setup your site options

 

Setup 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 sets the time that each image is displayed in the album view.  We set the demo to 5.
  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. 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.
  14. 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.
  15. 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

1 Comments

  • 0
    Avatar
    Brittaniburnsphotography

    so can you not have custom fonts in the fennel site? Is my only option the fonts the template provides?

Please sign in to leave a comment.
Powered by Zendesk