Silverstripe 3.1 Siteconfig and Masterslider Part 1

In this tutorial I will show you how to add the Masterslider to place a video or an image in the header of your homepage, or every page. We picked Masterslider as it is responsive so will work great with all your users, regardless of device. In this first post we will build the page-type files to mysite/code/ folder. Also we add the extra text layers. And build the theme for the slider. In the 2nd part I show you where to upload and how to customize the slider. In last 3rd part I will show you how add the text layers in admin and also how to use the slider.

Reguired moodules: GridFieldBulkEditingTools, SortableGridField, colorpicker

1. add file named CustomSiteConfig.php to folder mysite/code/ with the following code:

<?php 
class CustomSiteConfig extends DataExtension {

	private static $has_many = array( 
		'Slides' => 'Slide',
	);
	private static $db = array(
	);
	private static $has_one = array(
	);

	public function updateCMSFields(FieldList $fields) {
		$config = GridFieldConfig_RecordEditor::create();
		$sliderfield = GridField::create( 
			'Slides', 
			'Slides', 
			$this->owner->Slides(), 
			$config 
		);
		$fields->addFieldToTab('Root.Slider', $sliderfield);
	}
}

2. We add Slides code to mysite/code/ folder with file named Slide.php:

<?php 
class Slide extends DataObject {

private static $db = array ( 
		'Link' => 'Varchar(255)', 
		'Name' => 'Text',
		'Durnation' => 'Text'
	);
	private static $has_one = array ( 
		'SiteConfig' => 'SiteConfig', 
		'Image' => 'Image',
                'VideoFile' => 'File',
	);
	private static $summary_fields = array(
		"Image.CMSThumbnail",
		"Name",
		"Link"	
	);
	public function updateCMSFields(FieldList $fields) {
		$fields->addFieldToTab('Root.Main', TextField::create('Link'));
		$fields->addFieldToTab('Root.Main', TextField::create('Name'));
		$fields->addFieldToTab('Root.Main', TextField::create('Durnation'));
		$uploadField = UploadField::create('Image', 'Slide Image');
		$fields->removeByName('SiteConfig');
                $uploadField2 = UploadField::create('VideoFile', 'Slide Video');
		$fields->addFieldToTab('Root.Main', $uploadField);
                $fields->addFieldToTab('Root.Main', $uploadField2);
		return $fields; 
	} 
}

3. Now you have the Slide and Custom siteconifg files added put the siteconfig is not yet connected to the silverstripe cms siteconfig for that add this line to mysite/ _config.php file:

Object::add_extension('SiteConfig', 'CustomSiteConfig');

4. For the text we go back to part where i told you to add code to Slide.php and add this lines to this file

//add this after has_one array is closed
private static $has_many = array ( 
		'SliderTexts' => 'SliderText',
);

//Like so:

private static $has_one = array ( 
		'SiteConfig' => 'SiteConfig', 
		'Image' => 'Image', 
);
private static $has_many = array ( 
		'SliderTexts' => 'SliderText',
);

//and also add the slidertext to the fields using code
$config = GridFieldConfig_RecordEditor::create();
		$slideTextfield = GridField::create( 
			'SliderTexts', 
			'SliderText', 
		$this->owner->SliderTexts(), 
		$config 
		);
		$fields->addFieldToTab('Root.Main', $slideTextfield);

//like so: 
public function updateCMSFields(FieldList $fields) {
		$fields->addFieldToTab('Root.Main', TextField::create('Link'));
		$fields->addFieldToTab('Root.Main', TextField::create('Name'));
		$fields->addFieldToTab('Root.Main', TextField::create('Durnation'));
		$config = GridFieldConfig_RecordEditor::create();
		$slideTextfield = GridField::create( 
			'SliderTexts', 
			'SliderText', 
		$this->owner->SliderTexts(), 
		$config 
		);
		$fields->addFieldToTab('Root.Main', $slideTextfield);
		$uploadField = UploadField::create('Image', 'Slide Image');
		$fields->removeByName('SiteConfig');
		$fields->addFieldToTab('Root.Main', $uploadField);
		return $fields; 
	}

5.Upload the colorpicker module to our website root in to the folder called colorpicker.
6. Now lets add the file named SliderText.php with code:

<?php 
class SliderText extends DataObject {

