Get single image from custom fields made with WCK custom fields creator

Question

I used WCK Custom Fields Creator to create a repeatable custom field for uploading pairs of images (one color, one black and white) to posts. So for example, one post may have three fields, with two images (one color and one bw) each making a total of six images per post.

I am trying to create a page that outputs the first field of two entries for every post in that specific category.

Here is the code I have now, which spits out all of the image pairs. I dont know PHP well enough to figure out how to fix this code.

<ul class="campaign-gallery">
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
   $productimgs = get_post_meta( $post->ID, 'productimg', true );

   if (is_array($productimgs) & $productimgs != '' ) { 
        foreach($productimgs as $productimg) {
    $image_color = wp_get_attachment_image_src( $productimg['product-image-color'], 'grid-large' );
    $image_bw = wp_get_attachment_image_src( $productimg['product-image-bw'], 'grid-large' );
    echo '<li>';
    echo '<img class="desat" src="' . $image_bw[0] . '"  />';
    echo '<img class="sat" src="' . $image_color[0] . '"  />';
    echo '</li>';
    }
}
?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</ul>

I did a var_dump to see what the $productimgs variable outputs which I copied below:

    array(3) { 
[0]=> array(2) { 
["product-image-bw"]=> string(3) "211" 
["product-image-color"]=> string(3) "212" } 
[1]=> array(2) { 
["product-image-bw"]=> string(3) "214" 
["product-image-color"]=> string(3) "215" } 
[2]=> array(2) { 
["product-image-bw"]=> string(3) "216" 
["product-image-color"]=> string(3) "217" }
} 


array(2) { 
[0]=> array(2) { 
    ["product-image-bw"]=> string(3) "253" 
    ["product-image-color"]=> string(3) "254" }
[1]=> array(2) { 
["product-image-bw"]=> string(3) "255" 
["product-image-color"]=> string(3) "256" } } 

array(3) { 
[0]=> array(2) { 
    ["product-image-bw"]=> string(3) "211" 
    ["product-image-color"]=> string(3) "212" }
[1]=> array(2) { 
    ["product-image-bw"]=> string(3) "214" 
    ["product-image-color"]=> string(3) "215" } 
[2]=> array(2) { 
    ["product-image-bw"]=> string(3) "216" 
    ["product-image-color"]=> string(3) "217" } } 

Answer 1

Here is the code that worked. I had to get rid of the foreach loop and reference the array directly:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post();

$productimgs = get_post_meta( $post->ID, 'productimg', true );

$image_color =  $productimgs[0]['product-image-color'];
$image_bw = $productimgs[0]['product-image-bw'];    
$imgclr = wp_get_attachment_image_src( $image_color, 'grid-large' );
$imgbw = wp_get_attachment_image_src( $image_bw, 'grid-large' );
    echo '<li>';
    echo '<a href="' . get_permalink () . '"><img class="desat" src="' . $imgbw[0] . '"  />';
    echo '<img class="sat" src="' . $imgclr[0] . '"  /></a>';
    echo '</li>';

?>