Drupal views slideshow image as css style background

Thought I'd document this as I will probably do this in future developments.

I wanted a views slideshow, with the images appearing full screen with text ontop. It appears simple at first but actually required more digging.

Backstretch does not work with views slideshow, as it applies the image background to elements not within the slideshow.

I found a slightly helpful article which suggested a fix, but later found the forum from where more helpful information was taken.

to sum it up, you need views to output the url of the image for the field, and then use a views template override to get this url and 'render' it inside a html element as the background-image style.

To do this:

1. Get views to output the url of the image
1. in the views view, add a Relationship
1. this needs to be a 'File Usage: file'
2. next add a field '(file) File Path
1. in this field, tick the box titled:
1. Display download path instead of file storage URI
2. Now to render this URL inside a HTML element you need a template override
1. In views veiw, go to 'Other' > 'Theme' > 'Information'
1. find the template override for the field
2. create a new file with that exact name and place it in your theme
2. inside this file paste this:
1. <div class="mainImage" style="background-image:url('&lt;?php print $output;?&gt;');">&lt;!--<img src="&lt;?php print $output;?&gt;"style="visibility:hidden; "></img>--&gt;</div>
3. Done

You can now style this .mainImage div as:

.mainImage {

position: fixed;

height: 100%;

width: 100%;

top: 0px;

left: 0px;

z-index: -2000;

background: no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

sorted.

It now changes with the views slideshow.

adding javascript to a template

Whilst making templates in Joomla I am always wanting to add a little javascript here and there but always hitting a brick wall. What usually seems to happen is that the script, or another on the page doesn't seem to run.

Looking into it it looks like it is to do with how it is loaded. It looks like you cannot have mutliple scripts using the on page load command. It only runs once and probably on the first occurance, maybe the last?

Looking at Joomla specifically, I found the official article on how to add inline and external javascripts. I'm going to try this out before investingating anything else.

Joomla 3 template and bootstrap

So, after making a nice template the same as I'd done in Joomla 2.5, there are some slight differences when you log onto the front-end. Noticably that the cute little icons of yesterday are gone.

Reading into it, there's this new thing called BootStrap. Very good once you get the hang of it. I found a nice tutorial on it here

The main things to do to get bootstrap are:

1. In the index.php file for your template, right at the top include (tutorial here):
1. $doc = JFactory::getDocument();
2. $doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
2. Secondly, make sure the including your stylesheets here

)

Just be sure to override stuff in your template when it pops up.

Joomla Template selector

So I would like an extension which will allow users to select which template they would like. Eventually I would like an extension which would allow users to create and upload templates which users could then select.

First off I am trying Template Selector.

Well, it works exactly like it says on the box. Only had a little trouble working it, but it's my fault.

1. download
2. install
3. go to Extensions > Plugin Manager
1. switch it on
4. go to Extensions > Module Manager
1. switch it on
2. activate for all pages
3. select which templates to select

Done

Only issue is that you need to make sure the position the module is in is present in all the templates it will be switched between.

To take it back to the default template simply delete the cookies in the web browser.

Creating a Joomla Template

So, I've made a few websites in Joomla now, but I've only been able to 'cobble' them together either by editing existing templates, or by deleting content from a traditional website I've made and putting the right code it.

This second way is close enough to the real thing. I've found this nice tutorial on how to do it for Joomla 1.5. But it's not too different from the latest version (2.5).

I think the easiest way is to have your own machine setup as a webserver (see this blog on setting that up) and editing the files locally, and easily seeing what Joomla makes of it by viewing the pages through the web browser.

On top of this I found this youtube video explaining how you can setup dreamweaver to interact with the website locally so you can edit all files in dreamweaver. To do it:

1. Set up a new site in Dreamweaver
2. edit the local folder to that of the joomla site
3. in server enter the web URL which you need to type in the browser to access the site
4. Make sure you tick the "testing" box

Here are some screenshots:

locate the local root folder for that particular joomla website

enter the weburl that the computer has to go to view the website

Make sure to tick the "testing" box.

If you havent got a new template in the joomla site yet, just create the folder within the templates folder, make index.php and templateDetails.xml files (found tutorial here), then go to extensions > extension Manager > Discover > press Discover button. If you're templateDetails.xml file is the correct format then you should see it in the list. Tick and click install.

To edit a template:

1. load up its "index.php" in it's own template folder
2. click "live view"
3. click yes to the dialogue box
4. you will need to change the address of the viewing page to the root of the joomla site. i.e. you are editing the main template, which changes the whole site. So you view the website like normal

I did have a few problems refreshing whatever changes I'd made. The simplist was to just go to File > Save All, which would then work.