Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

 

Saving the planet, one site at a time

When you need to create a new layout, it's so easy to create a new Page type. But too many Page types could be bad for... the planet. Introducing SilverStripe Green.

Read post

When you need to create a new layout, for your SilverStripe site, it's so easy to create a new Page type. In small doses, this is ok. But the more Page types you create, the more choices your content editors have when creating a new page. The more classes you have muddying up your code completion. The more code you have to maintain.

Sometimes I need to create a new kind of page, and I need to ask myself this question; "What are you actually after?"

Often, all I need is a way to tie a unique URL to a unique template. Neither the template, nor the content it displays are going to change often. And I certainly don't want to add to the options content editors have when creating new, important pages.

You can find the code for this tutorial on Github.

Going green

Imagine my surprise, when Aaron Carlino announced a module to solve this very problem: Green. The module is well-documented, so I'm not going to go into too much detail here. Let me show you how simple it is to use. First, you need to install it:

composer require unclecheese/silverstripe-green

Then create a single new Page type:

use UncleCheese\Green\Controller;

class MyGreenPageType extends Page
{
// ...alternatively GreenExtension('JSON')

private static $extensions = [
"GreenExtension('YAML')",
];
}

class MyGreenPageType_Controller extends Controller
{

}

This Page type is an anchor-point for the content and templates Green will load. Think of it like a RedirectorPage, but instead of going to a new URL, it loads custom markup.

Next, you need to define where Green looks for the content and templates it needs to load:

UncleCheese\Green\Green: 
design_folder: "$ThemeDir/green"

You can put this in any old YAML config file you have. new-app/mysite/_config/config.yml is as good a place as any. The design_folder we've defined here will point to new-app/themes/simple/green. So, in there we can create the following files:

themes/
simple/
green/
contact-us/
index.ss
content.yml
page.css
page.js

It's important to name the template index.ss and the content file content.yml (or content.json if you used the GreenExtension('JSON') extension instead). It's not important what you name the rest of the files though...

The *.css and *.js files are automatically loaded for the page. Content in content.yml is used in the template. Let's define some:

Title: "Contact Us"
Numbers:
-
Location: Wellington
Number: +64 4 978 7330
-
Location: Auckland
Number: +64 4 978 7330
-
Location: Melbourne
Number: +61 3 8352 4431
-
Location: Hobart
Number: +61 3 8352 4431
-
Location: London
Number: +44 20 3637 5420

The only thing left to do is create the page, through the CMS:

silverstripe green

You can learn more about this module, by watching the video introduction.

I'm really excited about this module, and I hope you find it as useful as I do. Have you needed to make one-off pages (like this), and been frustrated by the amount of code required to do so? Let us know in the comments!

Photo courtesy of Emory Allen.

About the author
Christopher Pitt

Chris works in the bespoke team, at SilverStripe. He helps build and maintain many of the modules used in SilverStripe applications. He also teaches; speaking at local user groups and international conferences, and through technical blog posts and books.

He also enjoys building robots and connecting those to circuits inside Minecraft. When the machines take over, he hopes this will buy him some time to formulate a plan of escape.

Post your comment

Comments

No one has commented on this page yet.

RSS feed for comments on this page | RSS feed for all comments

Like what you have read?

Sign up for our weekly blog digest sent to your inbox.

Subscribe