0

I would like to have a body text wrap around the the image below. Here is an example:

http://www.fareham.ac.uk/events/2011/06/creative-arts-summer-exhibition

And here's an excerpt of the code:

<div class="content">
  <div class="field field-type-date field-field-event-date">
    <div class="field-items">
      <div class="field-item odd">
        <span class="date-display-single">Fri 24 Jun 2011</span>
      </div>
    </div>
  </div>
  <p>
    Don't miss your chance to see the incredible artwork produced by this year's Creative Arts students at Fareham College.
  </p>
  <p>
    The exhibition will be held on the College campus, featuring work from our Art, Graphic Design, Photography, Fashion and Media students.
  </p>
  <p>
    This event runs on weekdays from 10am–4pm on 24th June–1th July 2011 in both the A-Block and the Function Room at Fareham College.
  </p>
  <p>
    We look forward to seeing you.
  </p>
  <div class="field field-type-filefield field-field-event-image">
    <div class="field-items">
      <div class="field-item odd">
        <img class="imagefield imagefield-field_event_image" width="188" height="266" alt="" src="http://www.fareham.ac.uk/sites/default/files/creative-arts-summer-exhibition.jpg?1310378590">
      </div>
    </div>
  </div>
</div>

How can I get the with the text in to wrap around the with image in?

Thank you.

1

Put the field before the text and apply a float class to the field.

.field-field-event-image {
float: left;
}
4
  • How do I configure Drupal to 'put field before the text'? – unpossible Jul 11 '11 at 13:14
  • You already have the date before the text. – Jeremy French Jul 11 '11 at 13:15
  • 1
    The order of the elements needs to change as the image needs to come before the text in order to allow it to float around it. Otherwise the image will still just sit under the text. – thatboyjim Jul 11 '11 at 15:18
  • I don't know why I didn't think of this sooner, but I changed the order of page elements here: /admin/content/node-type/event/fields, which allowed me to float the image using CSS as above. For what it's worth, that same can be achieved with the Panels module. Thanks. – unpossible Jul 13 '11 at 11:54
1

I would overriding the node template for this content type.

This can be achieved by copying the node.tpl.php file and renaming it to something like

node-event.tpl.php (change event to the machine readable name of the content type)

You can then output the fields manually in whatever order you need them along with your markup.

I find the easiest way of working out the variable names is by installed the Content Templates module which lets you see the variables going to that node template.

Hope this helps.

1
  • This is helpful, thanks thatboyjim - I shall install contemplate module and have a crack! – unpossible Jul 11 '11 at 15:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.