By i25 on

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!

⋅ Categories: Drupal 6.x

Comments

i25’s picture

i25 commented

Any thoughts guys? Please see my first post. Thank you!

jimthunderbird’s picture

jimthunderbird commented

Could you provide the link where you set up your slideshow?

i25’s picture

i25 commented

Sure thing...
www.mwebdev.com/at.html

i25’s picture

i25 commented

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.

gbrussel’s picture

gbrussel commented

You can use a CSS float here, I would think.

i25’s picture

i25 commented

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.

WildKitten’s picture

WildKitten commented

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 ddblock

i25’s picture

i25 commented

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.

WildKitten’s picture

WildKitten commented

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.

i25’s picture

i25 commented

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.

i25’s picture

i25 commented

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.

WildKitten’s picture

WildKitten commented

Don't know really, didn't work that much with slideshow in views. Try to search web for an answer, somewhere.

i25’s picture

i25 commented

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.

WildKitten’s picture

WildKitten commented

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.

i25’s picture

i25 commented

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.

i25’s picture

i25 commented

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.

WildKitten’s picture

WildKitten commented

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.

i25’s picture

i25 commented

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.

i25’s picture

i25 commented

Really weird... I changed the color of the text to a lighter color from black and that has made things a lot better!

jamesrward’s picture

jamesrward commented

Sorry to revive such an old thread but I am having a similar issue. I obviously just need some work understanding the css hierarchy used here.

I added the following css to my slideshow to float the image right of the title, teaser, and node_view link:

#block-views-Frontpage_Header-block_1 .views-field-field-article-image-fid { float: right;}

It works fine for the first node displayed but fails to float subsequent nodes to the right. You can view the problem at:
http://www.wardnet.com/dev/aidsinstitute/

Any help would be much appreciated.

rriche’s picture

rriche commented

i'm really new to this, how do i reside the slideshow frame to look like a slider.
right now the slideshow is taking the entire page.

please help.