I'm using the excellent JCarousel module and am trying to create something similar to this:

www.dale.no

It's simple enough to create a full width slideshow and adding text over images is not too bothersome with a few adjustments to CSS.

But is it possible to make the images into backgrond CSS images, the same as on the dale.no site? The reason is, when you resize the browser, or use a different size monitor, I would like the centre of the image to remain in the centre of the browser. The sides of the images just act as buffers but the real content is in the centre. At the moment, on a square monitor, the centre of the images are cropped by the right hand side of the view port.

Any suggestions are very welcome :)

Files: 
CommentFileSizeAuthor
#26 Image 15.png11.48 KBcriterion
#3 views-rewrite.png60.66 KBquicksketch

Comments

quicksketch’s picture

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.

djh007’s picture

Thanks quicksketch.

It's a great idea, but Views does not allow any styling markup in replacement pattern :( It's a security measure to stop JS injection, although I'm the only one with access to Views UI, so it's not actually an issue.

I almost found a pure CSS solution using neg margins, position:absolute and percentage positions, but it's inelegant and still not working properly. Trying to decide whether to pursue CSS or hack Views. Hmmm.

Let me know if you have any other great ideas. I considered creating a new jCarousel tpl, but it's kinda beyond my normal expertise. I'm a CSS and HTML man really...

quicksketch’s picture

FileSize
60.66 KB

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

quicksketch’s picture

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.

djh007’s picture

I tried creating a custom text field in the content type with style="", and added this as a token. This was a bit too optimistic - no joy as still gets filtered.

I tried the CSS route using margin-left:-900px [half image width], left:-50%, position:absolute but without success. It interferes with the JS and works great until you try and scroll an image.

I could hack Views, removing the filter, but this is not at all satisfactory.

Apparently the way forward is to somehow create a template for the specific Views field, adding a background:url. But I have a View running through Panels (custom front page) so I'm not sure if this is very simple. Don't even know where to start.

Wonder if anyone has any other suggestions, or knows of a tutorial for creating a template for a Views field.

djh007’s picture

In case it's useful to anyone, it is possible and quite painless to create a background slideshow using Views Slideshow.

Using a Views field template for your image, output a background image (using the image path) and also display the image in the div (the slideshow uses the image in the div to determine the size of it's display). - To get the path, set a file relationship in Views and the image path will then appear as a token.

Then, override the slideshow css to hide the image in the div and give it a width of 100% - visibility:hidden; width: 100% !important;. (Use a fixed height for the image if you don't want the image (div) to scale vertically).

Set the slideshow container to 100%.

Set you background image to be centred.

And that's it. A full width slideshow, with images that remain central on browser resize.

grincon’s picture

Subscribe

yngens’s picture

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.

yngens’s picture

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!

ravisagar’s picture

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

birchy82’s picture

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

MorganG’s picture

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

MorganG’s picture

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

GreenSkunk’s picture

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

djh007’s picture

Hi Morgan

It's been a while since I did this, so details are a bit sketchy.

From memory, you essentially need to modify the Views field template file to show the image as a background image (using CSS). So instead of outputting as Only local images are allowed. it's outputting

. You then use a token to place your image as a CSS background... I hope that is of some help. Sorry that details are a bit hazy.
birchy82’s picture

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

quicksketch’s picture

Status: Active » Closed (fixed)

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

salvatore_severo’s picture

how to do this? please.

djh007’s picture

In Views, create a template file for your slideshow image field. Instead of the template outputting [image_field], make that field into a background image (background-image:url'[image_field]') :)

djh007’s picture

Project: jCarousel » Views Slideshow
Version: 7.x-2.4-alpha3 » 7.x-3.x-dev

I've moved this to Views Slideshow since it has absolutely nothing to do with JCarousel.

Anandyrh’s picture

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

djh007’s picture

Hi Anandyrh - read #6 #15 and #19 for an explanation of how to achieve this. Once again, create a views template for your field and, using tokens, output the field as a background image rather than an HTML element (background-image:url'[path to your image]';).

djh007’s picture

In case it's useful, this is what my theme override looks like:

<?php
 /**
  * This template is used to print a single field in a view. It is not
  * actually used in default Views, as this is registered as a theme
  * function which has better performance. For single overrides, the
  * template is perfectly okay.
  *
  * Variables available:
  * - $view: The view object
  * - $field: The field handler object that can process the input
  * - $row: The raw SQL result that can be used
  * - $output: The processed output that will normally be used.
  *
  * When fetching output from the $row, this construct should be used:
  * $data = $row->{$field->field_alias}
  *
  * The above will guarantee that you'll always get the correct data,
  * regardless of any changes in the aliasing that might happen if
  * the view is modified.
  */
?>
<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>
Anandyrh’s picture

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

Anandyrh’s picture

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

criterion’s picture

Priority: Normal » Critical
FileSize
11.48 KB

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 !

criterion’s picture

Hi

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

ANy suggestions are welcome !

criterion’s picture

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

klonos’s picture

Priority: Critical » Normal

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' ...

davewilly’s picture

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

mgriebe’s picture

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.

zincdesign’s picture

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

djh007’s picture

It's been quite a while since I did this and the code above was directly copied from my template file - which is working perfectly!

Are you sure you're applying the template to the correct field?
Are you sure you're closing all your tags properly?
(Your code snippet looks exactly right so I don't know why this shouldn't work. Perhaps there's been changes in Views or Drupal since I made the template? Although I find this unlikely.)

All I can see mgriebe is your php fields are being half processed (one image and one background image (?) are being shown) but your inline CSS is being ignored (the top image is not being hidden). It looks like your closing tag ?> is also being ignored?

Essentially all this code is doing is putting a (hidden) image in a div:
<img src="<?php print $output;?>"style="visibility:hidden;">

And setting the background of the div to the same image:
<div class="field-content" style=" background-repeat:no-repeat; background-position:center; background-image:url('<?php print $output;?>');"></div>

where <?php print $output;?> should just print the path to the image.

Sorry I can't be much more use. It's been ages since I used Drupal butI I remember how FRUSTRATING Drupal can be!

zincdesign’s picture

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!!

Prasad Shir’s picture

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.

zincdesign’s picture

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

Prasad Shir’s picture

@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.

steven_kropp’s picture

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!!

steven_kropp’s picture

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.

vivdrupal’s picture

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!

jorisx’s picture

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

Angelysto’s picture

Issue summary: View changes

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 !!

Angelysto’s picture

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

knalstaaf’s picture

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.

bjarkekronborg’s picture

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.

kalidasan’s picture

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