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

| Drupal Development | 5 seen

<p>Working on a customers project I faced another interesting obstacle (s):</p><ul><li>First to have separate User Admin and User Profile pages</li><li>Second - on user edit pages to display fields on two columns (according to the design).</li></ul><p>So here arises two problems:</p><p><strong>First how to have 2 user profiles and how to style them</strong></p><p>My first approach for two user profiles was using Profiles 2 modules - &nbsp;I must admit - I'm not a huge fan of using such scenarios - they broke - and so did happened this time:</p><p>I did setup a Profile 2 user fields, worked with field permission, &nbsp;like when to hide some of the required fields on user register form.</p><p>So fare everything great -</p><p><strong>but now arises second problem - how to display fields from form in two columns.&nbsp;</strong></p><p>In short - answer comes from <a href="https://www.drupal.org/project/ds">Display Suite Module</a> which allows us to style forms as we wish, but it doesn't integrate well on Profile 2 edit forms.</p><p>So after couple of hours of investigation - I found a small but brilliant module to replace Profile 2 -<a href="https://www.drupal.org/project/edit_profile"&gt; Edit Profile Module</a></p><p>&nbsp;</p><h2>Edit Profile</h2><p>This module creates separate "Edit account" and "Edit profile" tabs for each user, with custom user fields configured under "Edit profile."</p><p>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.</p><p><strong>Now - once we have Edit Profile module enabled we can get rid of Profile 2 module completely</strong></p><p>Just add new fields to existing user account page (I used existing fields options not to break things up)</p><h2>Now it's time for Display Suite module</h2><p>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!</p><p>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.</p><p><img src="http://www.reinisfischer.com/sites/default/files/ds.jpg&quot; alt="Drupal Display Suites edit form" title="Drupal Display Suites edit form" width="1200" height="563"></p><p><em>Drupal Display Suites edit form</em></p><p>When enabled Display Suites module head to configuration options and choose for you are interested in (in this case user - manage form)</p><p>You will have many options to choose from how to display your from - in my case I chose Two Column layout</p><p>Here is the final result of user/edit form</p><p><img src="http://www.reinisfischer.com/sites/default/files/user-edit-ds.jpg&quot; alt="User edit form DS" title="User edit form DS" width="751" height="427"></p><p><em>User edit form DS</em></p><p><span style="font-size: 1.385em; font-weight: bold; line-height: 1.538em;">Bonus - Display default image on forms</span></p><p>This is a little <a href="https://www.drupal.org/project/image_widget_default_image">utility module</a> 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.</p><p>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.</p><p>The module does not come with any configuration or permissions.</p>

Add new comment