每行3张图片

时间:2013-02-20 20:27:00

标签: image wordpress count row

我想从自定义字段(Wordpress)中检索图像,每行显示3张图像。另外我想在每行添加一个

标记。所以它看起来像这样:

<ul> <li>image1</li> <li>image2</li> <li>image3</li> </ul>

<ul> <li>image4</li> <li>image5</li> <li>image6</li> </ul>

我找到了一些代码并尝试了一些自定义编码来实现这一目标。几乎让它工作,但我在最后检索到的图像后需要一个</ul>标签。下面的代码将在最后检索到的图像之前生成</ul>标记...此外,我对数组和循环不是很熟悉,因此可能有一个比下面的代码更容易实现此目的的解决方案。 / p>

谁能帮助我?非常感谢你的时间!

<?php 

// vars
$images = array();
$row = 0;
$i = 0;
$gallery_images = get_field('galerie' );


// loop through gallery images and sort into the $images array
if( $gallery_images )
{
    foreach( $gallery_images as $image )
    {

        // Insert the url tag
        if ( $i === 0 ) 
        {
                 echo "<ul class='galerieul'>";
        }

        // increase $i
        $i++;
 // Insert the url tag
        if( $i > 3 )
        {
            echo "<ul class='galerieul'>";
        }
        // if $i has increased above 3, increase the row and reset $i
        if( $i > 3 )
        {    
        $i = 1;
        $row++;
        }


    // add image to row
        $images[ $row ][] = $image;
 ?>
   <li class="customimagestyle">
                    <?php echo $image['title']; ?><br />
                    <a href="<?php echo $image['url']; ?>" rel="lightbox"><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /></a><br />
                    <?php echo $image['description']; ?>
                </li>

                <?php
// Insert the url tag

         if ( $i === 3 ) 
        {
             echo "</ul>";
        }
        if ($i < $row) 
        { 
            echo '</ul>'; 
        }

    }
}

?>

2 个答案:

答案 0 :(得分:1)

使用modulus运算符,并确保检查部分填充的行,例如,

<?php

// loop through gallery images and sort into the $images array
if( $gallery_images )
{
    $i = 0;
    foreach( $gallery_images as $image )
    {

        if ( ($i % 3) == 0 ) {
           echo "<ul class='galerieul'>";
        }

 ?>
        <li class="customimagestyle">
              <?php echo $image['title']; ?><br />
              <a href="
              <?php echo $image['url']; ?>" rel="lightbox"><img src="
              <?php echo $image['sizes']['thumbnail']; ?>" alt="
              <?php echo $image['alt']; ?>" /></a><br />
              <?php echo $image['description']; ?>
         </li>

<?php

        if (($i % 3) == 0) {
           echo "</ul>";
        }

        $i++;
    }

    // Close the ul tag, in the case of a partially-filled row
    if (($i % 3) != 0) {
       echo "</ul>";
    }

}

?>

答案 1 :(得分:0)

get_field('galerie' )有效吗?你能在画廊中获得图像吗?

请记住,图像(附件)存储为帖子。因此,如果您知道帖子的ID有图库,那么这应该不是问题。

以下是一些可能对您有帮助的代码/解决方案(未经测试):

function display_images_in_list($size = thumbnail) {

    if($images = get_posts(
        array(
        'post_parent'    => get_the_ID(),
        'post_type'      => 'attachment',
        'numberposts'    => -1, // show all
        'post_status'    => null,
        'post_mime_type' => 'image',
            'orderby'        => 'menu_order',
            'order'           => 'ASC')
        )
    ){
        foreach($images as $image) {
            $attimg   = wp_get_attachment_image($image->ID,$size);
            echo $attimg;
        }
    }
}

来源:http://wordpress.org/support/topic/list-all-images-attached-to-a-post-based-on-gallery

function aldenta_get_images($size = 'thumbnail') {
  global $post;

  $photos = get_children( 
    array(
      'post_parent' => $post->ID, 
      'post_status' => 'inherit', 
      'post_type' => 'attachment', 
      'post_mime_type' => 'image', 
      'order' => 'ASC', 
      'orderby' => 
      'menu_order ID') 
  );

  $results = array();

  if ($photos) {
    foreach ($photos as $photo) {
    // get the correct image html for the selected size
    $results[] = wp_get_attachment_image($photo->ID, $size);
  }

  return $results;
}

来源:http://snipplr.com/view/52857/