Different home page and sub pages with SilverStripe

The SilverStripe CMS makes it very easy to have a slightly different layouts between pages by creating another page type and using $Layout with different layout templates. I did this for the Fabco Ltd website which is a small website with a larger main image on the homepage and a smaller version of this image on the subpages; in all other respects the templates are the same.

Example website

The example website used in this post is Fabco Ltd. I’ve also included two screenshots below showing the homepage and subpage with the different main image.

Homepage:

Subpage:

How to set up slightly different templates with SilverStripe

Create a new file at mysite/code/HomePage.php like so (it doesn’t need anything else in it):

<?php
 
 class HomePage extends Page {
 }
 
 class HomePage_Controller extends Page_Controller {
 }
 

In the main content area of the Page.ss file at /themes/theme-name/templates/Page.ss change $Content/$Form section to include $Layout like so (obviously the id and class of the containing <div> may be different for your template):

<div id="content" class="typography">
 $Layout
 $Content
 $Form
 </div>
 

At /themes/theme-name/templates/Layout create two files: HomePage.ss and Page.ss; these contain the slightly different layouts that will go where $Layout is in the above file.

For the Fabco website HomePage.ss looks like this:

<img id="mainpic" src="/themes/fabco/images/home.jpg" width="770" height="404" alt="fabco ltd" />
 

and Page.ss like this:

<img id="mainpic" src="/themes/fabco/images/subpage.jpg" width="770" height="108" alt="fabco ltd" />
 

Then open the following URL in your web browser to rebuild the database etc, changing “mysite” to the domain name of the site:

http://mysite/dev/build/?flush
 

Now go to the CMS admin and change the page type of the home page to “Home Page” under the “Behaviour” tab as shown in the screenshot below.

The home page now has a ever so slightly different layout to the other pages. Easy.

Prefix img src assets with a leading slash in SilverStripe

When inserting an image into the TinyMCE HTML editor in SilverStripe it doesn’t prefix the src attribute of the img tag with a leading slash leaving it like e.g. src="assets/images/myimage.jpg". This is acceptable because it writes out a <base> tag into the document <head> so these relative urls are made into absolute URLs using the href in the base tag. However, as I have found, some bots ignore the base tag and are unable to grab the images correctly. This post shows how to modify your base page class in SilverStripe to prefix assets with a leading slash.

Populate defaults dynamically with SilverStripe

SilverStripe allows default values to be set for fields on data objects using the static $defaults property but this cannot be populated with dynamic values, such as using date() or rand(). Instead use the populateDefaults() function.

How to log into SilverStripe if you’ve lost the login details

If you have lost the admin login details for a SilverStripe installation and sending an email to reset the password is not working, there is a default admin account that can be enabled. After logging in, reset the regular administrator’s details and then remove the temporary login as shown in this post.

SilverStripe cache directory

SilverStripe by default creates a directory for caching the site manifest etc by using the PHP function getSysTempDir(). It is possible to locate this directory elsewhere by simply creating a directory called silverstripe-cache in the website’s root directory, or at any other location by setting the TEMP_FOLDER constant.