Italian Restaurant with CMS Made Simple
Posted: Wed Jun 23, 2010 6:30 pm
Here is an example of a restaurant site I just did that uses CMS Made Simple with JQuery and a nice slider.
I made it a one-page site, but each tab and image has a content block or content_image block.
http://figaredos.com/
The Menu page and also the Gallery page are both done with Jost's Gallery module.
The menu page can only show three Entrees at a time, so I call gallery with action="random". I use the image title for the entree title, comment as the description, and obviously the gallery image for the thumbnail.
I would have used Calguy's Google Maps module for a Google map, but I've found that Google Maps Iframes don't play well with Javascript sliders, so I used an external link.
For this site I modified the Boutique theme from themeforest.
Theme Forest Boutique Theme
I offer my clients the option of paying up front, or paying an increased monthly hosting fee for as long as they have the site. So this client chose the monthly fee and got this site for only $50/month including hosting and domain registration.
For more information on what I did for this client you read my blog post here:
Figaredo's Italian Restaurant
Here are the templates if you are interested in trying this kind of thing yourself:
Main Page Template
Gallery Template
I made it a one-page site, but each tab and image has a content block or content_image block.
http://figaredos.com/
The Menu page and also the Gallery page are both done with Jost's Gallery module.
The menu page can only show three Entrees at a time, so I call gallery with action="random". I use the image title for the entree title, comment as the description, and obviously the gallery image for the thumbnail.
I would have used Calguy's Google Maps module for a Google map, but I've found that Google Maps Iframes don't play well with Javascript sliders, so I used an external link.
For this site I modified the Boutique theme from themeforest.
Theme Forest Boutique Theme
I offer my clients the option of paying up front, or paying an increased monthly hosting fee for as long as they have the site. So this client chose the monthly fee and got this site for only $50/month including hosting and domain registration.
For more information on what I did for this client you read my blog post here:
Figaredo's Italian Restaurant
Here are the templates if you are interested in trying this kind of thing yourself:
Main Page Template
Code: Select all
{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{title} :: {sitename}</title>
{metadata}
{stylesheet}
{global_content name='scripts'}
<link rel="icon" type="image/png" href="./favicon2.png" />
</head>
</__body>
<div id="pagewrapper">
<div id="pagebg">
<div id="content">
<div id="left"> <!-- Left Part of the Page -->
<ul id="pageitem"><!-- Different Pages listed by <li> elements -->
<li>{content_image block='Home Banner' dir='images/banners'}</li>
<li>
<h2>Featured Entrees</h2>
<div class="tabcontent">
{Gallery dir='Menu' number='3' action='showrandom'}
<a class="menuLink" href="./uploads/menu.pdf">Click for Full Menu</a>
</div>
</li>
<li>
{content_image block='Wine List Banner' dir='images/banners'}
<h2>Featured Wines</h2>
<div class="tabcontent">
{content block='Wines'}
<a class="menuLink" href="./uploads/winelist.pdf">Click for Complete Wine List</a>
</div>
</li>
<li>
<h2>Photo gallery</h2>
<div class="tabcontent">
<div class="gallery">
{Gallery number='9' action='showrandom'}
</div>
</div>
</li>
<li>
{content_image block='About Banner' dir='images/banners'}
<h2>About us</h2>
<div class="tabcontent">
<div class="contactleft">{content block='About Us Left'}</div>
<div class="contactright">{content block='About Us Right'}</div>
</div>
</li>
<li>
{content_image block='Specials Banner' dir='images/banners'}
<h2>Specials</h2>
<div class="tabcontent">
{content block='Specials'}
</div>
</li>
<li>
{content_image block='Hours Banner' dir='images/banners'}
<h2>Hours</h2>
<div class="tabcontent">
{content block='Hours'}
</div>
</li>
<li>
{content_image block='Contact Us Banner' dir='images/banners'}
<h2>Contact Us</h2>
<div class="tabcontent">
<div class="contactleft">
{FormBuilder form='contact'}
</div>
<div class="contactright">
{content block='Contact Info'}
</div>
</div>
</li>
</ul>
</div><!-- End of Left Part of the Page -->
<div id="right"><!-- Right Part of the Page -->
<div id="logo"><h1>{sitename}</h1></div><!-- close #logo /-->
<div class="menu" id="pageitem-menu"> <!-- PageNavigation -->
<ul>
<li><a class="" href="#pageitem-1">Home</a></li>
<li><a class="" href="#pageitem-2">Menu</a> </li>
<li><a class="" href="#pageitem-3">Wine List</a> </li>
<li><a class="" href="#pageitem-4">Photo Gallery</a> </li>
<li><a class="" href="#pageitem-5">About Us</a> </li>
<li><a class="" href="#pageitem-6">Specials</a> </li>
<li><a class="" href="#pageitem-7">Hours</a> </li>
<li><a class="" href="#pageitem-8">Contact Us</a> </li>
<li><a target="_blank" href="http://maps.google.com/maps/place?cid=1597741345934048413&q=figaredos+italian+restaurant+abingdon+va&hl=en&cd=1&ei=pRIiTOr7FISuNc7X6PII&sig2=Cu-0GOkX5e9GNshkxbEiKw&sll=36.71226,-81.995086&sspn=0.006295,0.039023&ie=UTF8&ll=36.715813,-82.00206&spn=0,0&z=17">Directions</a></li> </ul>
</div>
<!-- End of Left Part of the Page -->
</div>
</div>
</div>
</div>
<div id="copyright"> Copyright © {custom_copyright} Santiago Figaredo</div>
{literal}
<__script__ type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</__script>
{/literal}
<__body>
</__html>
Code: Select all
{foreach from=$images item=image}
<a class="group" rel="gallery" href="{$image->file}" title="{$image->title}" rel="gallery"><img src="{$image->thumb}" alt="{$image->title}" width="150" height="120" /></a>
{/foreach}