CMS Made Simple 1.10 Site

[kendo451]

I just completed this HTML5 site powered by CMS Made Simple 1.10 for a real estate rental company.
figenterprises.net

Graphics & CSS:

I modified the QuickStart Theme from themeforest.net. First I converted it to HTML5 using Paul Irish's HTML5 Boilerplate, then I adapted it to CMS Made Simple.

The client prefers 768px screen width on his PC, so I had the challenge of making this site look decent on normal width screens as well as small screen.

The client did not want to give up his clip-art logo, or his clip art junkyard on the Property Management page. Some things you just can't change...

I used CSS Media Queries to make the site adaptable to either screen width. (Sorry no mobile.)

Using AdvancedContent Module allowed me to make one template that works for all the page types with a couple of checkboxes for things like the slider.

The real estate properties are stored in Calguy's Products module, and I used several of Goran Illic's techniques from i-do-this.com, including:

• Put Your Site on Steroids
• Put Your Meta Tags on Autopilot
• Adjustable Sidebar Blocks Using Advanced Content

The Homepage slider is made with JqueryTools Scrollable Plugin (not the JQueryTools module).

One challenge was dealing with the fact that the old site (also using Products module) had small images for each property. I needed a way to upscale the images to make them fit the slider dimensions, so I used CGSmartImage Module's filter_croptofit to do this. However, the latest version of the module has removed the ability to upscale.

Unfortunately, none of CMS Made Simple's Google Maps modules seem to be up to date, so I just used a Jquery plugin called Gmap and did some direct manipulation of the Google Maps API.

SEO:

I used microdata formatting from Schema.org in order to set up the SEO for the individual property listings, as well as the contact page.

SitemapMadeSimple by Calguy is doing the sitemap.xml file, with a custom summary template for the Products module.

My RSS isn't quite working right as CGFeedMaker is not working right with the current version of PrettyURL's but it will be fixed soon.

On the product detail pages, I automated the construction of sensible <meta description> tags because summaries of the first 40 words of page content usually don't tell you much. So here is how I did that:

Code: Select all

{* Set standard description *}
{capture assign='meta_desc'}
{strip}
{if $entry->categories.0->name != 'Mobile Lot' && $entry->categories.0->name != 'Commercial'}
{$entry->fields.num_bedrooms->value} bed, {$entry->fields.num_bath->value} bath {$entry->categories.0->name} f
{else}F{/if}
or rent at {$full_address} for ${$entry->price}/mo with {$entry->fields.deposit->value}.  Map and photos.
{/strip}
{/capture}

The result looks like this:

Code: Select all

<meta name="description" content="2 bed, 1 bath Single Wide for rent at 210 East 29th St, Big Stone Gap, Virginia for $350/mo with $350.00 Minimum Performance Deposit. Map and photos.">

I think this tells the person searching on Google or Bing almost all the important details in less than 40 words.

Page Loading Optimization
Jeremy Bass's ScriptDeploy Module is combining and compressing my Javascript.

CMS Made Simple 1.10's css_stylesheet is combining my CSS, and using [[strip]] tags to pseudo-minify it.

Making a Bullet Box with AdvancedContent

One challenge was making a box that would have bullets as seen on the intro and fpm pages. Problem is that you cannot trust a client not to screw up a uniform list if they have access to the raw html in a content block.

The way I solved this was as follows:

I made one content block for each bullet list, but turned off the wysiwyg and included a label that says: "end each item with a period."

Then using the SMARTY Modifier "explode" I convert the text block into an array of items, which I can then use a foreach loop to wrap a <li> tag around each one, and put the period back on the end.

Code: Select all

