Loading...

Hi, I'mVinay Lal

Web Developer
and Content Creator

In depth examples of a Silverstripe 4 websites with demo

lascabanasdeneto

There aren’t really any in depth SilverStripe 4 demo websites so I thought I’d make one. SilverStripe is a great choice of Framework for developers and CMS users. In this post I’ll take you through how useful it can be for both parties using a live demo site of a recent project that I created for a client.

Silverstripe 4 CMS example: how does it work?

Las Cabanas de Neto is a hostel in Peru I stayed at. I built them a website while I was there and I used SilverStripe 4 (the latest version at this time) to do it. In this post, I’m going to take you through the CMS for this site to show you what it can do. To put it a better way, to show you what I made it do. SilverStripe is very flexible so you can basically do whatever you want or whatever your client wants. You aren’t restrained by the CMS itself as with other CMS software (Wordpress, WIX, Joomla etc). 

For this site, I created a custom design which can be controlled (at least the parts they need to) from the CMS in terms of changing background images and creating Call to Action buttons as they wish.

The owner also wanted me to, 

  • - Create a Gallery Page which had multiple galleries - one for each aspect of the business. For example, he rents rooms, van lifers stay there, there is a restaurant etc. You get the idea, they do a lot.
  • - I also wanted them to be able to create ‘Call to Action’ buttons so that a person browsing the site can always Book or Contact them - this is basically the short end of a Sales Funnel. I enjoy designing sites that require lead generation so this is standard for me. Combined with the traffic from Google as an audience this should create a lead generator for any business. 

So considering this I’m going to show you how a CMS user can 

  • - Add a background image to the design: Once logged in (details below) the 'Settings' Model Admin on the left hand side of the screen. Then click the 'Background Image' tab on the top right hand tab. This will show you an upload form which you can use to upload an image. Remember to hit the 'save' button on the bottom left of screen before leaving the Settings tab to ensure your new images has been saved.
  • - Some essential information like Google Analytics Tracking code: On the default tab of the Settings Model Admin you can also add certain other information for the site eg, Google Analytics Tracking Code, some headings shown around the site and a few other things. The point being here that you can add whatever you like to this tab allowing the CMS user to have fine control over the site.
  • - Create a page: Select the 'Pages' Model Admin also on the left hand side of the screen. You can select an existing page in the page tree to edit it or you can hit the 'Add New' green button just above the page tree to create a new page. Once doing so you will be asked to select a 'Page Type'. A Page Type in SilverStripe will allow either a different template or functionality or both to be used for this page. Select the Page Type you desire, add your content and hit the 'save' button. If you want to preview your page you can change to the 'preview mode' in the bottom right of screen or select the URL near the top of the page in the CMS/edit view.
  • - Add some Galleries to that page: As mentioned each page can take one of two gallery styles. Lets create a 'Multi Gallery' feature on this same page. Once in the CMS edit view for this page, select the 'Galleries' tab near top left. This will present you with a green button called 'Create new Gallery'. Hit this to create a new Gallery. A Gallery consists of a 'Title', 'Description' and one or more images. You can create as many Galleries as you like. Once you save the page and preview it you will see the images in these Galleries will print out as a thumbnail and then can be clicked to show an enlarged version.

On top of that, I wanted the theme to be able to handle different Call to Action buttons - this is because this template could be used for many businesses and each button may need to be different. Creating the site like this allows me to reuse this theme in similar ways in the future without hard-coding information.

Adding Call to Action Buttons:

To add one of these go to the Home Page in the Sitetree and click it. From here look for the 'Home Page Buttons' tab and select the Create New' button. This will allow you to add some text to show in the button for example 'Learn More' but also a field to add a link. 

NOTE: the link field will display only what you put in it so you should only put absolute URL's in here. Even if the link is on your own site. Doing it this was has the added bonus of allowing you to link to external URLs which may be useful sometimes.

These buttons should ideally be only 1 or 2 per page and will now show on both mobile and desktop so that you can funnel users through to a contact page or to learn more or indeed a product page - whatever the goals of your website are.

In the future also I will alter this theme so you can change the Call to Action buttons on a page by page basis. In a larger business with more of an interest in blogging and using the idea of a Sales Funnel, they would conceivably want to have different buttons on each page as different calls to action are appropriate at different stages of the funnel. But I digress.

Silverstripe 4 demo site:

I also created a SilverStripe 4 demo site with the same theme on it that you can log in and play around with all of the above yourself. Add pages with text and image content (with the Page editor features of SilverStripe) and even embed a youtube video if you like. This is better than the Silverstripe demo because it shows you more of its capabilities in my opinion.

