Tutorial - Hike On, part 1

Note: The job Create the first template definition Create the home page and enter the content Create the view for the template the home page uses Create the layout view for the site View the home page

Note:

This tutorial is desighed to give and introduction into some of the features of geego.

It shows how to create pages, get content into the system and display the content in the public area of website.

The graphic/layout and content for the public area used in the tutorial is very basic so that you can focus on the workings of Geego.

The job

We have been approached by a small business that operates hiking tours in France, New Zealand and Norway.

They want a small site to begin with that describes the hiking offered in each of the countries and gives news on hikes upcoming and completed.

We decide on the following for the initial list of pages:

Home - text and images
Destinations
    Nepal
    France
    New Zealand
News - title, text and images for each article

Create the first template definition

Create a Geego site as per the setup instructions in the documentation.

Set the initial data as per set initial data instructions Now create our first template definition.

Go to the templated definitions directory /geego.

Create a file called text_with_multiple_images.rb with the following code

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

Click on templates in the admin area, the template definition you just created should be in the list of templates to add. Click add. Select page for template type and save.

Create the home page and enter the content

Return to page list view.

Click on new page. Give a page name of home, location of / and select the template you just created.

Now lets enter some content for the home page.

With the radio button next to home page selected click on the content button.

All the content data items are listed. They are empty so ...
Click on edit next to Page title and enter 'Welcome'
Click on edit next to Text and enter some relevant text for the home page.

Now add 2 photos with relevant captions. Do this by clicking on add item, after browsing for the image check resize and set the width of each image to 300 (just type 300).

Return to page list and click on publish to publish the content you just entered.

Create the view for the template the home page uses

Now we want to display this content so we will create a view.

Create /app/views/g_pub/text_with_multiple_images.rhtml

with the following code

<h1><%= @g[:page_title] %></h1>

<div style="float: right; margin-left: 20px">
<%
for item in @g[:photos]
    %>
    <div style="width: <%= item[:photo][:width] %>px; margin-left: auto;">
        <%= image_tag item[:photo][:show], {:class=>"imgGen", :alt=>item[:photo][:caption]} %>
        <p class="caption"><%= item[:photo][:caption] %></p>
    </div>
    <%
end
%>
</div>

<p style="margin-top: 0px">
<%= @g[:text] %>
</p>

Create the layout view for the site

Edit /app/veiws/layouts/g_pub.rhtml

put the following code in

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
   <meta name="keywords" content="" />
   <meta name="description" content="" />

<style type="text/css">
body {font-family: verdana; font-size: 10pt}
td {vertical-align: top; text-align: left;}
</style >

</head>
<body>
   <table style="width: 800px; margin: 0px auto 0px auto; border: 1px solid #cccccc; border-collapse: collapse" border="1">
       <tr>
           <th colspan="2">
               <h1>SITE HEAD</h2>
           </td>
       </tr>
       <tr>
           <td style="width: 25%">
               page menu
           </td>
           <td style="width: 75%">

<%= @content_for_layout %>

           </td>
       </tr>
       <tr>
           <td colspan="2">
           page footer
           </td>
       </tr>
   </table>
</body>
</html>

View the home page

Now try http:///home/en and you should have a page with some basic formatting that displays our home page content.

As this is our home page we want http:/// to also point to /home/en

Open /config/routes.rb and uncomment the following line

map.connect "", :controller=>"g_pub", :action=>"index", :path=>["home"], :language_id=>"en"

Of course you could change this to make any page your home page.