Tutorial - Hike On, part 2

Add the destination pages Create the menu template definition. Enter the menu content Create the view to display the menu Create the footer shared portion View the website with menu and footer and navigate the pages

Add the destination pages

Now we will create 3 more pages that will use the same template that have information about different hiking destinations.

So to keep our page list tidy create a new location called destinations and then add the following 3 pages that use the same template as the home page.

/destinations/france
/destinations/new_zealand
/destinations/kenya

Before entering the content for these pages we decide that we would like all images to be 300px wide so we set that in the template definition. That way the client will not have to think about what size the images should be.

So open /geego/text_with_multiple_images.rb and change it to the following (note that image now has a width attribute)

{:name=>'tm_Page_title', :formatting=>false},
{:name=>'tl_Text'},
{:name=>'r_Photos', :fields=>[{:name=>'img_Photo', :width=>300, :caption=>true}]}

Edit the content text and images for these pages as you see fit.

Create the menu template definition.

We want a menu to display our pages. This will be down the left hand side of the site with the ability to be multidimensional.

Create a template definition file in /geego called main_menu.rb and put in the following code

{:name=>'r_menu', :fields=>['at_Link', 'rc_Sub_menu']}

Click on templates in the admin area and add this new template definition. This time giving it a template type of shared portion as it is not a page itself but rather a portion shared across many pages.

In page list veiw click on new shared portion and give a name of main_menu, location of / and use the main_menu template.

Enter the menu content

With the new shared portion selected click on content button.

Click on add item for the menu repeater.

Type in Home and select the home page after clicking on Get link address.

Now we want the next menu item to be say Destinations and have 3 sub menu items.

Click add item and enter the text Destinations and save.

Now click add item next to Destinations in the sub menu column. Type France and click on Get link address and select the /destinations/france page.

Repeat this step for our 2 other destination pages.

Return to page list and publish the menu.

Create the view to display the menu

We now want to display this menu in the layout. So create a partial view as follows

/app/views/gpub/_main_menu.rhtml

<div style="margin-left: 20px">
<%
menu=@g[:menu] if menu.nil?
for item in menu
    %>
    <%=
        if !item[:link][:address].blank?
                 link_to(item[:link][:show], "#{item[:link][:address]}/#{@language_id}")
        else
            item[:link][:show]
        end
        %> <br />
    <%= render(:partial=>'main_menu', :locals=>{:menu=>item[:sub_menu]}) if item[:sub_menu].size > 0 %>
    <%
end
%>
</div>

and put this line in the layout (g_pub.rhtml) where the menu is to go

<%= share_include '/', 'main_menu' %>

Share_include is a function in g_pub_helper.rb check it out it is very simple.

Create the footer shared portion

While we are on shared portions lets create one for the footer so the client can update there own email and phone number.

Create /geego/footer.rb with the following code

{:name=>'tm_Footer_text'}

Go to templates in the admin area and add to the template list giving it a template type of shared portion.

Add a new shared portion with name of footer using our recently created template with / for the location.

Edit this shared portion and put something like this as the footer text

email: info@hikeon.com tel: ++33 4 54 88 77 99

Save and publish.

Create the view /app/views/g_pub/_footer.rhtml with the following code

<p style="text-align: center">
<%= @g[:footer_text] %>
</p>

Edit the layout (g_pub.rhtml) again putting this line in the last row where the footer text should appear.

<%= share_include '/', 'footer' %>

View the website with menu and footer and navigate the pages

You should now be able to navigate between the home and destination pages with ease using the menu.

If an error occurs be sure your footer and main_menu are both published.