By iwant2fly on

I am looking to see what it would cost to have someone solve this (most likely simple) problem. If it is a really simple solution you could always provide the answer for free in return for some public thanks on the forums. (I have to ask :))

The site is www.jamesriverpress.com

"Recent Work" Block

Send quotes to webmaster at jamesriverpress.com

I am trying to get two images to display horizontal in a block. Currently they are displaying vertically. The images are inserted into a CCK field using filefield/imagefield.

The final block should look like this:
[Node: Title]
[Content: Image] [Content:Image]
[Node: Title]
[Content: Image] [Content:Image]

Not
[Node: Title]
[Content: Image]
[Content:Image]
[Node: Title]
[Content: Image]
[Content:Image]

The images have varying dimensions, but the largest in either direction is 75px.

The solution needs to be expandable in case I decide to display more than two "Recent Work" Items.

Here is the information about the field from the Theme Information in Views:

Field Content: Image (field_image) (ID: field_image_fid): views-view-field.tpl.php, views-view-field--field-image-fid.tpl.php, views-view-field--Portfolio.tpl.php, views-view-field--Portfolio--field-image-fid.tpl.php, views-view-field--block.tpl.php, views-view-field--block--field-image-fid.tpl.php, views-view-field--Portfolio--block.tpl.php, views-view-field--Portfolio--block--field-image-fid.tpl.php, views-view-field--block-1.tpl.php, views-view-field--block-1--field-image-fid.tpl.php, views-view-field--Portfolio--block-1.tpl.php, views-view-field--Portfolio--block-1--field-image-fid.tpl.php

⋅ Categories: Drupal 6.x

Comments

paul kim consulting’s picture

paul kim consulting commented

The easiest way to do this is use the float:left property on the first image. It should have a unique id. If not, you'll need to modified that field template file to add a unique id to that image/div wrapper.

iwant2fly’s picture

iwant2fly commented

Right. That makes sense, but I don't really have a clue "how" to do that. I am struggling through learning CSS.

pbarnett’s picture

pbarnett commented 
.field-item-0, .field-item-1 {
  display: block;
  float: left;
}
.views-field-title {
  clear: left;
}

You might want to change the line-height on your main content, too - it looks a bit squashed and difficult to read.

Greg Varga’s picture

Greg Varga commented

paste this css at the end of your style.css file in the theme folder.
Don't forget, that CSS cacheing is turned on so you won't see the result unless
you clear cache or turn off caching. (admin / Performance)

.views-field-field-image-fid .field-item-0 {
    float:left;
}

hope this helps.

egyember

42droids.co.uk

pbarnett’s picture

pbarnett commented

Even better! :-)

nevets’s picture

nevets commented

I would use

.view-Portfolio .views-field-field-image-fid img {
  display: block;
  float: left;
}
.view-Portfolio.views-row {
  clear: both;
}
pbarnett’s picture

pbarnett commented

Missing dot before view-Portfolio?

nevets’s picture

nevets commented

Actually I copied too much, fixed the post.

iwant2fly’s picture

iwant2fly commented

Thanks to "pbarnett" drupal.org/user/61645 and "egyember" drupal.org/user/411341 for solving the problem.

You guys are awesome. When we get around to making a new theme for our web site you guys will be the first I will solicit for bids. Thank you for your incredibly fast and accurate response. You are what makes using Drupal fun.