By zilla on

so i've posted this question already over in imagefield but realized later that it's much more general css question regarding imagefield presentation so hope that somebody here in the larger forums may have a gut reaction to this...

original is at: http://drupal.org/node/324402
okay, so i'd like to modify the blank css that ships with imagefield to change how my imagefields are displayed (correct way to do this?)

right now, i have two imagefields: field_mainpic (only one image allowed) and field_pics

fields are displayed in nodes and teasers using imagecache presets (thumbnail, profilepics, storysize)

so for example, right now the 'unlimited image field' "field_pics" is showing 'profilepics' at the bottom of a node - they're basically just a bit larger than thumbnails and conjure up a lightbox gallery

...but they display in a vertical stack with ZERO spacing! i'd like change that, have them stacked horizontally and then scroll to next row for when there are many (using acquia marina theme, so main column is only like 500ish pixels with two sidebars, so if i've got ten pics set to 180px wide, need a couple of rows)

i've foudn this css snippet that i think may do the trick, but i'm not sure what else i'll need to - cut and edit into imagefield's empty css??

/* ----- CSS for imagefields ---------------------------------------------------------------- */

div.field_pics {
  display: inline;
  float: left;
  overflow: hidden;
    margin:10px 10px 10px 10px;
    border:1px none #ffffff;
    width: 180px;
    height: 180px;
}

div.clear_both {
  clear: both;
}

would this work? i'd change width and height - but do i need to? won't the imagecache preset handle that anyways? and should this go in the theme? how do i reference a div like this to make it work (do i need to do something else)? i'm not a big css person, so this is way beyond me!!
any advice is appreciated

⋅ Categories: Drupal 6.x

Comments

zilla’s picture

zilla commented

is anybody doing something like this? for example, to show a thumbnail from imagefield inline with a teaser as opposed to above or below? or in rows versus stacked (like myquestion)?

........................................................................
i love to waste time: http://twitter.com/passingnotes

Jeff Burnz’s picture

Jeff Burnz commented

Link to your site or the actual HTML pasted here would certainly help, typically a simple float left on the img would suffice. I dont know what class to define or the HTML (both of which are critical to know...) but...

.class-whatever img {float: left}

Since you want them to wrap to a new line (so to speak) you'll want to define the margins so they look like a grid, even when they wrap...

.class-whatever img {float: left; margin: 5px 10px; }

Notice we defined only 5px for top and bottom margin?

Need help with IE?
Learn basic XHTML and CSS first.
Get smart with web specs.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
zilla’s picture

zilla commented

sorry, the site is still offline in dev mode, but it's a standard acquia marina using imagefield and imagecache (and cck) to post these images into nodes

what's confusing is that there's an empty css with imagefield which implies that this is where the bit of styling should go to 'wrap' the imagefields with teh above code

but then how do i actually invoke the .class for the imagefield? i'm a bit confused - like do i go to the actual acquia marina theme and modify it with the original snippet that i posted above and then use that second .class-whatever someplace else? and simply replace .class-whatever wiht the actual field name, like .class-field_mainpic?

........................................................................
i love to waste time: http://twitter.com/passingnotes

gforce301’s picture

gforce301 commented

Dave,

If you could paste the source of the page in code tags here it will be easier to explain what the problem is and what you need to do.

Edit:
BTW I am still voting +1 for Drunads lol

zilla’s picture

zilla commented

may move this over to the imagefields forum so that i can attach screenshots too (wish these forums allowed image attachments, but whatever)

btw, what do you think of the code and approach this guy is using on drupal for the exact same issue???

he's doing this with contemplate module: http://circlesandscissors.com/blog/theming-cck-imagefields-contemplate

........................................................................
i love to waste time: http://twitter.com/passingnotes

gforce301’s picture

gforce301 commented

Personally I don't use contemplate and I never will. I am very comfortable making real content templates and I do not wish the overhead of a module and more database calls for something that is not that hard to do or to learn how to do.

zilla’s picture

zilla commented

funny, i poked around and found a snippet and modified it, and it's all working well - but with *content templates* module!!...using this for teasers (with my own field name)

<div class="field field-type-image field-field-image">
  <div class="field-items" style="float:left" margin="5px 0 10px 0">
  <?php if ($node->field_mainstorypic[0]['view'] > '') : ?><?php print $node->field_mainstorypic[0]['view'] ?><?php endif; ?></div>
<?php print $node->content['body']['#value']; ?>
  </div>

...but it ignores my margin request and instead text is touching the right side of the image!!! am i missing a semi-colon or something?

as for the page itself, i've also used this dude's code and it works quite well, BUT it is a table (ugh) and limited to certain number of pics (i've raised to 24 as most users will *never* get that far, knock on wood

it looks like:
*that line below with 'mainstorypic' puts my 'main story picture' at top of node - but not inline or inline float padded!! damn!

<div class="field field-type-image field-field-image">
 <div class="field-items">
  <?php if ($node->field_mainstorypic[0]['view'] > '') : ?><?php print $node->field_mainstorypic[0]['view'] ?><?php endif; ?></div>
  <div class="field-items">
<?php print $node->content['body']['#value']; ?><p />
 <table cellspacing="4">
<tr>
        <td><?php if ($node->field_pics[0]['view'] > '') : ?><?php print $node->field_pics[0]['view'] ?><?php endif; ?></td>
        <td><?php if ($node->field_pics[1]['view'] > '') : ?><?php print $node->field_pics[1]['view'] ?><?php endif; ?></td>
        <td><?php if ($node->field_pics[2]['view'] > '') : ?><?php print $node->field_pics[2]['view'] ?><?php endif; ?></td>
</tr>
<tr>

...and that basically repeats til it hits 24...lays out nicely because of my imagecache preset - but it is STILL a table!

what is the difference if i were to put this code into a new node-story.tpl for my content type story versus just using content template to override?
........................................................................
i love to waste time: http://twitter.com/passingnotes

dan.crouthamel’s picture

dan.crouthamel commented

I've wondered myself if it would be more efficient to use a custom node.tpl.php file, versus contemplate. But contemplate supports disk based templates, so is it really that bad?