Building a website with Concrete5 |

Written November 14, 2016 by Martin Bjørnskov

In connection with my education at Business Academy South West for multimedia designer, we were given the task of designing a new website for a local festival. The following is an excerpt of the report made for the project. I decided to publish this part of the report for anyone to seek inspiration in making a website in Concrete5.

Bootstrap

The first tool we want to describe is Bootstrap. Bootstrap is a framework that makes it easy for web developers to develop responsive websites. The tool mainly consists of two different things, that generally makes the life of a web developer a lot easier. It contains a CSS (Cascading Style Sheet) file, that mostly helps with the design part of the website. Second it contains of a Javascript file, that helps with the functions of the website. Each of these are able to work together in a website, but are also able to work as two separate systems, if you for example do not want to implement the CSS file.

We have chosen Bootstrap among a lot of other frameworks, simply because it is well documented, and used in a wide range of other projects. It is developed by very skillful people at Twitter which ensures that the quality of the code is pretty good. This is important as the files in Bootstrap are relatively big, and we therefore off course want a very optimized code, both for the sake of stability and for the sake of speed at the website.

We have chosen to implement both the Javascript and CSS file of Bootstrap at our website. We are mostly using Bootstrap for the sizing of objects at the website but other classes of the stylesheet is being used as well, for example img-responsive and img-rounded. In the following we will shortly explain, what happens when you use Bootstrap and how it is used.

col-md-12

Bootstrap is, as described earlier a normal Stylesheet containing a lot of CSS rules. These rules are called as a normal class. In this example we will show how to use the col-md-12. This class is used for sizing the object at a total width of the previous object. If for example we have created a div at half the size of the webpage and create a div inside this, then name the class col-md-12, it will size itself to a full width of half the webpage.

The letters md of this class defines when the breakpoint of the responsive website is. If for example we put in both col-md-12 and col-sm-3 in the same div, we will have a div that will fill the whole webpage width when at a screen above 992px in width and when having a screen below this, it will take up one fourth of the page.

The number 12 of this class comes from the mentality that every page is build up by 12 blocks in the width. This is why we are able to tell that 3 is the same as one fourth of the page.

The code for the class is as following:

To start with, the CSS sheet is making a general rule for all the sizing classes. This makes the blocks relative, giving it a minimum height and puts in a gutter between every single one of the blocks in the width:

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
 position: relative;
 min-height: 1px;
 padding-right: 15px;
 padding-left: 15px;
}

For all the col-md classes, there is a general rule to make it float at the left. This allows the whole essence of Bootstrap where you are able to place blocks beside each other:

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
   float: left;
 }

Then right after there is a class for the col-md-12 that describes, that it needs to fill 100% of the earlier block.

 .col-md-12 {
   width: 100%;
 }

col-md-push-3

This class makes it possible to push objects in the same grid as we are sizing the elements. Let’s say that an object is 6 blocks wide, and we want it to be centered on the page. Then we will need to push the object with half of its width. This will end up in a push of 3 blocks. Therefore we choose to use the class col-md-push-3 that will give it a left:xx placement and therefore push the object to the right. A similar class is available, that will do the opposite of this. This class is called col-md-pull-3. This will pull the object back to the left.

Again this is only an example of the use, and you are able to make use of both col-xs, col-sm, col-md and col-lg to change the breakpoints of the document.

The CSS for col-md-push-3 looks as following. Keep in mind that the col-md-6 that we want to push to the middle of the site is 50% wide and we therefore want it to be moved 25% of the page:

 .col-md-push-3 {
   left: 25%;
 }

img-responsive

This class allows us to allow a specific image to be responsive and resize itself inside the earlier object. If for example we change from a 960 wide screen to a mobile phone screen, the image will probably be too big for the mobile screen.
Therefore we want to tell the image, that it is going to have a max-width of 100% – no bigger than that, and it has to control the height by itself. Furthermore we make sure that it is shown by using the display:block.

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
 display: block;
 max-width: 100%;
 height: auto;
}

img-rounded

We have chosen to have some of the images at the website rounded in the edges. For this we are using the img-rounded class. This adds a border-radius to the image of 6px.