You can access the site here and use these details to login:

  • login: demo_public
  • password: xL.QyZe{4bFVd7?r

More SilverStripe features:

Silverstripe purely as a Framework:

If you are a developer then sometimes you actually don’t always need a CMS for your project. In this case, you can install SilverStripe without the CMS component and use it purely as a framework. This means that all your pages will be using models and their respective controllers to render the pages. You will still have a front end template but you bypass the page editing features of Silverstripe. There is still a backend to log in to if you want to edit particular objects (like products or itineraries or whatever your business requires) it’s just that functionality to create pages and publish them isn’t there.

Security: 

Silverstripe is secure. As a framework, it does a lot of the security measures for you. Not only small sites use SilverStripe but also large ones like Westpac Bank (a bank in New Zealand) and Air New Zealand (New Zealand’s national airline carrier) so it is considered safe enough to use by them.

I wrote a more full explanation of SilverStripes Security features in this article from the point of view of a developer but also a CMS user.

Prowess with customisable solutions:

As demonstrated in the above example with lascabanasdeneto.pe and with the demo site Silverstripe’s ability to handle custom requirements are very powerful. You can basically create an ‘object’ to represent anything your site needs and manage (i.e. create, edit and delete) them as you wish. Integration with CRM’s and other third-party services is also a breeze. If it has an API then SilverStripe can work with it.

Front End Developers:

Silverstripe has benefits for front end and back end developers. Backend developers get the framework and ORM (Object Relational Model) to play with but for front-end developers, Silverstripe has a straightforward way to handle front-end templates when it is used out of the box (ie templates with HTML, CSS, and JavaScript) although it isn't necessary to do so. Read on for more about using different front-end technologies to render your project.

The templates are always housed in the same place and if you want to override a particular template from a core component then there is a methodology to do so (let me know in the comments if you need to know this method in more detail). On top of this SilverStripe also has some URI commands which you can use to print out a list of templates used on a particular page. This can sometimes be useful if you are unsure which template is being used. Knowing this means you now know which one to edit when you are asked to change some code. 

Once your site is in ''dev' mode you can add '?showtemplate=1' to the URL and reload the page.

Also, SilverStripe doesn’t force you to use this template structure. This is just what it uses in a standard installation. It is also possible to use other front-end technologies to render the front end of the site. For example, you could use REACT to render the front end of the site instead. Whatever your workflow or technologies you like to work you are not restrained.

Open Source:

SilverStripe is both a private company who acts as a web development house and also creates the open source software known as SilverStripe (version 4 is the latest stable release at the time of writing this). As such SilverStripe is free to download and use as you wish. You can read the SilverStripe Documentation or ask technical questions on Stackoverflow or talk with the community in Slack channel and learn how to use SilverStripe all for free.

If you are a company who uses Silverstripe software but you aren’t a developer then you will still need to pay someone to work with it for your own purposes but there is no charge for using the software itself.

Is Silverstripe better than other CMS solutions like WordPress, Joomla, Concrete5?

It depends really on the project that you require it for. So how can you decide? Well, I wrote another blog post on this in more detail (about 1500 words) based on a comparison to WordPress but the basic advice stands for other software as well. 

You should consider using SilverStripe if you 

  • - Have very specific or custom requirements that other CMS’s struggle to deal with. Silverstripe is as I said above very flexible so you or your developer can relatively easily create the functionality you need.

You should consider using something else if,

  • - You don’t know how to code or perhaps you are new to development.
  • - You can’t afford to pay an external developer to do the work for you. In this case, WordPress is possibly your best option as there are so many free and cheap themes and plugins you can utilise. Every now and then you may need a developer but they are cheap and easy to find online.

How to get started with SilverStripe?

If you are a developer and want to get started then the first place to start is with downloading the software to your local development set up. You can do this by downloading the zip file or by using Composer if you are using that (recommended). You can access the download page here.

How to learn how to use SilverStripe?

The best place to start is the SilverStripe tutorials page where you can start to learn how to build a basic project.

Where to find SilverStripe Developers?

If you need a developer to help you with your project then you can contact me - I’m a SilverStripe Developer and have over 5 years of experience using it. Start by just telling me in 2-3 sentences what it is that you need to do and we can take it from there. I am experienced in understanding what it is that you may need (even if I am not suited to the project I can recommend someone who is), I am a good communicator and I have affordable rates. You can contact me here.

Careers in SilverStripe:

SilverStripe is a development company unto itself so they do hire and require developers and other skilled staff. Check out their careers page

On a different note if you are a developer and thinking of using SilverStripe then it can be a good technology to get into because it isn’t as popular as other frameworks. As such you have a better chance of getting work at a higher rate than if you were a WordPress developer. Not to pick on WordPress but it is far and away the most popular CMS and therefore you face a lot more competition for work.

Want to add a feature that I havent mentioned but that you think is worthy of mention? Let me know in the comments.