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');
}
}
?>
Leave a Reply