By frychiko on

I've installed the Image module and there's a feature to attach images to your content.

The problem is I don't know how to customise how it is displayed. Attached images always seem to be floated to the right and not cleared. I would like to center the image and clear the image.

cheers,
Frychiko

⋅ Categories: Drupal 6.x

Comments

tmallen’s picture

tmallen commented

You could accomplish this with CSS in your theme:

.whatever-exclusive-class-images-have {
    display: block;
    margin: 0 auto;
    /* if necessary */
    clear: both;
}

Just view the source to find out the image's class and add that to the bottom of style.css.

frychiko’s picture

frychiko commented

Awesome thanks for that tmallen.

asb’s picture

asb commented

Is this supposed to work? In which browsers? At least inside a View this isn't working at all. The image can't be even right aligned. I'm seeing this code:

...
<div class="views-field-image-attach-images">
  <span class="field-content">
    <div class="image-attach-node-1097" style="width: 180px;">
      <a href="/blog/..." class="active">
        <img src="http://..." alt="..." title="..." class="image image-250 " width="180" height="250"/>
      </a>
    </div>
  </span>
</div>
...

With .views-field-image-attach-images span.field-content a img.image I can target the attached image, but whatever I put in the CSS, it doesn't show up in the view (but in Firebug/Dragonfly!)

Firebug gives me this:

.views-field-image-attach-images span.field-content a img.image { 
  background-color: #ff0000;
  display: block;
  float: right;
}

Result: left aligned image without red background (Drupal 6, Views 2).

I can put 

  display: block;
  margin: 0 auto;
  clear: both;

into .views-field-image-attach-images, .views-field-image-attach-images span.field-content, .views-field-image-attach-images span.field-content a img, or all of them - nothing is being centred in the view.

It starts to get interesting, when I put the container in an inline-block and the image in a table-cell:

.views-field-image-attach-images span.field-content {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 1px;
}
.views-field-image-attach-images span.field-content a img { 
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

This right aligns the image, at least in Opera and Chromium, but still nothing is being centred.

It's getting better, as soon as I put the container in a table:

.views-field-image-attach-images span.field-content a img.image {
  display: block; 
  margin: 0 auto; 
}
.views-field-image-attach-images span.field-content {
  display: table;   
  margin: 10px auto; 
}

This centres the field in the view in Opera and Chromium; the question is, if this would be the correct approach, and what other browsers are saying to display: table.

Greetings, -asb