Website local restaurant / indoor playground

[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

Page 'feest -> kinderfeestjes'

Choose background color, column, image and of course content.

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.

Page 'menukaart -> pizza'

Provide name, ingredients, price and category.

Page 'contant'

Openingstijden (visiting hours)

General: multiple page templates. Use of template inheritance.
Must read: http://www.i-do-this.com/blog/Smarty-te ... -Simple/57

[Stikki]

Nice one. Really like the design. And seems baby is in good use. Props from design and execution.

Cheers.

[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

[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.

[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).

[hasanen]

Looking nice!

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

[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>