How can I render my output in a series of DIVs rather than an "item_list"?

Question

The following code works in the sense that it outputs my series of photos in an unordered list. My question is - What changes would I need to make in order to render my output in a series of DIVs with class IDs? I plan to hook this up to JQuery Masonry and I'd prefer to break away from the limitations of them being in a list.

The following code pulls in my data.

function photo_gallery_contents($display) {
  $max_num = variable_get('photo_gallery_max', 3);
  $query = db_select('node', 'n')
    ->fields('n', array('nid'))
    ->condition('status', 1) //Published.    
    ->condition('type','portfolio') // Only want our photos aka Portfolio content type
    ->orderBy('created', 'DESC'); //Most recent first.

  if ($display == 'block') {
    // Restrict the range if called with 'block' argument
    $query->range(0, $max_num);
  } 
  // Now proceeds to execute().
  // If called by peg, query proceeds directly to execute().

  // Fetch the results for the nid field into an array.
  $nids = $query->execute()->fetchCol(); 

  // Load the node objects and return.
  return node_load_multiple($nids);

}

The code that renders all (but would like it to create a series of DIVs) is the following one.

function _photo_gallery_page() {
  $result = photo_gallery_contents('page');

  // Array to contain items for the page to render.
  $items = array();

  //Iterate over the resultset and format as links.
  foreach ($result as $node) {
    // Build a render array based on the field's display settings.
    $image = field_view_field('node', $node, 'field_image',array('label' => 'hidden',   'settings' => array('image_style' => 'thumbnail')));

    // Render the array down to the image HTML.
    $image_html = drupal_render($image);

    $items[] = array(
      'data' => l($image_html, 'node/' . $node->nid, array('html' => TRUE)),
    );
  }

  if (empty($items)) {
    // No content in the last 2 weeks.
    $page_array['photo_gallery_arguments'] = array(
      //Title serves as page subtitle.
      '#title' => t('All photos from ever'),
      '#markup' => t('No photos available.'),
    );
    return $page_array;  
  } 
  else {
    $page_array['photo_gallery_arguments'] = array(
      '#title' => t('All photos from ever'),
      '#items' => $items,
      // Theme hook with suggestion.  
      '#theme' => 'item_list',
      '#type' => 'div',
    );

    return $page_array;
  }
}

Answer 1

As far I understood you want render the following code in multiple <divs>.

$page_array['photo_gallery_arguments'] = array(
  '#title' => t('All photos from ever'),
  '#items' => $items,
  // Theme hook with suggestion.  
  '#theme' => 'item_list',
  '#type' => 'div',
);

Replace it with the following code.

   foreach($items as $item_key => $item) {
     $page_array['photo_gallery_arguments'][$item_key] = array(
       '#type' => 'container',
       '#attributes' => array(
         'class' => array(
           'my-class-' . $item_key,
         ),
       ),
     );

     $page_array['photo_gallery_arguments'][$item_key]['content'] = array(
       '#type' => 'markup',
       '#markup' => $item,
     );
   }

Or use the following code.

   foreach($items as $item_key => $item){
     $page_array['photo_gallery_arguments'][$item_key] = array(
       '#type' => 'markup',
       '#markup' => '<div class="my-class-"' . $item_key . '>' . $item . '</div>',
     );
   }

Alternatively, you can use the following code.

   foreach($items as $item_key => $item){
     $page_array['photo_gallery_arguments'][$item_key] = array(
       '#type' => 'item',
       '#markup' => $item,
     );
   }

You can find more information about rendering arrays, and Form API.