0

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" } } 
0
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>';

?>

0
-1

Enjoy it easy and the best way

          <div class="col-md-8">
            <?php $aboutcompanys = get_post_meta(get_the_ID(), 'aboutcompany', true)?>
              <div class="teaser">
                <?php foreach($aboutcompanys as $aboutcompany){ ?>
                  <img src="<?php echo wp_get_attachment_url($aboutcompany['bg-image']); ?>" alt="<?php echo $aboutcompany['title']; ?>"/>
                <?php }?>
              </div><!-- .teaser -->
            <?php wp_reset_postdata(); ?>
          </div><!-- .col-md-8 -->
1
  • 1
    It is the general agreement to add some explanation to code that is posted on WordPress Development. Can you do that please? Thanks! – Nicolai Jul 10 '15 at 9:45
-4
<?php $productdetail = get_post_meta( $post->ID, 'portfolioslider', true ); 
                    //echo '<pre>';
      //var_dump($productdetail);
      $p=0;
      foreach( $productdetail as $portfolio){

        $src = wp_get_attachment_image_src( $productdetail[$p]['slide'], 'full' );  ?>

                               <li>

                                <a href="javascript:updateFocus('pi-focus-<?php echo $p;?>');">
                                    <img src="<?php echo $src[0];?>"
                                         width="150"
                                         height="150"
                                         class="pi-thumb"
                                        alt="no image available" />
                                </a>

                            </li>

                        <?php

     $p++; } 

?>

                         </ul>     </div>
            </div>
            <div class="carouselControls carouselBox">
                <a href="javascript:void(0);" class="next sides" id="pz-thumbSliderRight">
                    <span class="pz-slider-btn">&nbsp;</span>
                </a>
            </div>
        </div>
    </div>
<div id="pi-items" class="pi-hide">
    <?php $productdetail = get_post_meta( $post->ID, 'portfolioslider', true ); 

      $p=0;
      foreach( $productdetail as $portfolio){
      ?>


<div id="pi-focus-<?php echo $p;?>">
            <div class="pi-focus pie-box">
            <?php
        $src = wp_get_attachment_image_src( $productdetail[$p]['slide'], 'full' );  ?>

                                    <img src="<?php echo $src[0];?>" width="318" />

                     </div>    
                    <div class="pi-meta pie-box">
                <h2><?php echo $productdetail[$p]['title'];?></h2>
                <div class="pi-content clearfix">
               <?php echo $productdetail[$p]['description'];?>
               </div>

            </div>      

        </div><?php

     $p++; } 

?>


</div>
<?php endwhile; ?>
2
  • 3
    Please format your code properly. And also add you explanation. – Nilambar Sharma Nov 5 '14 at 11:36
  • 3
    Just to add, also add a proper explanation to what exactly your code does and how it work. Dumping of code makes for bad answers. Thank you – Pieter Goosen Nov 5 '14 at 11:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.