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.

Improve this question

2 Answers 2

Reset to default
1

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

.field-field-event-image {
float: left;
}
Improve this answer
4
  • How do I configure Drupal to 'put field before the text'?
    – unpossible
    Commented Jul 11, 2011 at 13:14
  • You already have the date before the text.
    – Jeremy French
    Commented Jul 11, 2011 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
    Commented Jul 11, 2011 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
    Commented Jul 13, 2011 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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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