	private static $db = array ( 
		'SentenceText' => 'Text',
		'BGColor' => 'Color',
		'TextColor' => 'Color',
		'BGOpacity' => 'Text',
		'TextSize' => 'Text',
		'Uppercase' => 'Boolean',
		'BoldText' => 'Boolean',
		'TextDelay' => 'Text',
		'TextDurnation' => 'Text',
		'Effect' => 'Enum("Left, Right, Top, Bottom, Fade")',
		'TextMarginTop' => 'Text',
		'TextMarginLeft' => 'Text',
		'TextPadding' => 'Text',
	);
	private static $has_one = array ( 
		'Slide' => 'Slide'
	);
	private static $summary_fields = array(
		"SentenceText"
	);
	public function getCMSFields() {
		$fields = parent::getCMSFields();
		$fields->addFieldToTab('Root.Main', TextField::create('SentenceText', 'The text in the row'));
		$fields->addFieldToTab('Root.Main', TextField::create('TextDelay', 'milliseconds before the text comes in 500 means half second'));
		$fields->addFieldToTab('Root.Main', TextField::create('TextDurnation','Durnation of the time when text comes in'));
		$fields->addFieldToTab('Root.Main', DropdownField::create('Effect', 'Effect', singleton('SliderText')->dbObject('Effect')->enumValues()));
		$fields->addFieldToTab('Root.Main', new ColorField('BGColor', 'Background color'));
		$fields->addFieldToTab('Root.Main', TextField::create('BGOpacity','Background opacity 1.0 means full color 0.1 means 10% visible'));
		$fields->addFieldToTab('Root.Main', new ColorField('TextColor', 'Text color'));
		$fields->addFieldToTab('Root.Main', TextField::create('TextSize','Text Size in pixels'));
		$fields->addFieldToTab('Root.Main', CheckboxField::create('Uppercase','Text Uppercase if checked'));
		$fields->addFieldToTab('Root.Main', CheckboxField::create('BoldText','Text bold if checked'));
		$fields->addFieldToTab('Root.Main', TextField::create('TextMarginTop','Margin in pixels from top'));
		$fields->addFieldToTab('Root.Main', TextField::create('TextMarginLeft','Margin in pixels from left'));
		$fields->addFieldToTab('Root.Main', TextField::create('TextPadding','Background padding from text in pixels'));
		return $fields; 
	} 
}

7. Build the Database using http://www.yoursite.com/dev/build?flush=1

8. Add Slides images

9. After adding slide images you can add slide text.

10. If you wanna have the slider on every page skip this. Else if you wanna add this slider with your text layers to home page lets add the file to mysite/code folder named HomePage.php with code:

<?php
/**
 * Defines the HomePage page type
 */
class HomePage extends Page {
   static $db = array(
   );
   static $has_one = array(
   );
}
class HomePage_Controller extends Page_Controller {
 
}
?>

11. Add HomePage.ss to your themes layout folder (themes/yourtheme/templates/Layout/)

12. Because i use in my tutorial the simple theme what is 3.1 official theme i edit also the /themes/simple/templates/Page.ss file and use the following:

<!DOCTYPE html>
<!--[if !IE]><!-->
<html lang="$ContentLocale">
<!--<![endif]-->
<!--[if IE 6 ]><html lang="$ContentLocale" class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html lang="$ContentLocale" class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html lang="$ContentLocale" class="ie ie8"><![endif]-->
<head>
	<% base_tag %>
	<title><% if $MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> » $SiteConfig.Title</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta property="og:image" content="{$ThemeDir}/images/logo.png" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	$MetaTags(false)
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<% require themedCSS('reset') %>
	<% require themedCSS('typography') %>
	<% require themedCSS('form') %>
	<% require themedCSS('layout') %>
	<% require themedCSS('lightbox') %>
	<% require javascript('framework/thirdparty/jquery/jquery.js') %>
	<link rel="shortcut icon" href="$ThemeDir/images/favicon.ico" />
	<link rel="stylesheet" href="{$ThemeDir}/masterslider/style/masterslider.css" />
	<link href="{$ThemeDir}/masterslider/skins/default/style.css" rel='stylesheet' type='text/css'>
</head>
<body class="$ClassName<% if not $Menu(2) %> no-sidebar<% end_if %>" <% if $i18nScriptDirection %>dir="$i18nScriptDirection"<% end_if %>>
<% include Header %>
		$Layout
<% include Footer %>
<%-- Please move: Theme javascript (below) should be moved to mysite/code/page.php  --%>
<script type="text/javascript" src="{$ThemeDir}/javascript/script.js"></script>
<script type="text/javascript" src="{$ThemeDir}/masterslider/jquery.easing.min.js"></script>
<script type="text/javascript" src="{$ThemeDir}/masterslider/masterslider.min.js"></script>
</body>
</html>

13. Because removed the divs around the $Layout:

<div class="main" role="main">
<div class="inner typography line">
$Layout
</div>
</div>

14. I add the lines to my themes/yourtheme/templates/Layout/ Page.ss the lines:

<div class="main" role="main">
<div class="inner typography line">
<% include SideBar %>
<div class="content-container unit size3of4 lastUnit">
	<article>
		<h1>$Title</h1>
		<div class="content">$Content</div>
	</article>
		$GoogleMaps
		$Form
		$PageComments
</div>
</div>
</div>

15. Now back to HomePage.ss. Open the file and add the following code to the file:

<div class="master-slider ms-skin-default" id="masterslider">
<% loop SiteConfig %>
<% loop Slides %>
<div class="ms-slide $Name" data-delay="$Durnation">
<% if SliderTexts %>
<% loop SliderTexts %>
<h3 class="ms-layer hps-Title$ID" style="left: $TextMarginLeft; top: $TextMarginTop;" data-type="text" 
<% if Effect=Fade %>
data-effect="fade"
data-duration="$TextDurnation"
data-delay="$TextDelay"
data-ease="easeOutExpo"
data-hide-ease="easeInExpo"
<% end_if %>
<% if Effect=Left %>
data-effect="left(long)"
data-duration="$TextDurnation"
data-delay="$TextDelay"
data-ease="easeOutExpo"
data-hide-effect="right(short)"
data-hide-ease="easeInExpo"
<% end_if %>
<% if Effect=Right %>
data-effect="right(long)"
data-duration="$TextDurnation"
data-delay="$TextDelay"
data-ease="easeOutExpo"
data-hide-effect="left(short)"
data-hide-ease="easeInExpo"
<% end_if %>
<% if Effect=Top %>
data-effect="top(long)" 
data-duration="$TextDurnation"
data-delay="$TextDelay"
data-ease="easeOutExpo" 
data-hide-effect="bottom(short)" 
data-hide-ease="easeInExpo" 
<% end_if %>
<% if Effect=Bottom %>
data-effect="bottom(long)" 
data-duration="$TextDurnation"
data-delay="$TextDelay"
data-ease="easeOutExpo" 
data-hide-effect="top(short)" 
data-hide-ease="easeInExpo" 
<% end_if %>
>
<% loop Slide %><% if Link %><a href="$Link"><% end_if %><% end_loop %>
$SentenceText
<% loop Slide %><% if Link %></a><% end_if %><% end_loop %>
</h3>
<% end_loop %>
<% end_if %>
<img src="$Image.URL" data-src="$Image.URL" alt="$Name Background" title="$Name"/>
</div>
<% end_loop %>
<% end_loop %>
</div>
<% loop SiteConfig.Slides %>
<% if SliderTexts %>
<style type="text/css">
<% loop SliderTexts %>div.<% loop Slide %><% if SliderTexts %>$Name<% end_if %><% end_loop %> .hps-Title$ID <% loop Slide %><% if Link %>a<% end_if %><% end_loop %> {
    background: $BGColor.CSSColor($BGOpacity);
    color: #$TextColor !important;
    font-size:{$TextSize}px !important;
    font-weight: <% if BoldText %>700<% else %>300<% end_if %>;
    padding: $TextPadding;
    text-transform: <% if Uppercase %>uppercase<% else %>none<% end_if %>;
}
<% end_loop %>
@media only screen and (max-width: 640px) { 
<% loop SliderTexts %>div.<% loop Slide %><% if SliderTexts %>$Name<% end_if %><% end_loop %> .hps-Title$ID <% loop Slide %><% if Link %>a<% end_if %><% end_loop %> {
	display:none !important;
}
}
<% end_loop %>
</style>
<% end_if %>
<% end_loop %>
<script type="text/javascript">
(function ( $ ) {
"use strict";
$(function () {
	var slider = new MasterSlider();
	slider.setup('masterslider' , {
         width:1100,    // slider standard width
         height:350,   // slider standard height
				 view:"fade",
				 overPause:false,
         space:2,
				 start:1,
         fullwidth:true,
				 grabCursor:true,
				 swipe:true,
				 mouse:true,
         loop:true,
         preload:0,
         autoplay:true
    });
    // adds Arrows navigation control to the slider.
    slider.control('arrows');
    slider.control('bullets');
});
})(jQuery);
</script>
<div class="main" role="main">
<div class="inner typography line">
<div class="content-container unit size3of4 lastUnit">
	<article>
		<h1>$Title</h1>
		<div class="content">$Content</div>
	</article>
		$Form
		$PageComments
</div>
</div>
</div>

16. Save the HomePage.ss and Dev build the theme using http://yourtheme.com/dev/build?flush=all

Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , | Posted under SilverStripe CMS | RSS 2.0

Author Spotlight

Teet Bergmann

I'm a freelance web designer from Estonia. Mostly doing sites using Silverstripe, magento, prestashop, wordpress.

Leave a Reply

Your email address will not be published. Required fields are marked *