{if $bullet_box_on}				 
         <div id="map_bg">
            <div id="map_wrapper" class="clear_fix">
               <ul>
                  <li class="list_title">
                     <h2>
                     {* Bullet Box Left Title *}
                     {content block='bullet_title_left' label='Bullet Section Title' 
                      description='Use <span>tag</span> to make words red.'
                      oneline='true' block_group='Bullet Box'}
                     </h2>
                  </li>
					{* Bullet Box Left List *}
                  {content block='bullet_list_left' label='Bullet List Left'
                  	description='<b>Important: Use a period after every item.</b>'
                    	wysiwyg='false' block_group='Bullet Box' assign='bullets_left'}
                   
                  {assign var='bullets_left' value="."|explode:$bullets_left}
                  {foreach from=$bullets_left item='bullet' name='bullet'}
                  	{if ! $smarty.foreach.bullet.last}<li>{$bullet}.</li>{/if}
                   {/foreach}      

               </ul>
               <ul>
                  <li class="list_title">
                     <h2>
                     {* Bullet Box Right Title *}
                     {content block='bullet_title_right' label='Bullet Section Title' 
                      description='Use <span>tag</span> to make words red.'
                      oneline='true' block_group='Bullet Box'}
                     </h2>
                  </li>
					 {content block='bullet_list_right' label='Bullet List Right'
                  	description='<b>Important: Use a period after every item.</b>'
                    	wysiwyg='false' block_group='Bullet Box' assign='bullets_right'}
                  {assign var='bullets_right' value="."|explode:$bullets_right}
                  {foreach from=$bullets_right item='bullet' name='bullet'}
                  	{if ! $smarty.foreach.bullet.last}<li>{$bullet}.</li>{/if}
                   {/foreach}      
               </ul>
            </div>
         </div>
         <div class="basic_style_1">
         {content block='bullet_box_after' label='Content Block After Bullet Box'
         	description='Use this if you want to continue your text below the bullet box.'
            block_group='Bullet Box'}
         </div>
		{/if}

JQuery Disabled Content Blocks

I used a technique invented by George Busch (NaN) to inject some javascript into the admin panel by calling a UDT from the description parameter. This allows hiding content blocks for which the checkbox has not been ticked on the Layout tab.

Page Template:

Code: Select all

{strip}
{process_pagedata}

{title assign='page_title'}

{content block='meta_desc' assign='meta_desc' wysiwyg='false' default=''
	label='Meta Description' rows='4' 
	description='40 word description of this page that will show on Google results.'}

{content assign='page_content' label='Main Content' block_group='Main Content' 
	rows='10' no_collapse=true}
    
{content assign='slider_on' block='slider_on' block_type='checkbox' 
	label='Turn on Property Slider?' default=false page_tab='Layout'}