.img-rounded {
 border-radius: 6px;
}

All of the stuff available through Bootstrap is possible to add manually in our own CSS for our website. That could be smart to do, if for example you are only using two or three functions of Bootstrap and therefore implementing a lot of code that you will never use. But we are using a lot of different functions in Bootstrap and has therefore decided that it is worth the burden when downloading the website.

The Javascript file of Bootstrap allows us to make the menu available as a dropdown menu on smaller screens. Furthermore it allows us to make the dropdown window of the Program page at the website. The Javascript file is also used by Concrete5 for a lot of its client side features.

Basic website

The website we have chosen to create is built upon a template that we have searched for. We have some criterias when we look for the template and ended up finding the theme Quick.

We wanted the template to be built upon Bootstrap
It should contain a video header
It should be so simple that it would fit most people’s taste

The Quick template is bought at the marketplace WrapBootstrap and is a plain HTML template.

It is available from this link: https://wrapbootstrap.com/theme/quick-multipurpose-one-page-theme-WB09X5029

The reason for us to buy a template instead of coding it from the bottom and up, is that we really wanted to create a website that was fully featured and ready for launch at the end of this project. This also happens a lot in the smaller web agencies, where the mindset is that you do not have to invent the wheel every time you build a website.

To make it fit our needs we have changed a lot of the website. We are only using a few components of the already existing template and have added a lot of our own design. Mostly we have made changes in the CSS code, where we most prominent have changed the blue color of the most of the objects to a orange color that is found in our color scheme.

We had a criteria of having a video in the header of the website. The template we found had a version with full screen video, that allowed you to scroll down to see the content of the website. We wanted this to be a bit smaller, as we wanted the website to be useable by everyone, and not everyone is used to having a big video at the top and then be able to scroll down. Our fear was that most people would think it was the only content on the website and would not scroll down and see the rest.

We therefore decided to change the height of the #home div from 100% to 70%. Then the visitors was able to directly see, that there was more content and then scroll down and see the rest.

But we had another problem. The function that was used to show the YouTube video as background was really slow. It could take about 12-15 seconds before the video was loaded and played. That would give the visitors a pretty bad experience and we therefore wanted to have this changed.

It was not possible to speed up the process inside the existing Javascript and we therefore decided to implement another function for showing the video. We removed the YouTube plugin and decided to host the video file on our own server. An important thing to mention is that we checked if the server our website was placed on supported pseudostreaming, which allowed the video to start playing before the whole file was downloaded. Without that we would not have been able to do this, as the video file of the header is simply too big to download before playing even though we have optimized it.

