Background slideshow images in CSS possible?

You can make anything a background image if you rewrite the output from Views. If you add the right relationships to get at the File URL field, you can rewrite this field to something like this:

<div class="myimage" style="background-image: url([file_url]);">&nbsp;</div>

Where [file_url] will be swapped out with the file URL field that you have added.

I'm quite certain you can use HTML in your rewritten output. See this screenshot.

Oh, I see what you're saying. The "style" attribute is indeed always stripped. Hmm. I was also going to suggest using a "Global: Custom text" field to enter your own layout and exclude the display of all other fields (that's commonly a cheap way of theming without a template file), but I think you'd run into the same issue there.

Subscribe

I was looking for the same task, but with Views Nivo Slider #1221138: How to output images as backgrounds for divisions? Going to try djh007's suggestion now.

djh007, I couldn't figure out "output a background image (using the image path) " part. I've got image path, but how to output an image as a background? Rewriting output as <div class="ss" style="background-image:url([field_image_fid]);">[field_image_fid]</div>, as noted above by yourself, always strips out style tag.

Update: djh007, I figured out I needed to use view's template files, thanks!

I have added the relationship with the image cck field, but where to write the code to replace the background?

Really if you think about it, all you need to do is this: http://www.techerator.com/2010/11/how-to-make-a-css-background-slideshow...

Replace the path to each image in the jquery code to reflect where the user is uploading the images, just make sure the naming convention is the same as in the code. Just put a little note under the image field that you have the following slide.jpg, slide1.jpg etc... available. When it comes to a large background image like that in such an important place I wouldn't imagine you would be letting just any old admin to upload those images, especially on a large website. Also, how often are they really going to change? Don't over think this one.

Hope this makes sense. I'll post a link to a site im doing this on asap.

Don't forget in Drupal 7 to wrap your JS code in:
(function($){
})(jQuery);

Their is also another way to do the entire thing through drupal using views slideshow but requires a little know how. Took a while to think it out but it works in all browsers from what I have tested.

instead of document.ready

Thanks for your post birchy82. Im trying to follow along but i dont understand how to to?

djh007. I dont follow. Is it possible for you to write a step by step instruction?

I've used Views_Slideshow for a region-background slideshow http://cchelp.biz
I'll write some instructions soon.

Here is a website i did with a working example of it using views slideshow and a little modification http://www.eastcoastmetallic.com/

I'm going to close this issue as it's not actually even talking about using jCarousel module at this point.

how to do this? please.

Hi birchy82,

Here is a website i did with a working example of it using views slideshow and a little modification http://www.eastcoastmetallic.com/

Your example look like exactly what I wanted, I would be really great if you could you explain me how to do it?

I am facing the same problem as others have mentioned on top.

Thanks,
Anand

Thanks a lot djh007,

I was trying to figure out alternative ways to have dynamic background images for views slide show. now that views strips css all I could do was hard-coding the background image, content on slide everything else in to body of multiple nodes of a content type(to have multiple slides), and then add body default field with views slide show. sounds very simple and without creating tpl file. (^_^)

I did as I mentioned above, but now I have to work up on css to keep my slideshow in the center of the browser screen.

Also doing this we can have each slide in different design of content floating around... :-P.

Thanks & Regards,
AnAnD

I feel Wow!!! now, after centering the slideshow. (^_^)

Hi!

I'm following your instruction... However, I can't find the image path as a token. Could you explain me step by step "the file relationship" in Views

Tks !

Hi

Impossible for my browser to read any "css inline" when I rewrite the output of this field.

ANy suggestions are welcome !

#26 #27 Everything is ok... For informations read CAREFULLY all comments from djh007 ;-)

