Having a Problem With SilverStripe FlexSlider? Fix It!

January 5, 2014HTML5, jQuery, SilverStripeDave

Note: You may have problems with your first installation of SilverStripe FlexSlider, there is a trick.

Have faith, the SilverStripe FlexSlider does work. The installation appears straight forward. Loading of images can be a bit clumsy, but is functional. The use of shortcode is easy, and insertion into the template files is simple. The details on loading and use of SilverStripe’s implementation of FlexSlider is at http://www.netefx.de/Silverstripe-flexslider.php.

However, there are two problem with the installation.

There is a problem with one step in the instructions

Install flexslider as explained on the page referenced above, but:
- When the instructions tell you to add
  Object::add_extension(‘Page’, ‘FlexSliderExtension’) ;
  to mysite/_config.php, stop,
- Run dev/build?flush=1 first,
- Then go to mysite/_config.php and insert the line, and
- Follow that with another dev/build?flush=1.
If you install the add_extension() before building the database,
you will get an installation error.
Line 219 of flexslider/code/FlexSlider.php must be commented out

The line “Requirements::javascript(THIRDPARTY_DIR . ‘/jquery/jquery.js’);” at line 219 of flexslider/code/FlexSlider.php must be commented out. This line loads jQuery.js, but, the default install of SilverStripe loads jquery.js. If jquery.js is loaded twice, jquery code becomes confused and jquery calls, such as calls to $FlexSlider() become confused and fail.

If you use the above adjustments to the documented install procedures on http://www.netefx.de/Silverstripe-flexslider.php, you should be running smoothly in no time.

Using SilverStripe – Part 2

December 31, 2013CSS, Javascript, SilverStripeDave

How to Find the Administration Panel

First things first. Eventually, you will want to get to the SilverStripe administration panel. You might expect to see an admin directory in the root directory, as done on Joomla, Drupal and WordPress, but you will be surprised to see no corresponding directory in SilverStripe. The SilverStripe administration is virtual, no obvious login or index file for it in particular. To get to administration, enter

/admin

Voila, you have the login access to the administration area. If you are looking for the actual admin files, they are available in the /framework/admin directory.

Where to Load Add-ons

Curiously, unlike Drupal, Joomla or WordPress, SilverStripe likes to clutter the Document Root directory with all add-ons folders. Retrieve your add-on from Git and the add-on folder will be stored in the site’s root directory.

If you use a ZIP file retrieved from the GIT directory for the add-on:

Unpack the zip file, leaving content in their add-on directory
Rename the add-on directory. If the add-on directory name has “silverstripe” prepended, or “-master” incorporated in the directory name, remove the “silverstripe” and “-master,” leaving only the application name as the directory name.
Replace “-” with “_” if a dash has been used in the naming of the directory.
Copy the add-on to the site’s root directory.

If you fail to remove the prepended or appended labels, the loading of the files will fail.

If you fail to replace “-” with “_”, the content will load, but, will load incorrectly and fail to function.

How to Rebuild the CMS Control Database

If you load an add-on or make changes to the database, you must rebuild the SilverStipe site. To rebuild, enter:

/dev/build

How to Clear Cache

To speed site display, SilverStripe caches page content. Anytime you make changes to template files and data base, clear the cache. Clear the cache every time you add a new add-on, anytime you create a new page type (explained later), or make any change affecting database or available php or ss files. Clear cache by entering:

/index.php?flush=1

Where to Load Images

SilverStripe design suggests that specific content belongs in specific directories. Templates will be placed in /themes subdirectory, you images belong in the /assets. As you load content via SilverStripe, images will be loaded to /assets/upload and subdirectories you request. You may want to arrange to use /assets as the area to store all files you ftp onto your site for consistency. Expect your images stored in subdirectories of:

/assets/upload

Summary

/admin – access to the administration panel
/ – location to store add-on directories
/dev/build – command to rebuild the site database
/index.php?flush=1 – command to flush the cache
/assets/upload – appropriate directory for storage of images

The next article will discuss creation of a template

Using SilverStripe – Part 1

December 31, 2013SilverStripeDave

SilverStripe is a CMS that is by no means the equivalent to WordPress, Drupal or Joomla, but, is worth considering for CMS projects. Drupal, Joomla and WordPress have modules/plugins and templates galore available to the developer. In contrast, SilverStripe has few plugins and fewer templates available. However, SilverStripe has all the fundamental CMS features needed to build a great CMS site, has less overhead, is a well designed object oriented engine, is very extensible and has reasonable documentation.

