Drupal: Display checkboxes with Images in a Form

A few months ago, I was working on a Drupal module where I wanted to display form that contained a list of checkboxes and images that would allow the user to choose the images that were to be displayed in a block. Surprisingly, it really wasn’t that difficult.


Because the checkboxes and images where to be displayed in a block, I used hook_block_configure to display the form.

 * Implements hook_block_configure().
function banner_link_block_configure($delta = 0) {
  $form = array();
  $form['banner_link_name_' . $delta] = array(
    '#type' => 'textfield',
    '#title' => t('Banner Link Name'),
    '#default_value' => variable_get('banner_link_name_' . $delta, 'BannerLink ' . $delta),
  $form['banner_link_mode_' . $delta] = array(
    '#type' => 'select',
    '#title' => t('Mode'),
    '#description' => t('The block mode.'),
    '#default_value' => variable_get('banner_link_mode_' . $delta, 'random'),
    '#options' => array(
      'random' => t('Random'),
      'rotate' => t('Rotate'),
  $form['banner_link_interval_' . $delta] = array(
    '#type' => 'textfield',
    '#title' => t('Interval'),
    '#default_value' => variable_get('banner_link_interval_' . $delta, '5000'),
    '#description' => t('Used when mode is Rotate. The number of milliseconds the image will be displayed before rotating to the next image'),
  $form['banner_link_speed_' . $delta] = array(
    '#type' => 'textfield',
    '#title' => t('Speed'),
    '#default_value' => variable_get('banner_link_interval_' . $delta, '1500'),
    '#description' => t('Used when mode is Rotate. The number of milliseconds for the image to fade in'),
  $form['banner-link-block-images'] = array(
    '#type' => 'fieldset',
    '#title' => t('Select Images'),
    '#collapsible' => TRUE,
    '#collapsed' => FALSE,
  $form['banner-link-block-images']['banner_link_block_images_' . $delta] = array(
    '#type' => 'checkboxes',
    '#options' => banner_link_get_all_images(),
    '#default_value' => variable_get('banner_link_block_images_' . $delta, array()),
  return $form;

I first created a fieldset and then added the checkboxes #type to display a list of checkboxes. The options for the checkboxes must be an associative array. To create my array, I call the function: banner_link_get_all_images().

Checkboxes option

function banner_link_get_all_images() {
  $sql = 'select b.*, n.nid, n.title, m.uri, m.filename from {node} n, {banner_link} b, {file_managed} m ';
  $sql .= 'where n.nid = b.vid and m.fid = b.image_fid';
  $result = db_query($sql);
  $banners = $result->fetchAllAssoc('blid', PDO::FETCH_ASSOC);
  $images = array();
  foreach ($banners as $banner) {
      $images[$banner->nid] = theme('image_style', array('style_name' => 'banner_link_block', 'path' => $banner->uri, 'alt' => $banner->title, 'title' => $banner->title, 'width' => $banner->image_width, 'height' => $banner->image_height));
  return $images;

I created a query to select the images based upon the node id. I used an image style banner_link_block that will display the images as thumbnails.

I tend to create my queries in a way that I am most comfortable, but you could create the query as:

  $select = db_select('node', 'n');
  $select->join('banner_link', 'b', 'b.vid = n.nid');
  $select->join('file_managed', 'm', 'm.fid = b.image_fid');
  $select = $select->fields('n', array('nid', 'title'))
    ->fields('b', array('blid', 'image_width', 'image_height'))
	->fields('m', array('uri'));
  $results = $select->execute()
    ->fetchAllAssoc('blid', PDO::FETCH_ASSOC);

That’s it. I won’t go into the block save routine as this post is about displaying checkboxes with images. Enjoy.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks