Structured layout in Drupal

Question

I'm having trouble understanding how to approach layout in Drupal. I want to create a structure where (authorized) users with no designing skills can add content by simply adding content selecting a particular content type.

So e.g. I want to have one type of page that consists of a number of sections (rows) with an image on one side (should be possible to alternate which side) and a heading and text on the other side. If the heading and text is on the right, the heading should be just above the text, and not above the image to the left.

An arbitrary number of sections/rows should be possible to add.

I've managed to do something like this with panels and mini-panels. But it seems like I'm trying very hard to achieve something that feels rather basic... In any case, what I did was I added a page selecting panels with the 1-column layout. This allows me to add rows arbitrarily. First problem here is, the end user would have to select this on their own, I would have liked to have a preset content type with this.

Secondly, I created some mini-panels with content that can be added to the sections of the panel page. More problems: to create these mini-panels and make them lay out as described I have to create mini-panels of a 2-column format, omit the title, add only an image to one of the columns using add custom content selection - no title, and add a title and some text to the other column.

All of this is rather complex just to achieve this layout. It makes me think it would be much easier to just use a wysiwyg editor and lay it all out manually instead. But that is just what I'm trying to avoid. End users would come up with all kinds of layouts, creating a site that does not have a structured feel at all...

Previously I have only done sites in php and CodeIgniter framework, where I naturally have full control and can just add the divs I want, using something like 960 or blueprint to help with layouts, and style it individually with css. But that is dependent on doing it all yourself or at least with only others who know at least some web design. I don't know if modules based on 960 or something like that would help, since I need to be able to add sections etc arbitrarily? All I've seen for this is panels, but maybe I'm wrong?

So how do you approach this in Drupal? Any help will be greatly appreciated, because I'm really having a hard time understanding the basic thinking of layout in Drupal...

Edit:

this is a good example of the type of layout I'm referring: http://www.teamworkpm.net/features

Answer 1

First of all, I'm a big Panels fan, so I definitely think you should be using it, but I'm not sure it's the best for the task you are trying to achieve.

Some options, in what I feel is descending order of usefulness to you.

1. Since it sounds like it's necessary for you to mix several fields into a single render element, you could implement a Ctools "content type". How does one create a new ctools plugin should be helpful here. This easily allows you any custom logic in rendering the fields on a per entity basis. You should still separete the logic from the rendering, by declaring your own template. See Correct way to render a modules output through a template?
2. If the output you describe above completely dominates the page, then perhaps it would make sense to move the rendering up a level. A panels "layout"-plugin could be useful instead. The plugin link from above is still the source for more information.
3. If it makes sense to work with individual fields, which I doubt in your case, a custom field formatter could be what you are looking for. See How do I make the output of field X look like Y?
4. This one is mostly speculcation, I haven't attempted it, but if you are working with a Field collection, it being an entity, perhaps you can use Display suite to control it's output, and then have Panels render it inline. Or you could skip DS and directly template the FC entity.

Answer 2

Did you have a look at content types? You can define you're own types with what ever field types you need. Once you have the data you can adjust your CSS and may be some theme overrides to your liking. There are also a lot of modules providing additional functionality for content types and fields.

I also sugest to start with a standar theme like zen and create a subtheme.

Some tools that her very helpfull:

• Theme Developer (find theme functions and template names easily)
• Fire Bug (just in case you don't know)

Answer 3

You're looking for something like Panopoly. Take a look at it.

Answer 4

Panels and friends (panopoly, etc) could be a solution. Personally I am the no-panels man, so I am going to explain a solution without panels, for the sake of diversity.

So e.g. I want to have one type of page that consists of a number of sections (rows) with an image on one side (should be possible to alternate which side) and a heading and text on the other side.

Looks like a typical case of "same layout for each node of type X". So you could create a node type with some fields (an image field, a text field) and then use Display suite to arrange this stuff.

It seems you want two different ways to display these pages: Either the image is on the left or on the right. This can be done by defining an additional "View mode" with Display suite, and then enable an option where you can choose the View mode per node.

For the "sections", if you want something more fancy than just text, you could use a "block reference" field. More on this here.

This all depends on how much you want to allow the client to do, and what you consider too complicated and rather want to do yourself instead of explaining to the client.