Attachment Metadata inside of Loop

Question

Basically, I'm trying to call attachment info to display withing a loop, for use in an image gallery. I know I need to use wp_prepare_attachment_for_js($attachment_id) but I can't seem to get anything to show.

Here's the HTML:

   <?php 
   $the_query = new WP_Query(array(
    'post_type' => 'attachment',
    'post_status' => 'inherit'
    )); 
   while ( $the_query->have_posts() ) : 
   $the_query->the_post();
  ?>
     <?php attachment_meta = wp_get_attachment($id);
      echo '<figure class="gallery-photo" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" data-groups='["all", "'.$attachment_meta['category_name'].'"]'><a class="photo-link" href="'.wp_get_attachment_image ().'">" itemprop="contentUrl" data-size="'.$attachment_meta[width].'"x"'.$attachment_meta[height].';?>">
          <img src="'.wp_get_attachment_url ('fullsize').'" itemprop="thumbnail" />
       <figcaption itemprop="caption description">'.$attachment_meta['caption'].'</figcaption>
      <div class="photo-title"><h2>'.$attachment_meta['title'].''</h2></div></a>            
        </figure> 
   <?php 
   endwhile; 
   wp_reset_postdata();
  ?>   

And the functions:

// Custom media taxonomies
function add_categories_to_attachments() {
    register_taxonomy_for_object_type( 'category', 'attachment' );
}
add_action( 'init' , 'add_categories_to_attachments' );

function add_tags_to_attachments() {
    register_taxonomy_for_object_type( 'post_tag', 'attachment' );
}
add_action( 'init' , 'add_tags_to_attachments' );

// Media taxonomy shortcuts for gallery
function wp_get_attachment( $attachment_id ) {

    $attachment = get_post( $attachment_id );
    return array(
        'alt' => get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ),
        'caption' => $attachment->post_excerpt,
        'description' => $attachment->post_content,
        'href' => get_permalink( $attachment->ID ),
        'src' => $attachment->guid,
        'title' => $attachment->post_title
    );
}

EDIT:

I was able to figure most of it out. The only issue now is how to format the brackets in data-groups

 <?php 
   $the_query = new WP_Query(array(
    'post_type' => 'attachment',
    'post_status' => 'inherit',
    'category_name' => 'architecture'
    )); 
   while ( $the_query->have_posts() ) : 
   $the_query->the_post();
  ?>

 <?php $attachment_data = wp_prepare_attachment_for_js( $attachment->ID ); 
      echo '<figure class="gallery-photo" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" data-groups='["all", "arch"]' >';
      echo'<a class="photo-link" href="'.$attachment_data['url'].'" itemprop="contentUrl" data-size="'.$attachment_data['width'].'x'.$attachment_data['height'].'">';
      echo'<img src="'.wp_get_attachment_url ('medium').'" itemprop="thumbnail"/>';
      echo'<figcaption itemprop="caption description"'.$attachment_data['description'].'"></figcaption>';
      echo'<div class="photo-title"><h2>'.$attachment_data['title'].'</h2></div></a>
        </figure>';?>
         <?php 
   endwhile; 
   wp_reset_postdata();
  ?>    

Answer 1

Here's the fix. All the attachment info is now being called inside the php using wp_prepare_attachment_for_js and the info will load for each image in the loop, to display in the photo gallery. It works now.

  <?php 
   $the_query = new WP_Query(array(
    'post_type' => 'attachment',
    'post_status' => 'inherit',
    'category_name' => 'arch'
    )); 
   while ( $the_query->have_posts() ) : 
   $the_query->the_post();
  ?>

 <?php $attachment_data = wp_prepare_attachment_for_js( $attachment->ID ); 
      echo '<figure class="gallery-photo" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" data-groups='. esc_attr('["all"]').'>';
      echo'<a class="photo-link" href="'.$attachment_data['url'].'" itemprop="contentUrl" data-size="'.$attachment_data['width'].'x'.$attachment_data['height'].'">';
      echo'<img src="'.wp_get_attachment_url ('medium').'" itemprop="thumbnail"/>';
      echo'<figcaption itemprop="caption description"'.$attachment_data['description'].'"></figcaption>';
      echo'<div class="photo-title"><h2>'.$attachment_data['title'].'</h2></div></a>
        </figure>';?>
   <?php 
   endwhile; 
   wp_reset_postdata();
  ?>  

For functions.php:

function wp_get_attachment( $attachment_id ) {

    $attachment = get_post( $attachment_id );
    return array(
        'alt' => get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ),
        'caption' => $attachment->post_excerpt,
        'description' => $attachment->post_content,
        'href' => get_permalink( $attachment->ID ),
        'src' => $attachment->guid,
        'title' => $attachment->post_title
    );
}