By blucky on

http://www.drivesouth.co.nz/news/4405/bentley-tour-battles-on

Guys, did you knew the modules to view content like this web? (see "From the Classifieds")

I need to view image so its formation can be like this:
         | Title

IMAGE | Deskripsi

         |

Please help me!! I'm sorry if there was this questions before, I was done external search but very difficult to find the result. Thanks in advanced guys.

⋅ Categories: Drupal 5.x

Comments

dnewkerk’s picture

dnewkerk commented

Hello -

Yes this is a pretty simple block, that can be reproduced using these modules: Views, CCK, Imagefield, and Imagecache. And topped off with a little bit of Views theming and CSS. Getting the image and text laid out visually that way (once Views has produced the raw data for you) is just basic HTML/CSS. Add a float to the image, add style/padding, etc.

It would be difficult for me to explain the whole process here if you're not at all familiar with the modules yet (once you get the hang of it though, the sky's the limit)... however, have a look at these resources to get you on the right track.
This is a lesson on making a view I wrote (not quite a match for your needs, but most of the steps are the same): http://drupal.org/node/168752#comment-263585
Here's a collection of Drupal learning resources I've written up as well (as well as listing some very helpful video lessons on CCK, Views, etc). This video lesson will give you a better grasp also regarding working with Imagefield and Imagecache.

-- David
absolutecross.com

blucky’s picture

blucky commented

Thanks Keyz for all resources,

However I just don't know what type of view to show that block? View with teaser type or list type (css)?
Or maybe there is kind of view like that.

I read your comment at http://drupal.org/node/168752#comment-263585
Is it possible that i just use css like this?
.img{
float:left;
}

When I use that css all image would be float to the left. I just want float only from my image(from cck image field) from specific content type. How to put the css in my block? or how to know which object to put in css? Should I use panel which is support css embedd?

Thank again David.

dnewkerk’s picture

dnewkerk commented

Yep what you should choose is the List type. In my case I use almost exclusively List views (I have very little use for the other formats, and List gives the most control).

Here's some tips I've written on Views theming:
HowTo: Use the Views Theme Wizard
HowTo: Theme Taxonomy Term listing pages using Views

Using the float: left you mentioned is correct, however what you need to do is use a unique container of some sort that surrounds either the image itself or the block as a whole, so that you can tell the image (or all the images within the container) to float left and not affect other images on the site. This is making use of the "Cascading" part of CSS (cascading style sheets)... you are adding "specificity" to those images so that rules can affect them but not other images. If you view your source code (e.g. with Firebug) after adding a View block to a page, you will notice that all Views are surrounded by a div that contains a unique ID and/or class name based on the name of your view.

Example: you have a Block view named "latest_updates"... in your source code when you load your site, you'll see the following added automatically surrounding your view:

<div id="block-views-latest_updates" class="block block-views">
... etc ...
</div>

You could do something along the lines of #block-views-latest_updates img { float: left; } to make your float affect just images within that View. You may have to adjust things to get the rules to take effect (CSS can be a little tricky when there are so many nested divs and different IDs and classes - a tool like Firebug will help. A CSS rule may not take effect if some other rule is more "specific" than the rule you are adding, so you may need to use a different ID or class, or stack them like #some_id #block-views-latest_updates .another_class img { float: left; }.

Anyhow, since this is a common request, in the future I think I'll make a whole guide from A to Z on exactly this - though I won't have time right now.

-- David
absolutecross.com

blucky’s picture

blucky commented

Hi David,

Thanks again for your helpful tutorial. Now I know if we create block using views with list type then the drupal'll create id "block-views-nameofviews" for block and "views-list-nameofview" for page, won't it? Is it correct? From this step, the css will do the rest. :p

Thank's, that's what i'm looking for :p

Thank you very much David

dnewkerk’s picture

dnewkerk commented

Yep that's correct :)

Good luck with your site!

-- David
absolutecross.com

ngudiono’s picture

ngudiono commented

I do not understand the instructions, can be made clear again?

lina.irshaid’s picture

lina.irshaid commented

You can use display suite module which contains Node display, view display and layout of your content types. Adjust you content type teaser and in th view you can show the Node teaser of your content type. For Example you can put in the header of you Content type teaser the title of your node the in the right your image and in the left your text.

drupaleze’s picture

drupaleze commented

I'm new to drupal and it's been difficult getting my page to display in a format i.e. with text color and images.

I've install cck, configured CKEditor under Wysiwyg. Even my formating is done Full HTML and yet when I preview, there are no changes. Is there anything I'm missing?

Thanks for your assistance