Views slideshow field display
Hey guys,
I'm attempting to use View Slideshow for the first time and it's very cool. I have a slideshow up and running in my site's header. The slideshow view is showing content body and fields, not just images.
So I have a CCK content type that I've added an image field to (with imagecache settings applied). I'm trying to show a teaser in the views slideshow that shows some text along with the image.
My problem is that since the body and image are two different fields, they are displaying vertically, and I need to have the body displayed on the left and the image on the right, within the header. I can't use the table layout for the view since I'm using slideshow here.
How can I get the body and image to show next to each other horizontally in the views slideshow?
Thanks for what I'm sure will be valuable input!
Any thoughts guys? Please see
Any thoughts guys? Please see my first post. Thank you!
Could you provide the link
Could you provide the link where you set up your slideshow?
Attitude is mind's paintbrush, it can color any situation.
Sure
Sure thing...
www.mwebdev.com/at.html
Update: I looked at the
Update:
I looked at the Contemplate module for this purpose, but as far as I can tell, this is for content types and not for views. Please see the url I posted above. Thanks.
CSS Float
You can use a CSS float here, I would think.
The image is a separate field
The image is a separate field from the text (body), so as far as I know, floating won't work here. I tried it and it made no difference.
Maybe you could try
Add in css those things:
#block-views-test_carousel-block_1 .views-field-body { float: left;}
and
#block-views-test_carousel-block_1 .views-field-field-image-fid { float: right;}
Maybe you could try http://drupal.org/project/ddblock ">ddblock
This helps, but what if I
This CSS code helps, but what if I wanted to include additional fields such as Node:Title etc to the view?
Also, from looking at ddblock, it doesn't seem to be able to handle displaying Views. Is this correct?
Also, I'm trying to add a pager so that people can navigate through the view slideshow in the header. I've added a pager to the view setup, but no pager is appearing.
good css code
Well, any field that you add, you can shift where ever you want with good css code.
And about pager, do you have enough nodes for him to be displayed. I can see that you have only 3 nodes in your view.
About ddblock, I'm not sure, planing to "explore" that module sometime in a future.
About the pager, I had it set
About the pager, I had it set to 10 per page. I changed it to 1 per page, so now it displays the pager correctly. Thanks!
Is there an easy way to set up a "tab;e" structure in CSS? I'm doing some digging around as we speak.
Also concerning the pager,
Also concerning the pager, when I click on a page in the pager, the slideshow navigates to that view fine, but it keeps refreshing on that one page view. So if I click on the "2 of 3" link, it stays on 3, which is fine, but it keeps refreshing on 3. Is there any controls for this behavior? Thanks.
Don't know really, didn't
Don't know really, didn't work that much with slideshow in views. Try to search web for an answer, somewhere.
Take a look at the Read More
Take a look at the Read More link in the view slideshow (www.mwebdev.com/at.html). I've tried all kinds of css changes to adjust the position of this link, but it's tied to the body of the content, so whatever changes I make to the link, the body is also affected in the view. Any thoughts? Thanks.
Give those values, and read
Give those values, and read more will be just under body.
#block-views-test_carousel-block_1 .views-field-field-image-fid { width: 345px;}
#block-views-test_carousel-block_1 .field-content {float: left;}
When you write css code in drupal, the most important thing is to write unique id of div that contain targeted element , then unique class of subdiv and then unique class for that exact element. If you do that, you'll change css only for that exact element, not for all elements that contain same class and that are in same div.
For example, i would use :
#block-views-test_carousel-block_1 .views-field-view-node span.field-content
or #views_slideshow_div_1_0 .views-field-view-node span .field-content
instead of #block-views-test_carousel-block_1 .field-content
Beause class ".field-content" you have also under div with class ".views-field-field-image-fid" and they both are under div with id "#block-views-test_carousel-block_1", so changing #block-views-test_carousel-block_1 .field-content could affect and image element and read more element.
oboskovic,Thanks for the
oboskovic,
Thanks for the help. I'm still learning CSS so it's a bit challenging for me right now. Your explanation certainly helps.
Do you have any idea why the text is showing rough and jagged, especially in IE?
Thanks again.
UPDATE: I found this
UPDATE:
I found this article:http://jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html. However I would rather not add a solid background to the text... this would really mess up the look I'm trying to achieve.
Does anyone know a workaround for this javascript/IE issue? Thanks.
You need to read more on net.
You need to read more on net. Those css codes are some of basic, an you should try to "play" with them a bit. It is the best way to learn it.
I'm not sure what is problem in IE,, and it is hard to help someone with that, cause IE don't have firebug. Maybe you could try to give exact file-family, file-size, file-weight for #views_slideshow_div_1_0 .views-field-body .field-content p for IE. I don't think the problem is with opacity. Everything else seems ok (for example "read more").Think that problem is with definition of your font for that element.
oboskovic, Actually, the READ
oboskovic,
Actually, the READ MORE text is being affected as well. It's harder to see since it's smaller, but if you look more closely, you'll see it change once the fade out begins.
Really weird... I changed the
Really weird... I changed the color of the text to a lighter color from black and that has made things a lot better!