Two sites, one responsive template, ajax

[velden]

Recently launched two sites:

https://tinyurl.com/q3dyq5s
https://tinyurl.com/pg3emld

Template is bought for 14$ and named 'Metrika'. It's customized to look and work like it does now. I found out it was a lot of work to make some small changes. Changing the margin between the tiles had to be checked and altered for every media query. Some javascript had to be changed too.

The website is 'ajaxified'. That is, when clicking the tiles, content is loaded via ajax request and displayed without reloading the page (and stored in case visitor 'opens' pages more often during one session).

Though the menu is ajaxified, the pages are reachable by their regular urls. I thought this would be good and simple for SEO as e.g. Google can index all pages by their urls (and it seems to work). It was however pretty difficult (and ugly) to find a way that the page template served both partial pages (content only for ajax requests) and full pages (including head and body tags etc for direct page requests).

Further, both sites are managed by one CMSMS instance. Note that it's not supported and I wouldn't recommend it anyway. I had to overcome some small 'multi-domain issues' and couldn't solve all of them.

Nice feature of this website is the color that can be set by the editor per page. It reflects the color of the menu tile as well as the background of the page itself. I used the ECB module for it.

_showoff_color_picker.jpg (14.92 KiB) Viewed 4924 times

CMSMS 1.11.10

Extra modules:
CGExtensions 1.38.5
CGSimpleSmarty 1.7.2
ECB 1.5

ps. Merry christmas

[vinyl]

Nice clean look to them. Like it!

Only comments I have is that there is no menu on child pages and SEO wise it is not very good.

[velden]

As I got some questions about how this menu can be created dynamically I post the menu template code below.

Note it reads the colors from the corresponding pages. I use the ECB module for it and this code in the page template:

Code: Select all

{content_module module="ECB" field="color_picker" block="page_bg" label="Page background color - default value = 697890" default_value="#697890" assign='page_bg'}

Sub text in tiles:

Code: Select all

{content block="menu_subtext" assign="menu_subtext" label="Sub text in tiles"}

Menu template (I removed some strip tags from the original code I had)

Code: Select all

{* 

### CMSMS Menu template for Metrika template ###

# requirements:
CGSimpleSmarty
CGExtensions
ECB module (color picker, http://www.i-do-this.com/blog/Add-color-pickers-to-your-website/57)


### Menu block types ###
Type 1:	      Type 2:
+----------+  +---------+
| 1a       |  | 2a      |
|          |  +---------+
|          |  +---------+
|          |  | 2b      | 
+----------+  +---------+ 
           
Type 3A:     Type 3B:  
+---+ +---+  +---------+
|3Aa| |3Ab|  |  3Ba    | 
+---+ +---+  +---------+
+---------+  +---+ +---+
| 3Ac     |  |3Bb| |3Bc|
+---------+  +---+ +---+

Type 4:
+---+ +---+
|4a | |4b |
+---+ +---+
+---+ +---+
|4c | |4d |
+---+ +---+

Menu supports only one level! {menu number_of_levels=1}
Every ROW has MAX 3 blocks
!!! Currently only supports nodes of type 'content' and 'separator' !!!

A block can have 1,2,3 or 4 menu items.
Every block is separated by a CMSMS separator (content) 
Layout of menu items is determined by number of items in block.
If 3 items in a block, menu will cycle to Type 3A,3B,3A,3B etc.

Color of menu item is determined by color picker content block in content page
 
 *}
{if $count > 0}
<!--Navigation-->
<nav class="navi row-fluid">
{* counter for menu blocks (max 3 per row) *}
{$menuBlock=0}

{* variable to store nodes while waiting for separator *}
{$tmpnodes=null}

{* loop full menu  *}
{foreach from=$nodelist item=node} 
  {* if not separator and not last node then store node in tmp array *}
  {if $node->type == 'content' && !$node@last}
    {$tmpnodes[]=$node}

	{elseif ($node->type == 'separator' && $tmpnodes != null) || $node@last}
	  {* make sure to get last content node too UNLESS it is a separator. That should not be there anyway *}
      {if $node@last && $node->type != 'separator'}{$tmpnodes[]=$node}{/if}
	  
	  {* increment menu block counter *}
	  {$menuBlock=$menuBlock+1}
	  
	  {* if menu block counter is 4, 7, 10 etc start a new row. Close old row expect for first cycle of course *}
	  {if $menuBlock % 3 == 1}
	    {if $menuBlock > 1}
  </div>
 </div>{/if}
 <div class="container">
  <div class="span12 clearfix">{/if}
    {* count menu items in block *}
    {$blockItemCount = count($tmpnodes)}
	{* print error if > 4 *}
	{if $blockItemCount > 4}MEER DAN 4 MENU ITEMS IN BLOK!{break}{/if}
	
	{* set blockType: 1,2,3A,3B or 4 *}
	{if $blockItemCount == 3}
	  {$blockType="3{cycle name='menu3' values='A,B'}"}
	{else}	  {$blockType=$blockItemCount}
	{/if}  
	{* class for whole block *}
	{$menuBlockClass="menu-block-type-{$blockType}"}
   <div class="span4 {$menuBlockClass}">
      {* iterate menu items for current block *} 
	  {foreach from=$tmpnodes item=tmpnode}
	    {* class for this menu item navi-type-x. x = 1a,2a,2b,3Aa,3Ab,3Ac,3Ba,3Bb,3Bc,4a,4b,4c or 4d *} 
	    {$naviclass = "navi-item navi-type-{$blockType}{cycle name='menu_item_type' values='a,b,c,d'}"}
		{* get color for this menu item  *}
		{cgsimple::get_page_content($tmpnode->alias,'page_bg','page_bg')}
{cgsimple::get_page_content($tmpnode->alias,'menu_subtext','menu_subtext')}
     <a class="{$naviclass} page-transition" href="{$tmpnode->url}" title="{$tmpnode->menutext}" style="background-color : {$page_bg}"><span class="center-navi"><i>{$tmpnode->menutext}</i><span class="menu-subtext">{$menu_subtext}</span></span></a>
	  {/foreach}
   </div>	  
    {* reset cycle for next block iteration *}
	{cycle name='menu_item_type' values='a,b,c,d' reset=true print=false advance=false}
	{* empty array with block nodes *}
	{$tmpnodes=null}
  {/if} {* node type *}
{/foreach}
  </div>
 </div> 
</nav>
{/if}{* count > 0 *}

Code above combined with the live website should enable one to create a similar menu. Note the template itself is not free and should be bought if used.