aurinko
Reputation: 11
Creating basic portfolio website using Locomotive CMS (Ruby on rails, haml)
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, <a href="#">consecadipiscing</a> 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><a href="blog_post.html" title="Single Post">Single Post</a></li>
</ul>
</li>
<li>
<a href="services.html">
Services
</a>
</li>
<li>
<a href="about.html">About Us</a>
</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"><a href="#" title="Rss"></a></li>
<li class="twitter"><a href="#" title="Twitter"></a></li>
<li class="facebook"><a href="#" title="Facebook"></a></li>
<li class="dribbble"><a href="#" title="Dribbble"></a></li>
<li class="vimeo"><a href="#" title="Vimeo"></a></li>
<li class="skype"><a href="#" title="Skype"></a></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 ( <a href="http://validator.w3.org/check?uri=http://demo.agtheme.com/noname" title="Valid html5"> Valid html5 </a> ) All Rights Reserved</span>
<nav id="footer_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></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>
Upvotes: 0
Views: 3661
Answers (2)
Manuite
Reputation: 46
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>
<a href='{{ photo.fichier.url | resize: '800x600' }}' title="{{ photo.legende }}">{{ photo.fichier.url | image_tag }}</a>
</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).
Upvotes: 1
dennis
Reputation: 2020
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.
Upvotes: 0
Related Questions
- Installing a CMS Engine with Ruby on Rails. (Locomotive)
- Integrated CMS Based Off Model for Rails
- How to make a website on Ruby on Rails using Locomotive CMS (or any other) ?
- Locomotive CMS with Rails - location for liquid templates
- How to setup a basic Locomotive CMS plugin
- Ruby on rails, building a simple portfolio page
- Rails suggestion for building of website
- Rails 3 flexible CMS framework
- Ruby on Rails simple website layout
- Newbie Web Designer needing Advice for Ruby on Rails