Drupal Display Suite Two Columns on User Edit Forms + Image Widget Default Image

Updated: 11 October, 2014 seen 5,011

Working on a customers project I faced another interesting obstacle (s):

  • First to have separate User Admin and User Profile pages
  • Second - on user edit pages to display fields on two columns (according to the design).

So here arises two problems:

First how to have 2 user profiles and how to style them

My first approach for two user profiles was using Profiles 2 modules -  I must admit - I'm not a huge fan of using such scenarios - they broke - and so did happened this time:

I did setup a Profile 2 user fields, worked with field permission,  like when to hide some of the required fields on user register form.

So fare everything great -

but now arises second problem - how to display fields from form in two columns. 

In short - answer comes from Display Suite Module which allows us to style forms as we wish, but it doesn't integrate well on Profile 2 edit forms.

So after couple of hours of investigation - I found a small but brilliant module to replace Profile 2 - Edit Profile Module


Edit Profile

This module creates separate "Edit account" and "Edit profile" tabs for each user, with custom user fields configured under "Edit profile."

The goal of the module is to make fields attached to users (a new feature introduced in Drupal 7 core) a reasonable option for building simple, clean user profiles. Instead of having all properties of the user account editable via a single "Edit" tab (as Drupal does by default), where custom user profile fields are mixed in with account settings such as username, password, and time zone, sites using this module get a clean separation between these two different concepts, and a nicer experience for their end users.

Now - once we have Edit Profile module enabled we can get rid of Profile 2 module completely

Just add new fields to existing user account page (I used existing fields options not to break things up)

Now it's time for Display Suite module

Display Suite allows you to take full control over how your content is displayed using a drag and drop interface. Arrange your nodes, views, comments, user data etc. the way you want without having to work your way through dozens of template files. A predefined list of layouts (D7 only) is available for even more drag and drop fun!

By defining custom view modes (build modes in D6), you can define how one piece of content should be displayed in different places such as teaser lists, search results, the full node, views etc.

Drupal Display Suites edit form

Drupal Display Suites edit form

When enabled Display Suites module head to configuration options and choose for you are interested in (in this case user - manage form)

You will have many options to choose from how to display your from - in my case I chose Two Column layout

Here is the final result of user/edit form

User edit form DS

User edit form DS

Bonus - Display default image on forms

This is a little utility module that shows the default image of an image field as part of the image widget, if no image has been uploaded yet. It is displayed in the same way that the image preview of images that have been uploaded is displayed.

The display logic is identical to that of the image formatter: If the field instance has defined a default image, that is displayed. Else, if the field has defined a default image, that is displayed. Else no image is displayed, just like without this module.

The module does not come with any configuration or permissions.