How to do a magazine style layout short

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
Anonymous's picture

What I wanted to do was be able to layout images on a page in such a way that I could control the placement and size. I couldn't reallly find anything on this for Drupal 7. This will only work for one image size and image per node, but that was all I needed. However in panels you will be able to combine images. You will need to know how to work with panels, views, and fields (core) for this.

After looking at various options and exploring them I came up with the following solution. Having looked at automated solutions as well, but the size and subject of images varied to much to get a result that looked right for what was needed. E.g. subjects that were large would turn out small and vice versa. So there was a need for manual review.

  1. Add a field to your content type and name it 'image width'. Make this a list field. In the values add 10% to 100% in 10% increments. So you get 10%, 20%, 30%, etc. (Please see fields information on how to do this). Set the standard value to 100% (or other standard you prefer.)

  2. Set up your views so it shows a image for your node based on the argument passed from a panel, and set the necessary settings. (Please see views and panels information on this)

For a views field select 'rewrite results'. Then add something like the following custom code:

<div class="image-wrapper">
<img width="[field_image_width]" src="[field_image]" title="[title]" alt="[description]"/>
</div>
  1. Set up your panel, and select the view panes of your seperate images, and place these in the panels layout.

Style your panel and views as needed. Now whenever you want to add images you can use panels for the layout, and set the size in your node. The size field won't effect the field in your node, just through views.

That is the way I found, but I'm open to suggestions for a better way. If you get stuck somewhere feel free to let me know.
You may want to do it slightly different, but this document gives a general direction on one way on how to do this.

Image

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week