I'm currently getting the following error in my rails app: syntax error, unexpected tCONSTANT, expecting keyword_end. The error and full code is below along with code from the user_controller#show. Also there is no ruby code in the properties partial.
Any help would be great.
Thanks,
Tony.
# User Controller
def show
#user = User.find(params[:id])
#properties = #user.properties
end
Section of code where error is occurring
<table border="0" class="gt-table gt-user-table">
<tbody>
<% if #user.properties.any? %>
<%= render #properties %>
<% end %>
</tbody>
The full page of code is:
<% provide(:title, #user.name) %>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="Pragma" content="no-cache" />
<%= stylesheet_link_tag 'reset-fonts' %>
<%= stylesheet_link_tag 'gt-styles' %>
</head>
<body>
<!-- head -->
<div class="gt-hd clearfix">
<!-- leaf watermark -->
<div class="gt-leaf-watermark clearfix">
<!-- head top -->
<div class="gt-hd-top clearfix">
<div class="gt-fixed-wrap clearfix">
<!-- logo -->
<div class="gt-logo">
Propertygate
</div>
<!-- / logo -->
<!-- utility box -->
<% if signed_in? %>
<div class="gt-util-box">
<div class="gt-util-box-inner">
<p>welcome <strong><%= current_user.name %></strong> <span class="gt-util-separator">|</span> <%= link_to "Sign out", signout_path, method: "delete" %></p>
</div>
</div>
<% else %>
<%= link_to "Sign in", signin_path %>
<% end %>
<!-- / utility box -->
</div>
</div><!-- /head top -->
<!-- navbar -->
<div class="gt-navbar clearfix">
<div class="gt-fixed-wrap clearfix">
<!-- navigation -->
<div class="gt-nav">
<ul>
<li>Home</li>
<li>Base HTML</li>
<li><a class="gt-active" href="tables.html">Tables</a></li>
<li>Forms</li>
<li>Text Styles</li>
<li>Buttons</li>
<li>Login</li>
</ul>
</div><!-- / navigation -->
<!-- search -->
<div class="gt-search"><div class="gt-search-inner">
<input type="text" class="gt-search-text" value="Search" onfocus="javascript:if(this.value=='Search')this.value='';" onblur="javascript:if(this.value=='')this.value='Search';" />
</div></div>
</div>
</div><!-- /navbar -->
</div><!-- /leaf watermark -->
</div>
<!-- / head -->
<!-- body -->
<div class="gt-bd gt-cols clearfix">
<% flash.each do |key, value| %>
<div class="status success">
<p class="closestatus">x</p>
<p><%= image_tag 'icons/icon_success.png', :alt => 'Success' %><span><%= key %></span> <%= value %></p>
</div>
<% end %>
<!-- main content -->
<div class="gt-content">
<!-- User List Table -->
<!-- This table can be used for listing things like users -->
<h2 class="gt-table-head">Your Profile</h2>
<!-- Content Box -->
<div class="gt-content-box">
<table border="0" class="gt-table gt-user-table">
<tbody>
<tr>
<td class="gt-avatar"><%= image_tag 'gt/avatar.gif', :alt => 'avatar' %></td>
<td>
<h4><%= #user.name %></h4>
<p>My favorite color is green. I really like trees!</p>
<p class="gt-table-edit"><%= link_to 'Edit', edit_user_path(#user) %></p>
</td>
<td>
<!-- Categories Sub Table -->
<table border="0" class="gt-table-categories">
<tr>
<th>Email:</th>
<td><%= #user.email %></td>
</tr>
<tr>
<th>Friends:</th>
<td>Susan, Fred</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div><!-- /Content Box -->
<!-- / User List -->
<br />
<!-- Article List Table -->
<!-- This table can be used for listing things like articles, pages or blog entries -->
<h2 class="gt-table-head">Current Articles</h2>
<!-- Content Box -->
<div class="gt-content-box">
<!-- Table Controls -->
<div class="gt-table-controls clearfix">
<form action="" class="gt-table-picker">
<select>
<option>Choose Section...</option>
<option>Blog</option>
<option>Contact</option>
<option>About</option>
</select>
</form>
<p class="gt-table-pager"><a class="current" href="">1</a> | 2 | 3 »</p>
</div><!-- /Table Controls -->
<table border="0" class="gt-table gt-user-table">
<tbody>
<% if #user.properties.any? %>
<%= render #properties %>
<% end %>
</tbody>
</table>
</div><!-- /Content Box -->
<div class="gt-table-buttons">
Add New Article
</div>
<!-- / Article Table List -->
</div>
<!-- / main content -->
<!-- sidebar -->
<div class="gt-sidebar">
<!-- Sidebar Navigation -->
<div class="gt-sidebar-nav gt-sidebar-nav-blue">
<h3>Quick Links</h3>
<ul>
<li>Add a New Post</li>
<li>Edit User Settings</li>
<li>View Live Site</li>
</ul>
</div><!-- /Sidebar Navigation -->
<!-- Sidebar Box -->
<div class="gt-sidebar-box gt-sidebar-box-gray">
<!-- search -->
<div class="gt-search"><div class="gt-search-inner">
<input type="text" class="gt-search-text" value="Find an Article" onfocus="javascript:if(this.value=='Find an Article')this.value='';" onblur="javascript:if(this.value=='')this.value='Find an Article';" />
</div></div><!-- /search -->
</div><!-- /Sidebar Box -->
<!-- Sidebar Navigation -->
<div class="gt-sidebar-nav gt-sidebar-nav-gray">
<h3>Get Help</h3>
<ul>
<li>Email Us</li>
</ul>
</div><!-- /Sidebar Navigation -->
<!-- Sidebar Content -->
<div class="gt-sidebar-content">
<h3>Sidebar Note</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!-- /Sidebar Content -->
<!-- Sidebar List -->
<div class="gt-sidebar-list">
<h3>Users List</h3>
<ul class="gt-sidebar-list-content">
<li class="gt-sidebar-list-row">
<img class="gt-avatar-small" src="images/gt/avatar-small.gif" alt="avatar-small" width="25" height="25"/>
<h4>John Marker</h4>
<p>I love to color pictures!</p>
</li>
<li class="gt-sidebar-list-row">
<img class="gt-avatar-small" src="images/gt/avatar-small.gif" alt="avatar-small" width="25" height="25"/>
<h4>Charlee Watts</h4>
<p>Eco-friendly is the way to go!</p>
</li>
<li class="gt-sidebar-list-row">
<img class="gt-avatar-small" src="images/gt/avatar-small.gif" alt="avatar-small" width="25" height="25"/>
<h4>Sarah Smith</h4>
<p>I love to draw...</p>
</li>
</ul>
</div><!-- /Sidebar List -->
</div>
<!-- / sidebar -->
</div>
<!-- / body -->
<!-- footer -->
<div class="gt-footer"><div class="gt-footer-inner">
<p>Copyright © 2010 Gooey Templates - GooeyTemplates.com</p>
</div></div>
<!-- /footer -->
</body>
Just out of curiosity (I don't have a Rails machine I can spin up at the moment), but what if you replaced that block with:
<%= render #properties if #properties.any? %>
... theoretically, that should accomplish the same task... also, you should be able to simply refer to #properties, since you already set that in your controller, rather than requerying the user model for the same data, I would think.
I assume you've already tried commenting out the entire block, to isolate that that is where the problem is coming from.
Thanks for all the help and suggestions. I found the error in the print edition of Ruby on Rails Tutorial 2nd edition there are missing ''s in one of the model examples. After adding in the ''s the error went away and all is working now.
Thanks again,
T.
Related
I have the following code in my app:
<!-- Nav tabs -->
<div class="row">
<div class="col-md-3">
<ul class="nav md-pills pills-primary flex-column" role="tablist">
<% #users_with_apps = [] %>
<% AppForm.all.order("created_at DESC").each do |app| %>
<% unless #users_with_apps.include? User.find(app.user_id) %>
<% #users_with_apps << User.find(app.user_id) %>
<% end %>
<% end %>
<% #users_with_apps.each do |user| %>
<% apps = [] %>
<% AppForm.all.order("created_at DESC").each do |app| %>
<% if app.user_id == user.id %>
<% apps << AppForm.find(app.id) %>
<% end %>
<% end %>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#<% user.id %>-panel" role="tab">
Member #<%= fixed_digit_number(user.id) %> (<%= apps.count %>)
</a>
</li>
<% end %>
</ul>
</div>
<div class="col-md-9">
<!-- Tab panels -->
<div class="tab-content vertical">
<% #users_with_apps.each do |user| %>
<% apps = [] %>
<% AppForm.all.order("created_at DESC").each do |app| %>
<% if app.user_id == user.id %>
<% apps << AppForm.find(app.id) %>
<% end %>
<% end %>
<!-- Panel 1 -->
<div class="tab-pane fade" id="<% user.id %>-panel" role="tabpanel">
<% apps.each do |app| %>
<%= render partial: "app_forms/app_line", locals: {application: app} %>
<% end %>
</div>
<!-- Panel 1 -->
<% end %>
</div> <!-- tab content -->
</div> <!-- col -->
</div> <!-- row -->
<!-- Nav tabs -->
It renders to look like this:
<!-- Nav tabs -->
<div class="row">
<div class="col-md-3">
<ul class="nav md-pills pills-primary flex-column" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#2-panel" role="tab">
Member #00002 (1)
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#1-panel" role="tab">
Member #00001 (13)
</a>
</li>
</ul>
</div>
<div class="col-md-9">
<!-- Tab panels -->
<div class="tab-content vertical">
<!-- Panel 1 -->
<div class="tab-pane fade" id="2-panel" role="tabpanel">
...panel 2 content...
</div>
<!-- Panel 1 -->
<!-- Panel 1 -->
<div class="tab-pane fade" id="1-panel" role="tabpanel">
...panel 3 content...
</div>
<!-- Panel 1 -->
</div> <!-- tab content -->
</div> <!-- col -->
</div> <!-- row -->
<!-- Nav tabs -->
Ideally, this would create a list of users on the left, and (depending on which user was clicked) their applications would populate on the righthand side.
Unfortunately, no matter what user is clicked, it displays the applications of the first user on the list.
Can anyone see what logic is going wrong here?
The only problem which I am seeing here now is panel ids and link to that panel id shouldn't start with a number. Instead, you can use panel-<id>. i.e: panel-1.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<div class="row">
<div class="col-md-3">
<ul class="nav md-pills pills-primary flex-column" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel-2" role="tab">
Member #00002 (1)
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel-1" role="tab">
Member #00001 (13)
</a>
</li>
</ul>
</div>
<div class="col-md-9">
<!-- Tab panels -->
<div class="tab-content vertical">
<!-- Panel 1 -->
<div class="tab-pane active" id="panel-2" role="tabpanel">
...panel 2 content...
</div>
<!-- Panel 1 -->
<!-- Panel 1 -->
<div class="tab-pane fade" id="panel-1" role="tabpanel">
...panel 3 content...
</div>
<!-- Panel 1 -->
</div> <!-- tab content -->
</div> <!-- col -->
</div> <!-- row -->
<!-- Nav tabs -->
I'm having some trouble trying to display multiple images attached to a job post using bootstrap carousal. Here's the original code without the caraousal template:
<% if #job.images.attached? %>
<% (0...#job.images.count).each do |image| %>
<%= image_tag(#job.images[image]) %>
<% end %>
<% else %>
<%= image_tag "missing.jpg" %>
<% end %>
Below is a bootstrap carousal example i used from w3 schools and it works fine when i tested it on my app.
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="item">
<img src="ny.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
So far i've tried :
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<% (0...#job.images.count).each do |image| %>
<li data-target="#demo" data-slide-to=#{image} class="active"></li>
<% end %>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<% (0...#job.images.count).each do |image| %>
<div class="item active">
<%= image_tag(#job.images[image]) %>
</div>
<% end %>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
The images are stacking up against each other, and when i click on the next slide, all the images disappear.I'm not sure exactly what to put in the data-slide classes, i'm suspecting that's the cause of the problem.
UPDATE
This code is working when the image slider automatically plays, but manually clicking on an image slider causes the entire carousal to disappear:
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<% #job.images.each_with_index do |image, index| %>
<li data-target="#demo" data-slide-to=#{index} <%= index == 0 ? 'class="active"' : '' %>></li>
<% end %>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<% #job.images.each_with_index do |image, index| %>
<div class="item <%= index == 0 ? 'active' : '' %>">
<%= image_tag image %>
</div>
<% end %>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Firstly, it looks like you're giving the active class to every image in the slideshow. Secondly, there are easier methods of iterating through your images.
Something like this should work:
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<% #job.images.each_with_index do |image, index| %>
<li data-target="#demo" data-slide-to=#{index} <%= index == 0 ? 'class="active"' : '' %>></li>
<% end %>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<% #job.images.each_with_index do |image, index| %>
<div class="item <%= index == 0 ? 'active' : '' %>">
<%= image_tag image %>
</div>
<% end %>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
I am creating a tabbed login page, so that the user can either log-in or click on other tabs for other info. Here's the code:
<div class="container">
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Log-in</a></li>
<li><a data-toggle="tab" href="#aboutus">What's HooHit?</a></li>
<li><a data-toggle="tab" href="#howworks">How it works!</a></li>
<li><a data-toggle="tab" href="#blog">Blog</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="aboutus" class="tab-pane fade">
<h3>HooHit Logo</h3>
<p>HooHit Pets is an online community...</p>
</div>
<div id="howworks" class="tab-pane fade">
<h3>Steps picture</h3>
<p>You simply upload a picture or video ...</p>
</div>
<div id="blog" class="tab-pane fade">
<br />
<p>...</p>
Click here!
</div>
</div>
</div>
</div>
</div>
The issue I am having is that when I run the code, the tabs don't work. So when I click on the blog tab as an example, the URL on the browser changes to http://localhost:43345/Account/Login2#blog but the tab doesn't change in the view. I can guess the reasoning (i.e. routing in MVC) but am not sure how to fix it. Any ideas?
Code is correct.
You might be missing a Jquery reference needed by boostrap in your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Having trouble implementing Bootstrap Grid System on Rails
I created a partial for sidebar so I wouldn't have to copy it to all of my views. The solution I went for in my
application.html.erb
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-8"><%= yield %></div>
<div class="col-md-4"><%= render 'layouts/sidebar' %></div>
</div>
<!-- /.row -->
</div>
index.html.erb (start)
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div>
<h1 class="my-4">Page Heading
<small>Secondary Text</small>
</h1>
<!-- Blog Post -->
<div class="card mb-4">
<img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
<div class="card-body">
<h2 class="card-title">Post Title</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p>
Read More →
</div>
<div class="card-footer text-muted">
Posted on January 1, 2017 by
Start Bootstrap
</div>
</div>
_sidebar.html.erb
<div>
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
Current Problem
What it should look like--
https://blackrockdigital.github.io/startbootstrap-blog-post/
Solved it by replacing row-fluid from my application.html.erb with just row. If someone could explain to me why that was happening that would really help me a lot on my journey in learning web application development. Thanks!
I've been trying to create a basic portfolio such as this one (www.tommyblue.it) using Locomotive CMS,
I've managed to set up all the needed gems and required programs, mongodb, homebrew etc...
However due to the extreme difficulty of finding decent haml or Locomotive CMS documentation (for a newbie) online I'm stuck with it. My goal would be to have running app before the end of the month, crazy uh?
Any help is truly appreciated.
Basically this is what I'm stuck with atm:
{{ 'js.js' | javascript_tag }}
{{ 'main.js' | javascript_tag }}
{{ 'custom.js' | javascript_tag }}
{{ 'jquery-1.7.1.min.js' | javascript_tag }}
{{ 'jquery.easing.1.3.js' | javascript_tag }}
{{ 'jquery.masonry.min.js' | javascript_tag }}
{{ 'jquery.prettyPhoto.js' | javascript_tag }}
{{ 'jquery.quicksand.js' | javascript_tag }}
{{ 'jquery.tweet.js' | javascript_tag }}
{{ 'modernizr.js' | javascript_tag }}
{{ 'style.css' | stylesheet_tag }}
{{ 'font.css' | stylesheet_tag }}
{{ 'prettyPhoto.css' | stylesheet_tag }}
{{ 'reset.css' | stylesheet_tag }}
{{ 'typography.css' | stylesheet_tag }}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
{{ Design.Diverso }}
</head>
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
<div class="body-inside">
<!-- begin header -->
<header id="header">
<!-- begin slider -->
<div id="f_slider">
<div class="slider">
<ul>
<li>
<div class="row">
<h5>HELLO,</h5>
<h2>WELCOME TO <span class="h_black">NONAME</span></h2>
</div>
<div class="row">
<h4>
Enjoy our company For the design & production of all manner of digital creative.
</h4>
</div>
</li>
<li>
<div class="row text-center">
<h2>Enjoy <span class="h_black"> our </span>company </h2>
</div>
<div class="row one-half text-right">
<h4>Who we are</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consecadipiscing elit. Duis nec purus tellus, quis pulvinar tortor.
Lorem ipsum dolor sit amet, consecadipiscing elit.
</div>
</div>
<div class="row one-half last">
<h4>What we've done</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consecadipiscing elit. Duis nec purus tellus, quis pulvinar tortor.
Lorem ipsum dolor sit amet, consecadipiscing elit.
</div>
</div>
<span class="clear"></span>
</li>
<li>
<div class="row one-half text-right">
<h2> we make </h2>
<h2> it <span class="h_black">better</span></h2>
</div>
<div class="row one-half last">
<h4>Lorem ipsum dolor</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis, a adipiscing diam ipsum in enim. Donec hendrerit dictum quam, a tincidunt neque vulputate nec.
<div>
{{ 'html5_logo.png' | theme_image_tag }}
{{ 'css3_logo.png' | theme_image_tag }}
{{ 'jquery_logo.png' | theme_image_tag }}
</div>
<span class="clear"></span>
</li>
</ul>
</div>
</div>
<!-- end slider -->
<!-- begin navigation -->
<nav id="top_menu">
<div class="inside">
<!-- logo -->
<a href="#" class="logo">
{{ 'logo.png' | theme_image_tag }}
</a>
<!-- begin menu -->
<ul class="menu">
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="works.html">
Works
</a>
</li>
<li>
<a href="blog.html">
Blog
</a>
<ul>
<li>Single Post</li>
</ul>
</li>
<li>
<a href="services.html">
Services
</a>
</li>
<li>
About Us
</li>
<li>
<a href="#">
Features
</a>
<!-- begin sub menu -->
<ul>
<li>
<a href="typography.html">
Typography
</a>
</li>
<li>
<a href="columns.html">
Columns
</a>
</li>
<li>
<a href="elements.html">
Elements
</a>
</li>
<li>
<a href="team.html">
Our Team
</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
</ul>
<!-- end menu -->
</div>
</nav>
<!-- end navigation -->
</header>
<!-- end header -->
<!-- begin main -->
<article id="main">
<!-- Begin ajax menu -->
<nav id="to-top-menu">
<span></span>
</nav>
<!-- end ajax menu -->
<ul class="fast_link">
<li class="">
<div class="link_wrap" data-link="works">
<div class="link_title">
<h2>OUR WORKS</h2>
<p>Recent Projects</p>
</div>
{{ 'a_works.png' | theme_image_tag }}
{{ 'a_works_hover.png' | theme_image_tag }}>
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="blog">
<div class="link_title">
<h2>BLOG</h2>
<p>From the Blog</p>
</div>
{{ 'a_blog.png' | theme_image_tag }}
{{ 'a_blog_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="services">
<div class="link_title">
<h2>SERVICES</h2>
<p>What we do</p>
</div>
{{ 'a_service.png' | theme_image_tag }}
{{ 'a_service_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="team">
<div class="link_title">
<h2>THE TEAM</h2>
<p>Meat the team </p>
</div>
{{ 'a_team.png' | theme_image_tag }}
{{ 'a_team_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="last">
<div class="link_wrap" data-link="contact">
<div class="link_title">
<h2>CONTACT</h2>
<p>Get in touch</p>
</div>
{{ 'a_contact.png' | theme_image_tag }}
{{ 'a_contact_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
</ul>
<span class="clear"></span>
<!-- home page title -->
<nav class="page_title displaynone">
<h2>
<span class="title">PLACE SELECT A PAGE</span>
<span class="loading_link"></span>
</h2>
</nav>
<!-- callback ajax content -->
<section id="content">
</section>
<span class="clear"></span>
</article>
<!-- end main -->
</div>
<!-- end body inside -->
<!-- begin footer -->
<footer id="footer">
<div class="inside">
<div class="footer-widget">
<div class="one-third">
<h2>Follow Us</h2>
<p>
Omnes enim peccaverunt et egent gloriam Dei. In principio creavit Deus caelum et terram.
</p>
<ul class="footer-socials">
<li class="rss"></li>
<li class="twitter"></li>
<li class="facebook"></li>
<li class="dribbble"></li>
<li class="vimeo"></li>
<li class="skype"></li>
</ul>
<span class="clear"></span>
</div>
<div class="one-third">
<h2>About Us</h2>
<p>{{ 'logo.png' | theme_image_tag }}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis, a adipiscing diam ipsum in enim. Donec hendrerit dictum quam, a tincidunt neque vulputate nec. Proin nec sollicitudin augue. Donec hendrerit</p>
</div>
<div class="one-third last">
<h2>Join our newsletter</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis.</p>
<form id="form_newslatter">
<input type="text" name="newslatter" id="newslatter" placeholder="Email Address..." />
</form>
</div>
<span class="clear"></span>
</div>
<div class="footer-bottom">
<span class="copyright">© 2012 · AGT NoName ( Valid html5 ) All Rights Reserved</span>
<nav id="footer_menu">
<ul>
<li>Home</li>
<li>Works</li>
<li>Blog</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</footer>
<!-- end footer -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</body>
</html>
You might want to use twitter bootstrap as your theme for it includes a pretty nice and lighweight carousel and create a Photos model with a file and description fields then in your page implement somthing like this in locomotive:
{% for photo in contents.photos %}
<li>
{{ photo.fichier.url | image_tag }}
</li>
{% endfor %}
This is an example, don't just copy and paste since I'm using this with fundation as a theme and lightbox for photos.
Let me know if you need further explanation (I don't have time right now).
I think you should read this stuff carefully http://doc.locomotivecms.com/installation/getting_started
Also I have the clue you are mixing 2 things at this very moment:
CMS is explained as Content Management System therefor you will be able to Manage your Content with this System ;)
Ruby on rails is the main web development tool you use to build the housing of your website in the so called server side and client side.
So try to make a website in Ruby on Rails first. then add your CMS system to it and that should do it.