Page 1 of 1

Website local restaurant / indoor playground

Posted: Sun Apr 27, 2014 9:47 am
by velden
Recently brought online.
http://tinyurl.com/nxcbtad

Design comes from design company.

Cms Version: 1.11.10
Installed Modules (not core):

CGSimpleSmarty: 1.7.2
CGExtensions: 1.38.6
CGSmartImage: 1.16.1
ListIt2: 1.4.1
ListIt2XDefs: 1.2
GBFilePicker: 1.3.3

Lot of effort to make it as flexible as possible for the owner to change content. Some example screenshots of backend below.

Page 'spelen': slider
Max 4 images that can be choosen/uploaded. Automatic cropping by CGSmartImage
cms_showoff_slider.jpg
Page 'feest -> kinderfeestjes'

Choose background color, column, image and of course content.
cms_showoff_li2_kinderfeest.jpg
Page 'menukaart -> dranken'

Provide name and price. Conditionally euro-sign is used on frontpage (if price starts with a digit). Automatically distribute categories between the 3 columns.
cms_showoff_li2_dranken_overview.jpg
Page 'menukaart -> pizza'

Provide name, ingredients, price and category.
cms_showoff_li2_pizza.jpg
Page 'contant'

Openingstijden (visiting hours)
cms_showoff_li2_openingstijden.jpg
General: multiple page templates. Use of template inheritance.
Must read: http://www.i-do-this.com/blog/Smarty-te ... -Simple/57
cms_showoff_template_inheritance.jpg

Re: Website local restaurant / indoor playground

Posted: Sun Apr 27, 2014 10:22 pm
by Stikki
Nice one. Really like the design. And seems baby is in good use. Props from design and execution.

Cheers.

Re: Website local restaurant / indoor playground

Posted: Sun Apr 27, 2014 11:21 pm
by paulbaker
Great visual design, but even better to see the backend and how some of it works. Super use of ListIt2 and how the content is kept completely separate to the design.

Nice one O0

Re: Website local restaurant / indoor playground

Posted: Wed May 14, 2014 2:37 am
by tbunt
Nice work, stunning design. I will be developing a single page site soon, seeing this gives me confidence it can be done in CMSMS.

Re: Website local restaurant / indoor playground

Posted: Wed May 14, 2014 8:13 am
by velden
Thanks (note that design is not mine).

This website is not a one-pager by the way. It could have been, but I choose to make it this way because I had limited resources (budget/time).

It's not that hard to make it a one pager though it will take a lot of work to make it SEO friendly etc. (I think).

Re: Website local restaurant / indoor playground

Posted: Thu May 15, 2014 8:09 am
by hasanen
Looking nice!

How did you do that "Silder"-tab for content (in first pic)?

Re: Website local restaurant / indoor playground

Posted: Thu May 15, 2014 8:18 am
by velden
Thanks.

To get the tab just add tab="Slider" to the {content... } tag

I use GBFilePicker module for the selection of files.
CGSmartImage module is used for image resizing/cropping.

Code: Select all

{content_module block="filepicker_block_slider_1" module="GBFilePicker" assign="slider_image1" label="Afbeelding 1 slider" tab="Slider" mode="browser" media_type="image" dir="images"}
{content_module block="filepicker_block_slider_2" module="GBFilePicker" assign="slider_image2" label="Afbeelding 2 slider" tab="Slider" mode="browser" media_type="image" dir="images"}
{content_module block="filepicker_block_slider_3" module="GBFilePicker" assign="slider_image3" label="Afbeelding 3 slider" tab="Slider" mode="browser" media_type="image" dir="images"}
{content_module block="filepicker_block_slider_4" module="GBFilePicker" assign="slider_image4" label="Afbeelding 4 slider" tab="Slider" mode="browser" media_type="image" dir="images"}

...


<div id="slider" class="cycle group">  
  <div class="slider-image-container">
    {if $slider_image1}{CGSmartImage src=$slider_image1 filter_croptofit='695,299,,1' noembed=1 alt="" class="slide-item"}{/if}
{if $slider_image2}{CGSmartImage src=$slider_image2 filter_croptofit='695,299,,1' noembed=1 alt="" class="slide-item"}{/if}
{if $slider_image3}{CGSmartImage src=$slider_image3 filter_croptofit='695,299,,1' noembed=1 alt="" class="slide-item"}{/if}
{if $slider_image4}{CGSmartImage src=$slider_image4 filter_croptofit='695,299,,1' noembed=1 alt="" class="slide-item"}{/if}
     <div id="pager">
           <ul id="pager-ul"> </ul>
        </div>
  </div>