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 = '/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');
}
}
?>
Here’s a breakdown of what each part of the code does:
- Drupal.theme.prototype.CToolsProfilePictureModal: This function defines the HTML structure for the modal popup. It includes a header, content area, and buttons for the modal.
- update_image: This function is a menu callback function that renders a form for updating the user’s profile picture. It includes an image preview, a file upload field, and a submit button. Upon submitting the form, it uploads the selected image file and updates the user’s profile picture.
- upload_image: This function handles the submission of the form for uploading the image. It saves the uploaded image file, updates the user’s profile picture, and dismisses the modal popup.
- mymodule_page: This function generates a link to trigger the modal popup for updating the profile picture. It also defines the modal style and theme.
- mymodule_callback_image: This function is a callback function for AJAX requests. It generates the form for updating the profile picture and renders it inside the modal popup.
Contact Sreyas IT Solutions if you need to customize your web/mobile app and increase its UIUX for enhanced customer experience. User-friendliness and customer satisfaction are the goals that help us to create many global customers all around the world. Different IT-related services like web and mobile app development, customization, website designing, SEO, and many more are provided by Sreyas.
