Displaying Profile2 edit page with Panels

Question

I have a profile2 edit page (Drupal 7) found at user/*/edit/main. It has several fields that the user can edit.

As it stands, all the fields are displayed one on top of the other in one column and that makes a rather long list and lots of scrolling.

I would like to list those fields in an (imaginary) table or grid of 2 or 3 columns.

I tried Display Suite, but it's not compatible.

I am trying Panels but I can't get it to work. I use the user profile template of Page Manager (/user/%user.) The variant's selection rule is Path: user/*/edit/main, no context and the "Profile2 from user" relationship.

I have found all my fields and I have organized them in two columns (2 regions side by side) in the panel content.

The variant is enabled but it doesn't work. There is no change whatsoever when I visit the page (all fields still listed in one column.)

Am I doing something wrong or is Profile2 not compatible with Panels (like with Display Suite?)

Any and all suggestions or workaround would be greatly appreciated.

Thanks. :)

Answer 1

I guess panel and display suite both dont provide this use case. you could use hook_theme and then render function. Example code

   function modulename_theme(){

        return array
        (
                    'user_profile_form' => array
            (
                'render element' => 'form'
            ),
        );
    }
function theme_user_register_form($variables){
    $form = $variables['form'];
    $output='<div id="other-side">';
    if(isset($form['profile_main'])){
     $output.= drupal_render($form['profile_main']['field_profile_main_fname']);
     $output.=  drupal_render($form['profile_main']['field_profile_main_lname']);
     $output.= drupal_render( $form['profile_main']['field_profile_main_phone']);


}
    $output.="</div>";
$output='<div id="right-side">';
if(isset($form['profile_main'])){
    $output.= drupal_render( $form['profile_main']['field_profile_main_gender']);
     $output.= drupal_render( $form['profile_main']['field_profile_main_dob']);
 }
}
    $output.="</div>";
    $output.= drupal_render_children( $form);
    return $output;
}

Then on css you could add float left and width on divs to make it 2 columns

Answer 2

Have you checked https://www.drupal.org/project/profile2_panels? It claims to do exactly what you need