Out-of-the-box, SilverStripe is bare bones. While it is not difficult to load SilverStripe, to use it you need to know some “secrets.” The reason you need to know the secrets, most of the development tools are not attached to a cute interface that allows you to click your way through the development process. The backend administration area is an area that your clients would see, not a wondrous back-end that holds client interface and developer interface.

You need to know:

How to find the administration panel
Where to load add-ons
How to do rebuild the CMS control database
How to clear cache
Where to load images
How to create templates

While this all sounds like a lot of hassle, a little information can get you started and the actual processes are not all that bad. The secrets are documented at http://doc.silverstripe.com/framework/en/, but finding them takes time. This sequence of articles will summarizes the secrets while taking you through the process of creating a useful template.

Along with the above items, this sequence of articles will identify many of the other little odds and ends you need to complete the development … such as:

How to include css files
How to include javascript files
How to define page types
How to use include “.ss” files
What development tools are available
What add-ons I like to use

Use this article to create a template that adds data fields to the database, creates new administration tabs and a 3 column template.

HTML5 Placeholder

December 9, 2013HTML5, Javascript, jQueryDave

The new HTML5 attribute placeholder for the input tag could be wonderful if implemented correctly. Unfortunately, at the moment we have a problem on Firefox. When using placeholder on firefox, when focusing on the input field, the placeholder does not vanish. This gives the user the erroneous feel that the text is really there and attempts to “erase” it doesn’t work … it is in the background. The appearance is a bit confusing.

The following code can be used to create the “placeholder” behavior. Place a default value in an attribute called data-default, and that value will act as the placeholder.



    <script type="text/javascript">
      $(function() {
        $('input[type="text"]').focus(function() {
            if (!$(this).attr('data-default')) $(this).attr('data-default', $(this).val());
            if ($(this).val()==$(this).attr('data-default')) $(this).val('');
        });
        $('input[type="text"]').blur(function() {
            if ($(this).val()=='') $(this).val($(this).attr('data-default')); 
        });
        $( 'input[type="text"]' ).each(function( index ) {
            if ($(this).val()=='') {
			    $(this).val($(this).attr('data-default'));
			} 
        });
      }) ;
	</script>

jQuery is used, rather than simple javascript because the javascript getAttribute(‘data-function’) may not work correctly and new HTML5 data() may not work on all browsers. It is currently safest to use jQuery until HTML5 is a bit more mature.

Finding the location of an IP Address

December 5, 2013PHPDave

The following is a quick and simple way to find the general location of an IP Address. This tool only locates the region the IP Address is located in, not the exact location of the visitor. This identifies the location of the ISP that hosts the visitor. However, this can be useful.

[evalphp]
function theLocation($user_ip) {
$meta_tags =
get_meta_tags(‘http://www.geobytes.com/IPLocator.htm?GetLocation&template=php3.txt&IPAddress=’ . $user_ip) or die(‘Error getting meta tags’);
$city = $meta_tags[‘city’];
$state = $meta_tags[‘regioncode’];
$country = $meta_tags[‘fips104’];
$lat = $meta_tags[‘latitude’];
$lng = $meta_tags[‘longitude’];
return array($city, $state, $country, $lat, $lng ) ;
}
$visitor = $_SERVER[“REMOTE_ADDR”];

list($city, $state, $country, $lat, $lng) = theLocation($visitor) ;

echo “

Your Info: ” . $visitor . ” ⇒ ” . $city . “, ” . $state . “, ” . $country , “

” ;
[/evalphp]



    function theLocation($user_ip) {
        $meta_tags = get_meta_tags(
             'http://www.geobytes.com/IPLocator.htm?
             GetLocation&template=php3.txt&IPAddress=' . 
             $user_ip) or 
             die('Error getting meta tags');
        $city = $meta_tags['city'];
        $state = $meta_tags['regioncode'];
        $country = $meta_tags['fips104'];
        $lat = $meta_tags['latitude'];
        $long = $meta_tags['longitude'];
        return array($city, $state, $country, $lat, $lng ) ;
    }

    $visitor = $_SERVER["REMOTE_ADDR"];
  
    list($city, $state, $country, $lat, $lng) = 
        theLocation($visitor) ;
    echo "<p>Your Info: " . $visitor . 
            " &rArr; " . $city . ", " . 
            $state . ", " . $country , "</p>" ;

Advanced Web Help

What you need to know