The Website Saga - Smarty Template Madness
Continuing with the website saga, it was now time to start playing with my layout a bit, and add a few features for the SEO stuff I wanted to get into later. So it was time to tweak my template a bit to accomplish these goals:
- Provide a meta-description field on every content page
- Use the same template for detail pages (News Detail, Blog Detail, etc) as I do for the main content pages.
- Have the blog or news article title displayed in the <title> tag when displaying a blog article or a news article.
- Have the blog or news article title displayed in the header of the page when displaying a blog article or news article
- Have meta-description stuff automatically update for blog articles and news articles.
- Hide sidebar news on the News page.
In versions of CMS Made Simple accomplishing some of this stuff was rather difficult, if not possible due to the fact that the entire page template was processed through smarty in one piece. Therefore the head area was already processed through smarty by the time it got to the {content} section where the news or blog modules would be called when displaying an article or entry detail.
CMS Made Simple 1.4 attempted to attack that problem by breaking the CMS page template into pieces, processing them in different orders and then gluing them back together. This should in principle make it simpler to accomplish all this SEO related functionality in a flexible, and re-usable way.
This functionality is controlled by a config variable entitled 'process_whole_template'. In the beta series it is false, by default. But on release it will be true.
A Meta Description Block on Every Page
This step was relatively simple. I posted in the CMS Made Simple forums a simple trick to allow doing this in any version of CMS. So I just implemented that solution (with a little variation). Specifically, I added this code into the <head> portion of my page template:
{* allow an optional meta description content block for pages *}{content block='meta_description' wysiwyg='false' assign='meta_description'}
<meta name="description" content="{$meta_description|strip_tags|summarize:30:""|trim}"/>
Now, whenever I edited a content page there was a new text area (without a wysiwyg) that would allow me to enter in a description for the page. Any HTML data entered in the content area will be stripped out, the output will be truncated to 30 words, and any extra whitespace removed.
Detail Pages for News and Blogs
This was a simple step, well at least for News. I simply created a new page in my content management section, called it news (There may be one that comes with the default content for CMS Made Simple, but by this time I wan't using them... or it was using the wrong template). and placed it correctly in my page hierarchy.
Next, in that new page I placed the tag {news}.. this will display all active news articles for my site. I also added some text for the meta-description field.
Next I modified my page template, and in the sidebar area I changed the call to the news module to look like this:
{news number='3' detailpage='news'}
That's done.... now I have a 'News' page in my menu that shows all active articles, and the three most recent news articles are visible in my sidebar. And they'll all use the same detail page, and therefore the links to each article will be the same.
The blogs module was similar, however I'm not using it in a sidebar anywhere, so all I had to do was create a new page called 'Blogs', position it correctly in my page hierarchy, and inside that module call {Blogs}. Similarly I entered some text for the meta-description field.
Dynamic <title> tags
The next goal was to adjust the page text between <title> and </title> whenever displaying the detailed version of a News article or Blog entry. And because of the changes made in CMS Made Simple 1.4, it was simple.
First, I edited my news current news module detail template (I have only one), and at the bottom of it added:
{assign var='pagetitle' value=$entry->title}
Next I edited my page template, and in the <head> section of the template replaced the original <title>...</title> tag with this smarty logic:
<title>{$pagetitle} | {sitename}</title>
{else}
<title>{title} | {sitename}</title>
{else}
That was it. Now all of my news articles would have a custom page title. All that was left was to do something similar in the Blogs module Entry template. This is left as an excercise to the reader :)
Dynamic Page Headers in Detail Views
The next goal was a little trickier. I wanted the header at the top of my page output to display the news article title, and the blog entry title when I was reading a blog entry or news article. And this is technically just a modification to the body section of the template, so it should be simple right?
Not really. when displaying a news article or a blog entry, the blog entry actually replaces {content} on that page. Meaning that the news or blogs modules don't actually get executed till after the header is rendered, therefore there's no simple way to adjust the header based on the content.
Additionally, there is another issue. I don't have much room in my page header for a long news article title. Not if I want to use the nice big font... so I have to either use a different style for longer headers, or trim the title down when it gets too long.
To solve the first problem I modified my page template like this:
- At the top of the body section, I added code like:
- I replaced the normal call to {content} with {$mycontent}
Now the page content is processed through smarty at the top of the body section, and the output assigned to the temporary variable {$mycontent}. I then just use that temporary variable to display the content in it's normal place.
If you remember correctly from the steps I took above... I'm also outputting a variable called {$pagetitle} from the news detail and blogs entry templates. This variable should now be available for use inside the body section of my page template, after the {content assign='mycontent'} call.
To set the page title into the header section of my output, I now just added this chunk of smarty logic directly below the content tag.
{* allow adjusting the page title, using a default *}{if isset($pagetitle)}
{capture assign='the_pagetitle'}{$pagetitle} | {sitename}{/capture}
{else}
{capture assign='the_pagetitle'}{title} | {sitename}{/capture}
{/if}
Next, I replaced the {title} tag in the header section of my page template with:
{$the_pagetitle|truncate:20}Now, when I view any news article or blog entry, the <title> tag changes appropriately, as well as my page header. And the output in my header is truncated to 20 characters so that it should fit into my page properly.
Meta Description Data for Detail Views
My next task was to be able to extract information from the news or blog module for use in the meta-description tag when displaying a news article or blog entry. This wasn't overly difficult, as it uses the same technique for extracting the page title. However, I also needed to handle the regular content pages, and it's meta-description content block. And as one added complication, I wanted to create a default meta-description tag from the page title and site name, if no other text for this tag had been specified.
To do this, I added a line like this:
{assign var='pagedescription' value="$entry->summary"}To the news module detail template, directly below the similar line for the page title.
Next, I edited the page template, and changed the meta-description stuff I described above to this:
{* allow an optional meta description content block for pages *}{content block='meta_description' wysiwyg='false' assign='meta_description'}
{if empty($meta_description)}
{capture assign='meta_description'}{title} - {sitename}{/capture}
{/if}
{if isset($pagedescription)}
{assign var='meta_description' value=$pagedescription}
{/if}
<meta content="{$meta_description|strip_tags|summarize:30:""|trim}"/>
This accomplshes everything I need. a) it provides a meta_description content block on each content page. b) if that is empty, it uses the page title and sitename for the meta description tag. c) if the pagedescription smarty variable exists, it uses that value for the meta description data. and d) all the output is cleaned before placing it in the tag. Now, incase you weren't aware, this is cool.
Hide News SideBar on News Page
The last little thing I wanted to do was to hide the news content in the sidebar when I was viewing the news page. I didn't think the same data needed to be listed twice.
This was actually a complication in 1.4 from previous versions of CMS Made Simple. In previous verious you could just add an {assign} statement into the metadata area on the options tab of the edit content page for the particular page you wanted to edit. However, since 1.4 processes the <head> section after the <body> section this solution wasn't going to work.
In 1.4 there is now a new text area on the options tab entitled "Smarty data or logic that is specific to this page". I placed {assign var='hide_news' value='1'} into this textarea when editing the News and hit submit.
I then modified the page template in two ways. Firstly, I added {process_pagedata} to the very top of my page template (directly above the doctype tags). I then changed the area where news was called in the sidebar to this:
{if !isset($hide_news)}<!-- Start News --><div>
{news number='3' detailpage='news'}
</div> <!-- End News -->
{/if}
After hitting submit, then reloading the News page, the news sidebar was gone. Excellent.
Conclusion
Okay, it took a while to explain this. It actually took longer to explain than it did to implement, but that's okay. Hopefully now you can see that it is quite possible to enable SEO features in CMS Made Smple, to enable dynamic meta_description tags, title tags, and to modify the page header dynamically, all while using a single CMS page template.
I've attached the full page template for your reference, and hope that you can get some use out of this. If you read this fully, and read the smarty manual completely, you will begin to experiment on your own with what can be done with CMS Made Simple.
