I'm using the excellent JCarousel module and am trying to create something similar to this:
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 :)
Comment | File | Size | Author |
---|---|---|---|
#26 | Image 15.png | 11.48 KB | criterion |
#3 | views-rewrite.png | 60.66 KB | quicksketch |
Comments
Comment #1
quicksketchYou 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:
Where [file_url] will be swapped out with the file URL field that you have added.
Comment #2
djh007 CreditAttribution: djh007 commentedThanks 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...
Comment #3
quicksketchI'm quite certain you can use HTML in your rewritten output. See this screenshot.
Comment #4
quicksketchOh, 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.
Comment #5
djh007 CreditAttribution: djh007 commentedI 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.
Comment #6
djh007 CreditAttribution: djh007 commentedIn 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.
Comment #7
grincon CreditAttribution: grincon commentedSubscribe
Comment #8
yngens CreditAttribution: yngens commentedI 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.
Comment #9
yngens CreditAttribution: yngens commenteddjh007, 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!
Comment #10
ravisagar CreditAttribution: ravisagar commentedI have added the relationship with the image cck field, but where to write the code to replace the background?
Comment #11
birchy82 CreditAttribution: birchy82 commentedReally 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
Comment #12
MorganG CreditAttribution: MorganG commentedThanks for your post birchy82. Im trying to follow along but i dont understand how to to?
Comment #13
MorganG CreditAttribution: MorganG commenteddjh007. I dont follow. Is it possible for you to write a step by step instruction?
Comment #14
GreenSkunkI've used Views_Slideshow for a region-background slideshow http://cchelp.biz
I'll write some instructions soon.
Comment #15
djh007 CreditAttribution: djh007 commentedHi 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 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.Comment #16
birchy82 CreditAttribution: birchy82 commentedHere is a website i did with a working example of it using views slideshow and a little modification http://www.eastcoastmetallic.com/
Comment #17
quicksketchI'm going to close this issue as it's not actually even talking about using jCarousel module at this point.
Comment #18
salvatore_severo CreditAttribution: salvatore_severo commentedhow to do this? please.
Comment #19
djh007 CreditAttribution: djh007 commentedIn 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]') :)
Comment #20
djh007 CreditAttribution: djh007 commentedI've moved this to Views Slideshow since it has absolutely nothing to do with JCarousel.
Comment #21
Anandyrh CreditAttribution: Anandyrh commentedHi birchy82,
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
Comment #22
djh007 CreditAttribution: djh007 commentedHi 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]';).
Comment #23
djh007 CreditAttribution: djh007 commentedIn case it's useful, this is what my theme override looks like:
Comment #24
Anandyrh CreditAttribution: Anandyrh commentedThanks 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
Comment #25
Anandyrh CreditAttribution: Anandyrh commentedI feel Wow!!! now, after centering the slideshow. (^_^)
Comment #26
criterion CreditAttribution: criterion commentedHi!
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 !
Comment #27
criterion CreditAttribution: criterion commentedHi
Impossible for my browser to read any "css inline" when I rewrite the output of this field.
ANy suggestions are welcome !
Comment #28
criterion CreditAttribution: criterion commented#26 #27 Everything is ok... For informations read CAREFULLY all comments from djh007 ;-)
Comment #29
klonosHi 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:Comment #30
davewilly CreditAttribution: davewilly commentedIf 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
The result being the full path to the imagecache preset:
..site.co.uk/sites/default/files/styles/homepage_main_slideshow/public/warehouse%202.jpg
Comment #31
mgriebe CreditAttribution: mgriebe commentedHi 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:
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.
Comment #32
zincdesign CreditAttribution: zincdesign commentedHi, I am getting the same thing. The syntax is wrong but I do not know PHP.
Comment #33
djh007 CreditAttribution: djh007 commentedIt'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!
Comment #34
zincdesign CreditAttribution: zincdesign commentedIn 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!!
Comment #35
Prasad Shir CreditAttribution: Prasad Shir commentedAlthough 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)
Hope this helps someone! Will be happy to provide full documentation if someone needs it.
Comment #36
zincdesign CreditAttribution: zincdesign commentedDoes 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
Comment #37
Prasad Shir CreditAttribution: Prasad Shir commented@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.
Comment #38
steven_kropp CreditAttribution: steven_kropp commentedYou 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!!
Comment #39
steven_kropp CreditAttribution: steven_kropp commentedOkay... 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.
Comment #40
vivdrupal CreditAttribution: vivdrupal commentedI 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:
In the page.tpl.php of your theme, replace the code for Slideshow Region as below:
Adjust the image size as per your requirement.
This should position your image over the slideshow (in the background).
Happy dupaling!
Comment #41
jorisx CreditAttribution: jorisx commentedhmm I get some: 'Undefined variable: output in include()' errors on that views tpl overide ?
Comment #42
Angelysto CreditAttribution: Angelysto commentedHi 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 !!
Comment #43
Angelysto CreditAttribution: Angelysto commentedFound out, but couldn't edit my previous comment, thanks guys bye.
Comment #44
knalstaaf CreditAttribution: knalstaaf commentedBackground 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.
Comment #45
bjarkekronborg CreditAttribution: bjarkekronborg as a volunteer commentedThis 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.
Comment #46
kalidasan CreditAttribution: kalidasan commented@Prasad Shir, #35 Quick & very nice solution. Thanks :)