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.

Drupal Slideshow with text overlay

I have a content type which I has a main picture and some intro text and a title. I would like to 'slideshow' this full screen, with the text of each one over the top of the image, and the title at the top of the page. With thumbnails of all down the side, clickable.

I've seen this post which describes doing it with Views Slideshow, as demo'd here. I shall give it a go presently.

it involves adding a folder into the server. Look at the error when you try and enable the module.

After the install all appeared very nice and worked almost swimmingly.

Joomla free Image Gallery and slideshows

So, thought I'd look into image galleries in Joomla.

Found a few free extensions. The one I ended up trying was "Simple Image Gallery" because I wanted to try the 'low' end first and see how easy it was.

So, also found this page which is the simple instructions:

1. download and install plugin
2. enable plugin (wasn't written in the instructions but I worked it out)
3. create a folder in "images" folder using Media Manager
4. Put your images in here
5. Make a new article
6. somewhere in the article put :
1. {gallery}name_of_your_folder{/gallery}
2. it has to be curly brackets!
7. done

Quite simple really.

I notice they do a pro version as well. Looks like the pro is better, having descriptions and different styles. I'll have to look into how to do this.

Phoco Gallery looks like a good alternative, and has slideshow capabilities

Just seen this site version of it which:

• Phoca templates
• Phoca extensions
• VirtueMart extensions
• Phoca Theme for VirtueMart (software extensions for CMS Joomla!)

 Looks amazing!!


As for slideshows, found DJ ImageSlider which looks and works brilliantly. It has its' own slide management system with slides and categories, but also includes a custom module!! Brilliant