We are using the Javascript vide.js that is freely available online (http://vodkabears.github.io/vide/) for showing the video. We implemented it so that it used the specific same div as endpoints for the video as the YouTube plugin did and got some really great load time speeds from doing this. As mobile devices are not yet supported to show background video and some people are on slow internet connections, we made use of the fallback function of vide.js. This allowed us to setup a normal banner for the background so that it shows this to the visitor until the video is ready for playback, if it will ever playback.

Concrete5

After designing the basic website and how we wanted it to look, we decided to put the whole website into a CMS (Customer Managed System) to make it easier for both us, and the customer to edit the content of the website in the future.

What is and why use a CMS?

A CMS system is a system that allows the owner of a website to edit in the content of the website without any knowledge about the programming. A CMS will typically allow the customer to edit the site in a Word like way, and will make use of a so called WYSIWYG (What You See Is What You Get) editor where the user is able to click buttons and mark the text to make different formats of it. You will probably be able to compare the difference between using a CMS and not using a CMS system to the difference between using Microsoft DOS, where you had to input all commands by using a keyboard, to Microsoft Windows that for the first time allowed the user to be able to navigate in a graphical user interface and click with the mouse on the objects that the user wanted to change.

We have decided to make use of a CMS system for the sake of easiness in editing the website. This will both allow us, if we for example were a web agency to have a student worker to update the websites of our customers, but it would also allow the customer to edit the website by themselves. It can be a huge benefit, especially for a festival like this one, that has a program that is rapidly changing.

Choice of CMS system

We have decided to make use of the CMS system called Concrete5 for this project. There are many different CMS systems out there, Drupal, Joomla and WordPress, just to name a few of them. Our choice of Concrete5 came into being because of its enormous usability. It is so user friendly, both in the programming part of the templates and especially in the part of editing the website for the customer.

When the user wants to edit a part of the website, the user just logs in with his username and passwords. He is now able to click the area he wants to edit and chooses edit mode. He will now get an editable textbox in the exact same place and in the exact same fonts and sizes as the original content, that he can change. After his change he just hits save and publish. The new content is now online and available at the web.

In for example WordPress, you will often get the whole page and have to find the exact spot that you want to change. Furthermore the content is wrapped in another design so you have to imagine how it will look at the final page. Concrete5 has a huge benefit over this by showing exactly what the customer is going to receive before he saves it.

Making a custom template

We were through a bit of journey throughout this project by using Concrete5. The first thing we did was to install version 5.6.3.4 of Concrete5. We did this as we had experience with this version and had heard that the new version had gotten huge changes in how it was designed and a few changes in how to make a theme. We used Concrete5 Beginner’s Guide for help when designing our theme and had eventually a website working in Concrete5. But we encountered a problem. We kept receiving errors when using the admin panel of Concrete5 in combination with our homemade theme. Concrete5 is downloading a version of Jquery that is older than the version that we use for some of our Javascripts. It will not work to have conflicting Jquery versions, and it would not work to remove either of them. So we had to find a solution.

Our solution happened to be, to upgrade the version of Concrete5 to 5.7.5.8. This new version of Concrete5 made use of a new version of Jquery that was not conflicting with the Javascripts that we made use of. So we could remove the Jquery that we loaded into the website.

As a result of this upgrade we had to learn how to use the new way of making templates for Concrete5. We had no book for this version and decided to jump straight into the code and just try it out. We decided to take basis in the Elemental template that is standard in all C5 installations.

The Elemental theme is built upon Bootstrap and it was therefore quite easy to build it up upon this template.

The new version of C5 had moved everything the user makes by itself into a folder called application. You will therefore find the template that we made in the folder ”/application/themes/ravfestival2”.

Inside this folder, the first thing we edited was the page_theme.php. This is important to edit, to be able to install the theme. It is in this file you define the name of the theme, description and etc.

Most important to mention is these edits:

public function getThemeName()
   {
       return t('Ravfestival New');
   }

   public function getThemeDescription()
   {
       return t('Nyt tema baseret på Elements.');
   }

Furthermore we edited the assets that C5 should make sure to get before loading the site. This contains for example Bootstrap.css, Jquery.js etc. We made sure that Jquery and Bootstrap was loaded correctly:

   public function registerAssets()
   {
       //$this->providesAsset('javascript', 'bootstrap/*');
       $this->providesAsset('css', 'bootstrap/*');
       $this->providesAsset('css', 'blocks/form');
       $this->providesAsset('css', 'core/frontend/*');
       $this->requireAsset('javascript', 'jquery');
       $this->requireAsset('javascript', 'picturefill');
       $this->requireAsset('javascript-conditional', 'html5-shiv');
       $this->requireAsset('javascript-conditional', 'respond');
   }

Now to the main of the template and how it is designed.

Every file starts with the same line. These lines make sure that it is C5 that is executing the page. It is is not C5 that is executing the document, it will return Access Denied and then cancel the execution of the document. This is a safety feature for the template so that no one can execute only a part of the template and maybe be able to use it for evil intentions.

<?php defined('C5_EXECUTE') or die('Access Denied.'); ?>

If we take basis in the Front page (forside.php), it will start by loading the header file.

<?php

defined('C5_EXECUTE') or die('Access Denied.');

$this->inc('elements/header.php');

?>

This file contains all the content for the header. This also includes the <head> tag with all the scripts and information for the browser and search engines.

For the files called in this part of the document we have used a little PHP script for C5 that gives the correct path to the file based on the used theme. A link will look like this when this script is used:

<link href="<?php echo $this->getThemePath(); ?>/css/owl.theme.css" rel="stylesheet" type="text/css" media="screen">

This file contains the menu as static HTML. It is possible to have C5 to update the menu automatically and we had that done in the earlier version of C5, but we did not have time to make it work with the new version of C5.

From here we are back in the forside.php again. The way that you make a website compatible with C5 is to use the static HTML as a basis. Therefore we have pasted the static HTML into this file and edited it a little bit. Editing the content out of the site and replacing the content with PHP scripts for C5, we are able to put the content back in when getting into the admin panel of C5.

Let’s take the countdown box as an example.

<section id="home" data-stellar-background-ratio="0.5" data-vide-bg="//amberfestival.dk/application/themes/ravfestival2/video/amberfestival">
   <div class="parallax-overlay"></div>
   <a id="video" class="player"></a>

   <div class="home-content text-center">
       <div class="container">
        <?php
        $b = new Area('Countdown');
        $b->display($c);
        ?>
       
   </div>
   </div>
</section><!--home section end-->

It is quite normal static HTML, and the area starting with “<?php” defines an area called Countdown that is able to be edited in C5.

This goes on all the way through the page, same code with different names.

In the bottom the footer.php will be loaded for the footer design and the ending scripts that are placed in the bottom with the loading time in mind.

<?php $this->inc('elements/footer.php'); ?>

Blocks

We have made use of a function in C5 called Blocks. This is a feature that allows the designer of the website to create content blocks, just like the standard Picture, Text etc. blocks.

We have created a:

Countdown block
Fun Fact block
Event block

We have also used a standard block for the contact form.

This allows the customer to create an otherwise very advanced block on the website very easily. The blocks are located in /application/blocks

All of the three blocks we have made is taking basis in the same principles so we will only go through one of the blocks in the following. All of the blocks has taken basis in the Quotes block that is standard in C5 and has been edited to work the way that we want it.

When copying a block, it is important that you do not install it before you are 100% ready and have changed everything needed. If you do not do this, you will probably end up making a mess in the database of C5.

The first thing to edit is the controller.php. This is the place where the name of the block, the database information and the description is placed.

The lines we have edited in here is:

namespace Application\Block\arrangement;
...
protected $btTable = 'btArrangement';
...
public function getBlockTypeDescription()
{
return t("Opretter en arrangement til brug på program siden.");
}

public function getBlockTypeName()
{
return t("Arrangement");
}

This is to allow us to reuse all of the block. So every mention of the Quotes block is removed and replaced with Arrangement.

Next up the form.php will be edited so that when you try to create the block inside C5 you will be asked the right questions and be able to give C5 the correct information it will use.

Inside here each question will look like this:

<div class="form-group">
   <?php echo $form->label('name', t('Titel'));?>
   <?php print $form->text('name', $name)?>
</div>

In this case it will ask for a title of the event and save it in a field in the database called name.

Another place in the same file the following code is represented:

<div class="form-group">
   <?php echo $form->label('fID', t('Picture'));?>
   <?php
   $al = Loader::helper('concrete/asset_library');
   print $al->file('ccm-b-file', 'fID', t('Choose File'), $fo);
   ?>
</div>

This code asks for a image file from the file library of C5.

When having setup the form.php file we have to make sure that the db.xml correspondents the used fields in form.php. db.xml decided what fields to create inside the database of C5 and will have to be 100% finished before installing the block as it will only do this check once.

Out finished db.xml file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<schema
 xmlns="http://www.concrete5.org/doctrine-xml/0.5"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.concrete5.org/doctrine-xml/0.5 http://concrete5.github.io/doctrine-xml/doctrine-xml-0.5.xsd">

 <table name="btArrangement">
   <field name="bID" type="integer">
     <unsigned/>
     <key/>
   </field>
   <field name="fID" type="integer">
     <unsigned/>
     <default value="0"/>
   </field>
   <field name="name" type="string" size="255"/>
   <field name="position" type="string" size="255"/>
   <field name="company" type="string" size="255"/>
   <field name="companyURL" type="string" size="255"/>
   <field name="paragraph" type="text" size="65535"/>
 </table>

</schema>

Where the <field name=”name” type=”string” size=”255″/> is the field for the form we just created.

Now that the form and the database is ready to use, we need to tell C5 how to show the data it got. This is done in the view.php.

The view.php looks like this:

<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
<div style="margin-bottom:10px;" class="col-md-12">
<div class="col-md-12">
<a class="collapsed" data-toggle="collapse" href="#<?php echo $bID?>" aria-expanded="false" aria-controls="<?php echo $bID?>">
   <h3 style="display:inline; margin-right:30px;"><?php echo h($position)?></h3>
   <h3 style="display:inline"><?php echo h($name)?></h3><br>
   <h3 style="display:inline; margin-left:120px; margin-right:0px; opacity:0.5;">@</h3>
   <h3 style="display:inline; opacity:0.5;"><?php echo h($company)?></h3>
</a></div>
<div class="collapse col-sm-12" id="<?php echo $bID?>" aria-expanded="false" style="height: 0px; padding-left:0px;">
   <div class="well col-md-12">
       <div class="col-md-4">
   <?php echo $image?>
           </div>

       <div class="col-md-8 more-program">
       <div class="headline-program"><h3><?php echo h($name)?></h3></div>
           <div class="whenandwhere">
       <h4><i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo h($position)?></h4>
       <h4><i class="fa fa-map-marker" aria-hidden="true"></i> <?php echo h($company)?></h4>    
              </div>
           <div class="paragraph-program">
       <p><?php echo h($paragraph)?></p></div></div></div>
</div>
</div>

It is basically just static HTML. It is containing all the design just as we would put in the design on one event in the event page. Instead of having the text written directly into the static HTML we have implemented some small PHP scripts that is calling the information that C5 has gotten through the block creation. In this way C5 is just replacing these PHP tags with the information we have given it.

An example of this could be the name tag that we just created, is in the view.php loaded as a h3.

<div class="headline-program"><h3><?php echo h($name)?></h3></div>

A loop is just used in C5 to keep getting information from the database until every block that is coded into the database through the admin panel is shown.

Styling of the block can be done in the view.css or just as we did in the standard CSS file.

The folder structure of C5

Before ending this part about C5 we want to explain a little about the folder structure in C5:

/application (The place where the user generated stuff is placed)
/application/blocks (The place for user made blocks)
/application/themes/ravfestival2 (The folder for our custom theme)
/application/hemes/ravfestival2/video (Video and static header)
/application/hemes/ravfestival2/css (CSS stuff)
/application/hemes/ravfestival2/elements (Page wide templates)
/application/hemes/ravfestival2/js (Javascript stuff)
/application/hemes/ravfestival2/forside.php (Front page template)
/application/hemes/ravfestival2/nyheder.php (News page template)
/application/hemes/ravfestival2/program.php (Program page template)
/application/hemes/ravfestival2/default.php (Default page template)
/concrete (The place where the system stuff is created. For example standard blocks)
/packages (Installed plugins)

Use of GitHub

In this project with the making of this website we have made use of Git connected up to Github. We have had two Github repositories, one for the static HTML and one for the C5 template.

In the start of the project we were able to use the Github Windows application in connection with Webstorm. When an edit was done we committed the change to Github and at Github we had made a little hook to a PHP script that automatically deployed the newest version of the repository to the server.

When we moved on to making the template directly in the C5 installation on the live server, we created a new repository. We wanted to make sure to have versioning, if something was changed that messed up. Instead of working through Webstorm and the Github application we had Git installed at the server and committed changes to the project through a SSH connection in Putty. This way we committed the changes directly on the server.

The footer scripts

In the footer we have both a Facebook and a Instagram feed. The Facebook feed is an iframe for Facebook pages that are freely available form the developers department of the Facebook website: https://developers.facebook.com/docs/plugins

The Instagram feed is showing the newest pictures hashtagged with the hashtag #ravfestival. We are here using a free version of the plugin called LightWidget that with a little help from some Javascript code downloads the newest pictures from a user or hashtag.

https://lightwidget.com/