Posted by saepl on November 1, 2009 at 6:09pm
Jump to:
| Project: | Views Slideshow |
| Version: | 6.x-2.0 |
| Component: | Documentation |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
I would like to be able to add some text on top of my slideshow images kind of like what is seen here http://twoshirts.org/ or here http://thefarmhouse.com Can this module support this? Any assistance in helping me get closer to that goal would be much appreciated.
P.S. This is *kind of* a duplicate of this http://drupal.org/node/458834
Comments
#1
Yes it can. You'll need to use css to move yoru text above. Something like margin-top: -100px for the text. So output the image first and then the text. Then use css in your theme to move the text into the image area.
Hope this helps.
#2
I was thinking of that approach. Thanks. I'll give it a try!
#3
Hi saepl,
Were you able to achieve what you wanted? Are you willing to share how?
I'm going crazy with the same stuff
#4
Haven't gotten around to it yet...sorry :( This was for a site I was developing but was put on hold. I did look at the css and putting one div in front of the other was the way I was going to try it.
#5
I built the rotator on twoshirts.org and that actually uses http://drupal.org/project/views_rotator . However, I just did a new one using Views slideshow over at http://stjohnswestbend.org and it was even easier.
The key is the css position attribute. Set your main image section to position: relative, then your text rows to position: absolute...then position wherever you want.
Good luck!
#6
The slideshow at stjohnswestbend is awesome. Currently I am using ddblock which is a nightmare to get to work and moreover a total screw up with fusion based themes.
I am trying to recreate Rob's great effort but I am unable to get the text as overlay of the picture. Don't even want the pagerpictures to the left. They can stay at under the main slide. Currently I have the slide and the pagerpictures and between them the text of my "pager text"-field.
I am using firebug but seemingly getting lost constantly.
Is there a chance anybody has some kind of tutorial at hand or is willing to provide one? I am not a grandmaster with CSS but very eager to learn. So any additional help would be awesome.
#7
You could get this from firebug, but this may be easier (and hopefully helpful since if you named your View "homepage_rotator" you should be able to just drop this in). Combine this with a proper imagecache setting and you're good to go. Here's the css code for the slideshow currently on the homepage of http://StJohnsWestBend.org (courtesy of http://mustardseedmedia.com of course :)
Your classes and IDs should be the same as what's shown here so go thru the code and look at your markup to see how it works.
/* HOMEPAGE SLIDESHOW */
#block-views-homepage_rotator-block_1 {
position: relative;
float: right;
width: 585px;
height: 375px;
overflow: hidden;
}
#views_slideshow_singleframe_main_1 {
position: relative;
}
#views_slideshow_singleframe_main_1 .slideshow-text-bg {
position: absolute;
height: 90px;
width: 500px;
background-color: #45392A;
left: 0px;
bottom: 1px;
filter:alpha(opacity=70);
opacity: 0.7;
-moz-opacity:0.7;
}
#views_slideshow_singleframe_main_1 .slideshow-text {
position: absolute;
height: 70px;
width: 480px;
color: #fff;
left: 0px;
bottom: 1px;
padding: 10px;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
#views_slideshow_singleframe_main_1 .slideshow-title {
font-weight: bold;
font-size: 1.2em;
color: #fff;
}
#views_slideshow_singleframe_main_1 .slideshow-more a {
color: #CFC2A1
}
#views_slideshow_singleframe_pager_1 {
position: absolute;
top: 0px;
right: 0px;
}
#views_slideshow_singleframe_pager_1 .pager-item {
display: block;
}
#views_slideshow_singleframe_pager_1 div a img {
width: 80px;
height: 71px;
}
Oh, and I'm still building this, so if the code is sloppy...well...too bad :)
#8
subscribing
#9
@ Bob
Thx a million. I am still not comfortable with firebug and css changes so your code can be as sloppy as Pig Pen - it helps me a lot. I've watched most of your videos and now you have helped me again. If you ever visit Cologne I'll buy you a beer. ;)
#10
@dddave, @Rob_Feature
Hello to all here...
May it´s possible to work with imagecache, doing a preset for the slideshow.
Using the imagecache addons (actions..), you may could overlay the dark part of the picture and combining it with Token you could put for example the node-titel into the darkt part of the picture. Isn´t it?
#11
Mmh, never thought of this possibility. Might be worth a look...
#12
I've actually used imagecache actions to write the text on a number of projects. I have to say that after lots of experience there, I'm going to start using this CSS method more instead. There are 2 reasons CSS is better (at least for me):
So, while imagecache actions is possible...I find that CSS has given me a much better answer to this problem.
#13
@Rob_Feature
1. That´s true.
2. For the manageability, it´s possible to use a CCK Field, wich you call "Text for banner" and to set up this for the picture. So the user don´t get confused and do not change the node name.
At the same time, you got the possibility to use the banner for the latest 5 news automatically. I don´t know if this will work with your html/css solution too.
#14
I am trying hard to create a slightshow like the one discussed above but so far I only get it by "cheating". I am using the css stuff provided by rob but can only apply it to one field. My problem is that I am pretty unable to insert the needed divs (slideshow-text and slideshow-text-bg). As far as I understand it I have to use a custom views template for the row style output, don't I? But where the heck do I "integrate" those divs? I watched the great video over at mustardseed but really hitting a brick wall.
btw: When I finally get it to work, I am going to provide a tutorial. Promised!
#15
I've been to play around with that.
With this code I'm getting somewhere but not yet where I'm trying to get...
Posting it, if it may help.
Also, please have a look at http://kofiannanfoundation.org/ is this using Views Slideshow ?
#views_slideshow_singleframe_main_1.viewsSlideshowSingleFrame-processed
{margin-left: 30px; }
#views_slideshow_singleframe_teaser_section_1.views_slideshow_singleframe_teaser_section
{ position: relative;
width:943px;
height:300px;
overflow: hidden;}
.views-field-body
{ position: relative;
opacity: 0.7;
margin-top:-45px;
}
#16
Hey Rob or anybody else,
On the slideshow for the site http://stjohnswestbend.org that you made, How did you get the text on the image to not inherit the transparency of the background that you set at "opacity:.7;". I tried to duplicate what you did with that, but still my text ends up inheriting that transparency, and shows up very light even though it's supposed to be "white".
Here is a sample of what I did. http://mamaroberta.com/drupal/views-slideshow
What do you think?
Dan
#17
@dandolino
Note the HTML for the slideshow on http://stjohnswestbend.org and you'll see how it works....I made the background an empty div that's OUTSIDE the div containing the text and is positioned absolutely...then I set it's transparency. If it's not outside the text div, the text will inherit the transparency.
#18
I think we have some good solutions here. Marking as fixed.
#19
Great info!
#20
Rob, thanks for the info.
#21
Hey All,
Watch this method in action on a video podcast I did over at: http://mustardseedmedia.com/podcast/episode42
Hope it helps!
#22
Thanks Rob for the podcast. I've got it running on a local site and was wondering if there was a way to add a new pager option. I'd love to use just a simple bullet as the pager but I'm having trouble trying to get it to work correctly and display bullets for all 4 images in the slideshow.
#23
Automatically closed -- issue fixed for 2 weeks with no activity.
#24
@dawiyo
Creating a bullet style pager can be acheived with some simple css. You will leave the pager as a standard numbered pager.
You basically just need some css to hide the pager numbers and replace them with the appropriate bullet background.
ul.slideshow-pager li a {background:url("images/pager-bullet.png") no-repeat scroll 0 0 transparent;
display:block;
height:10px;
width:10px;
text-indent:-9999px;
}
Study the code at http://kofiannanfoundation.org/ for more details.
Speaking of pagers, I would love to have another pager option added ... so that the pager could display text (perhaps the title field). This would make it possible to create nice looking tabs to navigate between the slides. It would be ideal if I could select the field(s) to include in the pager from the list of fields set in the view. That way you could do cool things like display the title along with a short date field for events or you could display the node title along with a comment count to help entice users. This flexibility would accommodate many fringe use cases.
#25
@MikeyLikesIt have you used Thumbnailhover? That's what that does.
#26
Thank You Rob, I watched your video and left a comment as well. I was able to achieve what you showed in the video, but can you tell me how to put the thumbnails pager on the right side of the image instead of bottom. Thank You.
#27
alrite i was able to put the thumbnails on the right side, but they only show up correctly in FF, chrome and safari. they don't show up correctly in IE for some reason, is there anyway i can fix that?
#28
Des Raaj without a site to look at it's going to be impossible to tell you what the problem is. If I was going to take a guess I would say that with padding and margins ie makes your main frame too wide and your thumbnails are wrapping. But again that's just a guess. Please open a new issue if you continue to have problems.
#29
I can't get the pager to show up as a UL...any ideas? Sorry the site isn't live, I'm working on my localhost.
#30
Clint Open a new issue
#31
Total newbie question, but what file do you add the css to?
#32
Any one of your themes files. Look at whatever theme you are looking for and there is probably a style.css you can add it to.
#33
I know this is an old thread but I been trying to find a way to do this for a month before stumbling on the video by Rob_Feature over at: http://mustardseedmedia.com/podcast/episode42. I am still not able to make it work. I created 4 test nodes and only added a picture and title. I then set up a view to display the node type I set up. I now have a view with that rotates 4 images but I cannot figure out how he got the 4 images under the larger image as shown on the video.
I am also unable to find node: teaser or node:title as shown in the video. I am using views slideshow 7.x-3.0 on drupal 7.10. I am not a drupal master by any means but I learning quickly and I am grateful for all the help I get on the forums.
#34
The 'images under the larger image' are pager thumbnail images.
Wrote this up quickly, hope it helps and not too confusing.
#35
@rwilson0429
I have a slideshow set up and working but now when I go to rewrite output and do the to create the title and other links like in the video my image completely disappears, any ideas?
#36
Just to be certain I understand, before you do a rewrite of the teaser field, your slideshow functions properly with a main image and image thumbnails are shown for the pager as expected.
Assuming my understanding is correct, when troubleshooting problems, I always like to start with the obvious first. So, make sure that you haven't mistakenly clicked the 'Exclude from Display' on your image field. The only fields that should be excluded from display are the Title, Teaser and, Read More Link. These three fields will be shown in the Rewrite Results for the Teaser field.
Also, make sure you are not putting your Rewrite on the Image field.
#37
rwilson0429 one of the problems is that I cant even find a teaser field anywhere to pick. I am beginning to feel pretty stupid because I cant seem to locate it anywhere. You can see the site here http://www.scouttroop210.org/user the sample slideshow I have set up is only two slides right on the home page.
username and password are both demo
#38
@scampbell70
Ok, maybe you setup your slideshow to show 'Fields' instead of content. No problem, fields are probably better because you have more control of what and how your information is displayed.
I visited your link, it looks like you will need to add your image field again to the Fields section of the view . Basically, the image style of your second image field will need to be set to thumbnail or a custom image style that you define at admin/config/media/image-styles. So, the list under your View's Fields section will be something like: content:title [optional], content:image, content:image.
Based on what I see on your home page, the only thing you need to do is add the same image field again to your Fields display and set it to the appropriate image-style (I use a custom style that is scaled to 40px x 40px for my pager images). After adding the 2nd image field and applying the appropriate styles, you will need to configure the pager on your Slideshow Settings link. Under the Slideshow Settings, set your Pager type to 'Fields' then, right under that, select the image field you want to use as your pager.
#39
Correct I have it setup as fields. I have thumbnails but excluded them from the view. I turned them back on and here is a screenshot of the view admin panel if it helps
http://scouttroop210.org/img/view.png
You can still go to the site with the demo account
#40
@scampbell70, Assuming you are using D7, Views3 and Views slideshow 7.x-3.x, you can try to import the following Slideshow view. To import: copy the code below, create a new view and select the Import link on the View configuration page then, paste the code into the import area.
Besure to change the fields, and filter criteria to your specific needs. BTW, you would only exclude the image field if you were rewriting the output. Once you get your view setup properly then, you can deal with the rewriting and positioning of the output as outlined in the video.
$view = new view;
$view->name = 'clone_of_gallery';
$view->description = 'Picture galleries view';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'Clone of Gallery';
$view->core = 7;
$view->api_version = '3.0';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */
/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['title'] = 'Gallery';
$handler->display->display_options['use_ajax'] = TRUE;
$handler->display->display_options['access']['type'] = 'perm';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['query']['options']['query_comment'] = FALSE;
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['pager']['type'] = 'full';
$handler->display->display_options['pager']['options']['items_per_page'] = '5';
$handler->display->display_options['pager']['options']['offset'] = '0';
$handler->display->display_options['pager']['options']['id'] = '0';
$handler->display->display_options['pager']['options']['expose']['items_per_page_options_all'] = 0;
$handler->display->display_options['style_plugin'] = 'slideshow';
$handler->display->display_options['style_options']['slideshow_type'] = 'views_slideshow_cycle';
$handler->display->display_options['style_options']['slideshow_skin'] = 'default';
$handler->display->display_options['style_options']['skin_info'] = array(
'class' => 'default',
'name' => 'Default',
'module' => 'views_slideshow',
'path' => '',
'stylesheets' => array(),
);
$handler->display->display_options['style_options']['widgets']['top']['views_slideshow_pager']['weight'] = '1';
$handler->display->display_options['style_options']['widgets']['top']['views_slideshow_controls']['weight'] = '1';
$handler->display->display_options['style_options']['widgets']['top']['views_slideshow_controls']['type'] = 'views_slideshow_controls_text';
$handler->display->display_options['style_options']['widgets']['top']['views_slideshow_slide_counter']['weight'] = '1';
$handler->display->display_options['style_options']['widgets']['bottom']['views_slideshow_pager']['enable'] = 1;
$handler->display->display_options['style_options']['widgets']['bottom']['views_slideshow_pager']['weight'] = '1';
$handler->display->display_options['style_options']['widgets']['bottom']['views_slideshow_controls']['weight'] = '1';
$handler->display->display_options['style_options']['widgets']['bottom']['views_slideshow_controls']['type'] = 'views_slideshow_controls_text';
$handler->display->display_options['style_options']['widgets']['bottom']['views_slideshow_slide_counter']['weight'] = '1';
$handler->display->display_options['style_options']['views_slideshow_cycle']['timeout'] = '5000';
$handler->display->display_options['style_options']['views_slideshow_cycle']['speed'] = '700';
$handler->display->display_options['style_options']['views_slideshow_cycle']['delay'] = '0';
$handler->display->display_options['style_options']['views_slideshow_cycle']['start_paused'] = 0;
$handler->display->display_options['style_options']['views_slideshow_cycle']['remember_slide_days'] = '1';
$handler->display->display_options['style_options']['views_slideshow_cycle']['items_per_slide'] = '1';
$handler->display->display_options['style_options']['views_slideshow_cycle']['wait_for_image_load_timeout'] = '3000';
$handler->display->display_options['style_options']['views_slideshow_cycle']['cleartype'] = 0;
$handler->display->display_options['style_options']['views_slideshow_cycle']['cleartypenobg'] = 0;
$handler->display->display_options['row_plugin'] = 'fields';
$handler->display->display_options['row_options']['hide_empty'] = 0;
$handler->display->display_options['row_options']['default_field_elements'] = 1;
/* Field: Content: Picture Gallery */
$handler->display->display_options['fields']['field_pictures']['id'] = 'field_pictures';
$handler->display->display_options['fields']['field_pictures']['table'] = 'field_data_field_pictures';
$handler->display->display_options['fields']['field_pictures']['field'] = 'field_pictures';
$handler->display->display_options['fields']['field_pictures']['label'] = '';
$handler->display->display_options['fields']['field_pictures']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['external'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['field_pictures']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['field_pictures']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['trim'] = 0;
$handler->display->display_options['fields']['field_pictures']['alter']['html'] = 0;
$handler->display->display_options['fields']['field_pictures']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_pictures']['element_default_classes'] = 1;
$handler->display->display_options['fields']['field_pictures']['hide_empty'] = 0;
$handler->display->display_options['fields']['field_pictures']['empty_zero'] = 0;
$handler->display->display_options['fields']['field_pictures']['hide_alter_empty'] = 0;
$handler->display->display_options['fields']['field_pictures']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_pictures']['settings'] = array(
'image_style' => 'large',
'image_link' => '',
);
$handler->display->display_options['fields']['field_pictures']['group_column'] = 'fid';
$handler->display->display_options['fields']['field_pictures']['group_rows'] = 0;
$handler->display->display_options['fields']['field_pictures']['delta_offset'] = '0';
$handler->display->display_options['fields']['field_pictures']['delta_reversed'] = 0;
$handler->display->display_options['fields']['field_pictures']['delta_first_last'] = 0;
$handler->display->display_options['fields']['field_pictures']['field_api_classes'] = 0;
/* Field: Content: Picture Gallery */
$handler->display->display_options['fields']['field_pictures_1']['id'] = 'field_pictures_1';
$handler->display->display_options['fields']['field_pictures_1']['table'] = 'field_data_field_pictures';
$handler->display->display_options['fields']['field_pictures_1']['field'] = 'field_pictures';
$handler->display->display_options['fields']['field_pictures_1']['label'] = '';
$handler->display->display_options['fields']['field_pictures_1']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['external'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['field_pictures_1']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['field_pictures_1']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['trim'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['alter']['html'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_pictures_1']['element_default_classes'] = 1;
$handler->display->display_options['fields']['field_pictures_1']['hide_empty'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['empty_zero'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['hide_alter_empty'] = 1;
$handler->display->display_options['fields']['field_pictures_1']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_pictures_1']['settings'] = array(
'image_style' => 'thumbnail',
'image_link' => '',
);
$handler->display->display_options['fields']['field_pictures_1']['group_rows'] = 1;
$handler->display->display_options['fields']['field_pictures_1']['delta_offset'] = '0';
$handler->display->display_options['fields']['field_pictures_1']['delta_reversed'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['delta_first_last'] = 0;
$handler->display->display_options['fields']['field_pictures_1']['field_api_classes'] = 0;
/* Sort criterion: Content: Post date */
$handler->display->display_options['sorts']['created']['id'] = 'created';
$handler->display->display_options['sorts']['created']['table'] = 'node';
$handler->display->display_options['sorts']['created']['field'] = 'created';
$handler->display->display_options['sorts']['created']['order'] = 'DESC';
/* Filter criterion: Content: Published */
$handler->display->display_options['filters']['status']['id'] = 'status';
$handler->display->display_options['filters']['status']['table'] = 'node';
$handler->display->display_options['filters']['status']['field'] = 'status';
$handler->display->display_options['filters']['status']['value'] = 1;
$handler->display->display_options['filters']['status']['group'] = 0;
$handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;
/* Filter criterion: Content: Type */
$handler->display->display_options['filters']['type']['id'] = 'type';
$handler->display->display_options['filters']['type']['table'] = 'node';
$handler->display->display_options['filters']['type']['field'] = 'type';
$handler->display->display_options['filters']['type']['value'] = array(
'picture_gallery' => 'picture_gallery',
);
#41
@rwilson0429 that you for the info I am sorry I havent got to try it yet and get back to you but I will asap. I was down with a nasty bug and I am an full time college student and the semester just started back up, so I been stretched thin.
#42
Another method is just to put the image as the first row, then set
.view-field-field-image { /* or what ever the appropriate field wrapper class is */height: 0;
overflow: auto;
}
You might also need a z-index, and still need to set the height of the parent row and block. Not sure how browser compatible it is..