Drupal development. Sreyas It Solutions is top software development firm provide support all over US Uk Spain Italy Canada

C tools Modal Popup and Theming in Drupal 7

Using the power of the Ctools Modal Popup and Theming in Drupal 7 we can create our own custom popups. Theming of popups can be done with the help of a js file, which we can alter accordingly. Here is an example of how to use Ctools to create a popup up to Update Profile Picture.


<?php 
Drupal.theme.prototype.CToolsProfilePictureModal = function () {
  var html = '';
  html += '<div id="ctools-modal" class="popups-box">';
  html += '  <div class="ctools-modal-content account-settings-popup profile-picture-modal">';
  html += '    <div class="popups-container">';
  html += '            <div class="modal-header popups-title">';
  html += '              <span id="modal-title" class="modal-title"></span>';
  html += '              <span class="popups-close"><a class="close" href="#">' + Drupal.CTools.Modal.currentSettings.closeText + '</a></span>';
  html += '              <div class="clear-block"></div>';
  html += '            </div>';
  html += '            <div class="modal-scroll"><div id="modal-content" class="modal-content popups-body"></div></div>';
  html += '            <div class="popups-buttons"></div>'; //Maybe someday add the option for some specific buttons.
  html += '            <div class="popups-footer"></div>'; //Maybe someday add some footer.
  html += '          </div>';
  html += '  </div>';
  html += '</div>';
 return html;
}
<?php
function update_image($form, &$form_state) { //menu callback function
    global $user;
   $user_det = user_load($user->uid);
   $uri = $user_det->field_profile_picture['und'][0]['uri'];
   if(!empty($uri))
   $user_picture = file_create_url($uri);
   else
   $user_picture = 'https://sreyas.b-cdn.net/sites/default/files/styles/thumbnail/public/default_images/profile.png';
   $form['modal-title'] = array(
            '#prefix' => '<div class="modal-title">',
            '#suffix' => '</div>',
          '#markup' => '<b>Change Picture</b>',
    );
   $form['im-container'] = array(
            '#title' => t('Preview:'),
            '#prefix' => '<div id="im-area">',
            '#markup' => '<img src="'.$user_picture.'" height="250" width="250" />',
            '#suffix' => '</div>',
    );
    $form['image_file'] = array(
        '#type' => 'file',
        '#attributes' => array('id' => 'image_file_profile'),
    );
    $form['upload'] = array(
        '#type' => 'submit',
        '#value' => 'upload',
        '#attributes' => array('id' => 'submit_image_file_profile'),
        '#submit' => array('upload_image'),
        '#ajax' => array(
            'callback' => 'upload_image',
            'wrapper' => 'im-area',
            'method' => 'replace',
            'effect' => 'fade',
        ),
    );
    return $form; 
}
function upload_image($form, $form_state) { //Save image
    global $user;
    ctools_include('ajax');
    ctools_include('modal');
    ctools_modal_add_js();
    $file = file_save_upload('image_file', array('file_validate_extensions' => array('png gif jpg jpeg')), "public://", FILE_EXISTS_REPLACE);
    if ($file) {
        $file->status = FILE_STATUS_PERMANENT;
        file_save($file);
        $form['im-container'] = array(
            '#title' => t('Preview:'),
            '#prefix' => '<div id="im-area">',
            '#markup' => '<img src="/sites/default/files/'.$file->filename.'" height="250" width="250" />',
            '#suffix' => '</div>',
        );
        $usr_info = user_load($user->uid);
        $usr_info->field_profile_picture[LANGUAGE_NONE][0]['fid'] = $file->fid;
        user_save($usr_info);

          $commands = array();
          $commands[] = ctools_modal_command_dismiss();
          ajax_deliver(array('#type' => 'ajax', '#commands' => $commands));
    }
    else {
        drupal_set_message('No file uploaded.');
    }
    return $form['im-container'];
}
function mymodule_page() {
    ctools_include('modal');
    ctools_modal_add_js();
    $sample_style = array(
    'ctools-profile-picture-style' => array(
      'modalSize' => array(
        'type' => 'fixed',
        'width' => 500,
        'height' => 300,
        'addWidth' => 20,
        'addHeight' => 15,
      ),
      'modalOptions' => array(
        'opacity' => .5,
        'background-color' => '#000',
      ),
      'animation' => 'fadeIn',
      'modalTheme' => 'CToolsProfilePictureModal',
    ),
  );
  drupal_add_js($sample_style, 'setting');
  ctools_add_js('ctools-ajax-account', 'my_profile');
  return '<div class="user image" id="img-usr"><a href="/mymodule/nojs" class="ctools-use-modal ctools-modal-ctools-profile-picture-style">Update Profile Picture</a></div>';
}
function mymodule_callback_image($ajax) {
  if ($ajax) {
    ctools_include('ajax');
    ctools_include('modal');
    $form_state = array(
      'ajax' => TRUE,
      'title' => t('Update Profile Picture'),
    );
    // Use ctools to generate ajax instructions for the browser to create
    // a form in a modal popup.
    $output = ctools_modal_form_wrapper('update_image', $form_state);
    // If the form has been submitted, there may be additional instructions
    // such as dismissing the modal popup.
    if (!empty($form_state['ajax_commands'])) {
      $output = $form_state['ajax_commands'];
    }
    // Return the ajax instructions to the browser via ajax_render().
    print ajax_render($output);
    drupal_exit();
  }
  else {
    return drupal_get_form('update_image');
  }
}
?>

Recent Blogs


Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

To Know Us Better

Browse through our work.

Explore The Technology Used

Learn about the cutting-edge technology and techniques we use to create innovative software solutions.