Sunday, 06 December 2015 18:15

Background Images - Gantry Framework for Joomla

Written by
Rate this item
(0 votes)

Joomla Gantry Framework is very flexible "tool" for rapid web development. It needs a bit of love although. You need to read documentation and carefully inspect code. In this article I am going to show you, the way you can set up background image upload in back end gantry template control panel. I took example from gantry build-in function for uploading logo, made few amendments and for me works fine. We need to work with two files.


1) styledeclaration.php

2) templateOption.xml

First lets have a look at styledeclaration.php. First we need to create function:

I called this function buildBackground. It takes four parameters with last one default to empty string. Parameters are self explanatory: $bgRepeat for repeating background and $parallaxBg for pseudoparallax effect. Values are taken from templateOption.xml .We have some checking on files, stuff which I basically took from build-in gantry buildLogo() function.

$backgroundRepeat = $gantry->get($bgRepeat);
$parallaxBackground = $gantry->get($parallaxBg);

we create and return variable output, the interesting part is how we put all these stuff together. It is self explanatory

$output .= $cssSelector."{background: url(".$source.") ".$backgroundRepeat." ". $parallaxBackground." !important }"."\n";

if all is good we return whole output variable:

return (file_exists($file)) ?$output : '';

Ok. We have just created our function, now time to call it. Let's say we are going to set up background for our social "row" (#rt-social). We call it as below:

We basically pass parameters from templateOptions.xml

$css.= $this->buildBackground('rtsocialbackground-rtSocialBackgroundRepeat','rtsocialbackground-rtsocial-BGK',"#rt-social",'rtsocialbackground-rtSocialParallaxBackground');

To make it more clear have a look at templateOptions.xml:

We need to create this snippet, but should be clear by now how variables are passed to styledeclaration.php. You can set up one big background, or repeated pattern. It is good to know how to play with gantry xml file ,their features and styledeclaration.php
To see how it is done in CSS, use firebug or google web developer tool:

Now we are done, time to have a look at what "user" sees on backend of our Joomla template:

I hope you found this article helpful. Thank you for reading.

Read 2342 times