Hi criterion and welcome to Drupal.org! I'm glad that you seem to have sorted this out, but in the future please refrain from changing issues' priority to critical unless that is the case. A problem of critical importance to any person does not necessarily make it critical based on Drupal.org standards. To find out more about when to use each priority you can follow the Priority link in the help text available under the Priority drop-down menu (there's also one for Status that you might want to check out as well). Specifically in our case, you'll see that for priority it mentions (in the last paragraph) that:

Support requests should never be marked 'critical' ...

If you are using image cache presets for the slideshow you can fetch them by adding a Global PHP field (Views PHP module required), and using the file URI from the relationship you can output the path to your imagecache preset
Code I have in my Global PHP block, 1st param is imagecache preset style, 2nd is a variable created from image file URI token

print image_style_url('homepage_main_slideshow', $row->uri);

The result being the full path to the imagecache preset:
..site.co.uk/sites/default/files/styles/homepage_main_slideshow/public/warehouse%202.jpg

Hi djh007,

Thanks for posting your override code.

For some reason, this code is not working for me. I create a theme-specific field tpl.php, and in it I drop this bit of code:

<div class="field-content" style=" background-repeat:no-repeat; background-position:center; background-image:url('<?php print $output;?>');"><img src="<?php print $output;?>"style="visibility:hidden;"></div>

The result is two copies of the same image with some this in between:

');">

and this at the end:

"style="visibility:hidden;">

So, for some reason the tpl is not being parsed correctly. I'm not much of a coder, as you can probably guess. Any suggestions are welcome.

Hi, I am getting the same thing. The syntax is wrong but I do not know PHP.

In case anyone is experiencing the same problems as mgriebe and myself. I figured it out finally.

The important thing which IS mentioned in this thread but wasn't highlighted enough for my brain, was to rewrite the image field as a path. You do this by setting a relationship:

Add a "File Usage: File" relationship (Advanced->Relationsips)
Add a "File: Path" field and click "Display download path instead of file storage URI"

Blimey...what a pain barrier that was!!

Although its an old & closed issue, I am sharing a simple JQuery based method I used for achieving this functionality.

Steps
1. Followed method in #34 to get the file path printed as field in the view.

2. Added following JQuery code in the header of the view (of course, it should be added in a custom JS file & called on this page rather than embedding in views header)

<script type="text/javascript">
// I wish to apply dynamic background images to a div with the class .views-slideshow-cycle-main-frame-row. 
//The image should be picked up dynamically from the same row, returned by view, as an image path, in a <span> in the same div as above. 

(function($){
$(document).ready(function() {
$(".views-slideshow-cycle-main-frame-row").each (function() {
$(this).css("background-image", "url("+ $("span", this).text() +")");
$("span", this).hide();
});
});
})(jQuery);
</script>

Hope this helps someone! Will be happy to provide full documentation if someone needs it.

Does that mean you could apply it to the website body background image or wrapper div rather than a block? I'd be very interested in further details

@zincdesign, I was able to apply it to the block which contained the view.

I will share the link of the site once it is live.

You say you figured out how to center the slideshow, but you don't say how you did it... please explain in details if you can... please!!

Okay... I have the slideshow centered... jquery.cycle was giving me issues with that, but I now I have another issue. For each node I have a slideshow image upload and a main page image upload. I want the slideshow image to go to the slideshow and the main page image to only appear on the node content page, but for some reason, even though I DO NOT have the main_image_field added to this view, it puts itself in the slideshow too???

Any ideas why? anybody have this same issue? Is it the php print $output, is it just grabbing any image and tossing it into the slideshow?

I would just take out that field, but the main_image_field also shows up as a thumbnail on a teaser landing page. I don't understand why it's grabbing both image fields and dumping them into the slideshow.

I spent sometime on placing an image over the slideshow in the background.
Thought a writeup may be useful to someone.

Steps are:
1.In the Slideshow view - go to Theme information. For the template files of the first instance of your image field, copy the filename after views-view-field.tpl.php (this is the highlighted one, choose the one after this). e.g. if your filed name is field_property_image, copy views-view-field--field-property-image.tpl.php
2. Create a file views-view-field--field-property-image.tpl.php in your themes folder. (\sites\all\themes\yourthemename\views-view-field--field-property-image.tpl.php)
3. Copy the contents of \sites\all\modules\views\theme\views-view-field.tpl.php to the above file. Save.
Replace the original code with the following:

<div id = "search-table" style="position: relative; width: 1400px; height: 516px; overflow: hidden;">
<div class="field-content" style=" z-index:1 ; position: absolute; background-repeat:no-repeat; background-position:center; background-image:url('<?php print $output;?>');"><img src="<?php print $output;?>"style="visibility:hidden; "></img></div>
</div>

In the page.tpl.php of your theme, replace the code for Slideshow Region as below:

<div id = "search-table"style="position: relative; width: 1400px; height: 516px; overflow: hidden;">	  
		<?php if ($page['slideshow']): ?>
      <div id="slideshow" style=" position: absolute;z-index:1"  ><div style=" position: absolute;"  class="width-wrapper"><div style="position: absolute;" class="slideshow-inner clearfix">	
        <?php print render($page['slideshow']); ?>
		
	  </div> </div>  </div>
    <?php endif; ?> 
<div  style=" position: absolute;z-index:2" >
<img src="path to your image file"></img>
</div>
   </div>

Adjust the image size as per your requirement.
This should position your image over the slideshow (in the background).

Happy dupaling!

hmm I get some: 'Undefined variable: output in include()' errors on that views tpl overide ?

Hi guys, thanks vivdrupal for the recap, it's working perfectly !
This topic is exactly what I needed to make a 100% slideshow on front page. Even if it's been 2 years no one commented it.

BUT, I also want to implement a search bar below the slideshow for accessing a page of content with specific criterias. The problem is I need to use the module : "Views Block Exposed Filter Blocks"

It works great but it makes me lose the background slideshow. I have no idea how to install the module without losing my background slideshow. Any ideas ? What information may I give you to help you understand my issue ?

Thanks for your time guys, great work !!

Found out, but couldn't edit my previous comment, thanks guys bye.

Background Images Formatter or Simple Background image formatter would probably help some people out here as well, but I guess it works best when the images are actually separate nodes (instead of being output from a multifield).

It allows you to apply a background image to an HTML element in Views, using a selector with a [nid] token. You can combine this with various slideshow plugins.

This is what worked for me:
Follow the directions in #6, #15, #23, #34.
And finally make sure that the only field that actually display is the "File: Path File field". That is what will be rendered in the output specified in the template.

@Prasad Shir, #35 Quick & very nice solution. Thanks :)