{content assign='bullet_box_on' block='bullet_box_on' block_type='checkbox' 
	label='Turn on Bullet Box?' description=":::change_input control_who='bullet_box_on'
control_what='Bullet Box':::" default=false page_tab='Layout' smarty='true'}
    
{content assign='bottom_blocks_on' block='bottom_blocks_on' block_type='checkbox' 
	label='Turn on Bottom Blocks?' default=false page_tab='Layout'
    description=":::change_input control_who='bottom_block_on'
control_what='Bottom Blocks':::"}    
   
{* define content block and assign it's content to a variable *}
{content block='global_content_blocks' page_tab='Layout' block_type='select_multiple' sortable='true' items=":::get_gcb_list delimiter='|' output='name' incl_prefix='quickstart_sb_' :::" assign='global_content_blocks' 
default='quickstart_sb_citysearch|quickstart_sb_cats|quickstart_sb_available' 
smarty=true}


<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 
<!--[if lt IE 7 ]> <__html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <__html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <__html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <__html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <__html lang="en" class="no-js"> <!--<![endif]-->
{/strip} 
<head>
{global_content name='quickstart_head'}
</head>
</__body>
{strip}
<div id="wrapper">
   <header>
      <h1>
        <a href="index.html"><span class="hide_this">{sitename}</span></a>
        <span class="hide_this">{title}</span>
			</h1>
      {* Header Info Text on Right Side *}      
      {global_content name='quickstart_info'}
   </header> 
   	{* Main Menu *}
  	{menu template='QuickStartTopMenu'}
   <div id="main_content" class="clear_fix">
      <div id="column_left">
      
      {if $slider_on > 0}
      
      {* Insert Slider Container As Placeholder *}
      {* Slides will be inserted by AJAX *}
      <div id="featured_slider"></div>
      
      {/if}
         
				 <div class="basic_style_1">
                 <h1 class="page_title">{$page_title}</h1>
                 	{* Main Content Block *}
					{$page_content}
				 </div>

		{if $bullet_box_on}				 
         <div id="map_bg">
            <div id="map_wrapper" class="clear_fix">
               <ul>
                  <li class="list_title">
                     <h2>
                     {* Bullet Box Left Title *}
                     {content block='bullet_title_left' label='Bullet Section Title' 
                      description='Use <span>tag</span> to make words red.'
                      oneline='true' block_group='Bullet Box'}
                     </h2>
                  </li>
					{* Bullet Box Left List *}
                  {content block='bullet_list_left' label='Bullet List Left'
                  	description='<b>Important: Use a period after every item.</b>'
                    	wysiwyg='false' block_group='Bullet Box' assign='bullets_left'}
                   
                  {assign var='bullets_left' value="."|explode:$bullets_left}
                  {foreach from=$bullets_left item='bullet' name='bullet'}
                  	{if ! $smarty.foreach.bullet.last}<li>{$bullet}.</li>{/if}
                   {/foreach}      

               </ul>
               <ul>
                  <li class="list_title">
                     <h2>
                     {* Bullet Box Right Title *}
                     {content block='bullet_title_right' label='Bullet Section Title' 
                      description='Use <span>tag</span> to make words red.'
                      oneline='true' block_group='Bullet Box'}
                     </h2>
                  </li>
					 {content block='bullet_list_right' label='Bullet List Right'
                  	description='<b>Important: Use a period after every item.</b>'
                    	wysiwyg='false' block_group='Bullet Box' assign='bullets_right'}
                  {assign var='bullets_right' value="."|explode:$bullets_right}
                  {foreach from=$bullets_right item='bullet' name='bullet'}
                  	{if ! $smarty.foreach.bullet.last}<li>{$bullet}.</li>{/if}
                   {/foreach}      
               </ul>
            </div>
         </div>
         <div class="basic_style_1">
         {content block='bullet_box_after' label='Content Block After Bullet Box'
         	description='Use this if you want to continue your text below the bullet box.'
            block_group='Bullet Box'}
         </div>
		{/if}
        
        {if $bottom_blocks_on}
		{* Preview Bottom Blocks *}
         <ul id="preview_1" class="clear_fix">
            <li>             
            <img src="{root_url}/uploads/{content_module module='GBFilePicker' block='LeftBlockIcon' 
            	label='Left Block Icon' mode='browser' dir='images/icons' upload='true' 
                delete='true' block_group='Bottom Blocks'}" width="85" height="85" alt="" class="preview_desc_icon" />
               <div class="preview_desc">
               <h2>{content block='Left Block Title' oneline='true' block_group='Bottom Blocks'}</h2>
								{content block='Left Block' block_group='Bottom Blocks' rows='8'}
{content block='LeftBlockMoreLink' label='Left Block Link' description='Page alias for the Read More link.' default='fpm' assign='left_more_link' block_group='Bottom Blocks' oneline='true'  wysiwyg='false'}
<a href="{cms_selflink href=$left_more_link}" class="button_read_more"><span class="hide_this">Read More</span></a>
               </div>
            </li>
            <li> <img src="{root_url}/uploads/{content_module module='GBFilePicker' block='RightBlockIcon' 
            	label='Right Block Icon' mode='browser' dir='images/icons' upload='true' 
                delete='true' block_group='Bottom Blocks'}" width="85" height="85" alt="" class="preview_desc_icon" />
               <div class="preview_desc">
               <h2>{content block='Right Block Title' oneline='true' block_group='Bottom Blocks'}</h2>
{content block='Right Block' block_group='Bottom Blocks' rows='8'}
{content block='RightBlockMoreLink' label='Right Block Link' description='Page alias for the Read More link.' default='fpm' assign='right_more_link' block_group='Bottom Blocks' oneline='true' wysiwyg='false'}
<a href="{cms_selflink href=$right_more_link}" class="button_read_more"><span class="hide_this">Read More</span></a>

               </div>
            </li>
         </ul>
         {/if}
         
      </div> {* /column_left *}
      
      <div id="column_right">
      	{* Sidebar *}
        {global_content name='quickstart_sidebar'}
      </div> {* /column_right *}
   </div>
</div>

{* Footer *}
{global_content name='quickstart_footer'}

{* Scripts *}
{global_content name='quickstart_jscripts'}
{/strip}
<__body>
</__html>

[Dr.CSS]

Home page graphic link, logo in top left corner, gives...

Content Encoding Error
The page you are trying to view cannot be shown because it uses an invalid or unsupported form of compression.

[kendo451]

Thanks, Doc!

[uniqu3]

Looks cool and great write up/explanation here
Regarding google maps you could of tried gmaps plugin
I see you used supersizer on some pages, is description here about smartimage a typo or did you use both?
If both maybe an overload? One would of been enough and you could also enable base64 images on Properties summary page to reduce requests.

Regarding logo and client wishes, yeah we have all been through this but i kind of like that logo, maybe i would of been that crazy and pushed the whole site in that drawing direction.

[kendo451]

Hi Goran,

I did use both SuperSizer and CGSmartImage but only because I needed to do two things and neither could do both.

A. I needed CGSmartImage for the CropToFit filter and to upscale the images that were too small. To achieve the same task with Supersizer takes two passes and even then I could not control which part of the picture it cropped off very well.

B. I needed SuperSizer because this site is four years old, and the client had uploaded over a Gigabyte worth of pictures in Products. About half of these were raw from the camera, and I needed to overwrite the originals. Can't do that with CGSmartImage, but Supersizer has an overwrite option.

So, my detail page loops through all the images, checks the original image size, and if it is >800 pixels wide, it supersizes it down to 800 and overwrites without output. I cache this with {cgcache} for the maximum time allowed in order to minimize redundant checks.

[uniqu3]

Ok yeah that makes sense, there are always those special moments

[nuno]

Looks cool and great write up/explanation here
.

I could not agree more with Uniqu3.

Nice job, well done.

-Nuno

[hoshy]

Interesting page.

Funny thing:
i first visited that page with (accidently) javascript turned off and even didn't realise it because it just looked good to me and - the most important thing - it just worked.
When i switched it on i realized a slight difference but nothing special.
I like pages that works with javascript as well as without it.
Good work.

But why is the logo linking always to the current page?
I expected it links to the intro page but instead its href is always empty.

[kendo451]

hoshy you caught me! I used the wrong alias in the {cms_selflink href='home'} tag for the logo.

I'll fix it now.

Thanks for catching that!

[kendo451]

It was my goal to use the Products Module category list in the right sidebar to only show active products.

But for some reason the Products module shows the number of all products in the temple, not the number of active ones.

In this client's case, 90% of their properties are turned off at any given time, so the category numbers are way too high. I guess I could write a UDT to get my own category list, but it wasn't a priority.

Empty Page Listing

The other thing I couldn't figure out with the Products Module category list was how to show a custom message if you click a category with no active products. Currently you just get a page with a blank content area.

I tried two ways to do this.

Summary Template
{if $items|@count>0}
[show the list]
{else}
[show "sorry nothing meets your search criteria"]
{if}

This doesn't work if there are no items.

Main Page Template

The main content block is assigned to a variable.
{if $main_content|strip_tags|strip != ''}
{$main_content}
{else}
[show message for no content]
{/if}

Well, that doesn't work either.

I'm stumped.

[hoshy]

What about this:

Code: Select all

{if !isset($items) || $items|@count == 0}
[show "sorry nothing meets your search criteria"]
{else}
[show the list]
{if}

[uniqu3]

It is possible that if there is nothing to count, template isn'T processed, i had a similar case with CGCalendar (i think upcomminglist templates).

So probably something like this would work:

Code: Select all

{capture assign="foo"}{Products and your params}{/capture}
{if !empty($foo)}
{$foo}
{else}
Oh dear, we have nothing to show, sorry!
{/if}

[kendo451]

I just ran some analytics from webpagetest.org and I'm somewhat surprised at the results. See attached waterfall screenshot.

It is taking 4.5 seconds before the first byte is received of the html file.

This is running on Rackspace Cloud Sites, and you can see the download time is reasonably fast.

So, even though I have all the page caching turned on, it looks like CMSMS is regenerating the page each time, and taking a really long time to do it.

The home page doesn't have any image processing in the html itself. The slider images are fetched by AJAX from another url after the page loads.

Is it possible that this long page generation time is caused by the Advanced Content module?

Does anybody know how to over-ride SuperSizer's end comment? It would be helpful to see CMSMS's comment on page generation time.

[hoshy]

As i know AdvancedContent consumes much RAM if the option "Show AdvancedContent options tab" is turned on because it loads the whole content of any page to check the active or show in menu option.
If you do not use functions like expiry date or the frontend users options disable it in the module settings.

[kendo451]

Rackspace Cloud Sites has db clusters. When a page takes 50 or 60 db calls to build, having the db on separate boxes introduces many seconds worth of latency.

However, the CMSMS caching should be working, and it doesn't appear to be for some reason.

Browser cache enabled for 720 minutes.

CMS Cache clearing is set to 30 days.