自定义WordPress Gallery Post格式

Question

My current theme supports Gallery Post Formats. The Gallery format takes all images from the gallery and displays them in a slideshow. I want to be able to add the caption and photo credit line to the bottom of each image as it changes for the information to change along with it.

The current gallery format template looks like this:

 <?php if ( has_post_format( 'gallery' ) ) : ?>

   <div class="gallery-post-format">
      <?php
      $galleries = get_post_gallery_images( $post );

      $output = '<ul class="gallery-images">';
      foreach ($galleries as $gallery) {
         $output .= '<li>' . '<img src="'. $gallery . '">' . '</li>';
      }
      $output .= '</ul>';

      echo $output;
      ?>
   </div>

<?php endif; ?>

I am wanting to add the following code to display the captions and photo credit line to each image.

    <div>
    <?php 
        $photographer_name = get_post_meta(get_post_thumbnail_id(), 'be_photographer_name', true);
        $photographer_url = get_post_meta(get_post_thumbnail_id(), 'be_photographer_url', true);

        if ( $photographer_name ) : ?>
            <div id="tgg_credit_line" class="tgg-photo-credit" align="right">
                &#x1F4F7; Image Credit /
                <?php if ( $photographer_url ) : ?> 
                <a href="<?php echo $photographer_url ?>">
                <?php endif; ?>
            <?php echo $photographer_name ?>
                <?php if ( $photographer_url ) : ?> 
                </a>
                <?php endif; ?>
            </div>
        <?php endif; ?>
</div>
<div id="tgg_image_caption" class="tgg-image-caption" align="left">
    <?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?>
</div>

</div>

How can I do this?

Answer 1

How about this:

<?php if ( has_post_format( 'gallery' ) ) : ?>

    <div class="gallery-post-format">
        <?php
            $gallery = get_post_gallery( $post, false );
            $att_ids = wp_parse_id_list( $gallery['ids'] );

            $output = '<ul class="gallery-images">';
            for ( $i = 0; $i < count( $gallery['src'] ); $i++ ) {
                $att_id = $att_ids[ $i ];
                $photographer_name = get_post_meta( $att_id, 'be_photographer_name', true );
                $photographer_url = get_post_meta( $att_id, 'be_photographer_url', true );

                $image = sprintf( '<img src="%s" />',
                    esc_url( $gallery['src'][ $i ] ) );

                $caption = '<div>';
                if ( $photographer_name ) {
                    $caption .= '<div class="tgg-photo-credit" align="right">';
                    $caption .= '&#x1F4F7; Image Credit /';
                    if ( $photographer_url ) {
                        $caption .= sprintf( '<a href="%s">%s</a>',
                            esc_url( $photographer_url ), esc_html( $photographer_name ) );
                    } else {
                        $caption .= esc_html( $photographer_name );
                    }
                    $caption .= '</div><!-- .tgg-photo-credit -->';
                }
                $caption .= '</div>';

                $excerpt = get_post_field( 'post_excerpt', $att_id );
                if ( $excerpt ) {
                    $caption .= /* wrapped */
                    '<div class="tgg-image-caption" align="left">' .
                        $excerpt .
                    '</div><!-- .tgg-image-caption -->';
                }

                $output .= '<li>' . $image . $caption . '</li>';
            }
            $output .= '</ul><!-- .gallery-images -->';

            echo $output;
        ?>
    </div><!-- gallery-post-format -->

<?php endif; ?>

Or another version, which directly echoes the output instead of saving it in a variable (i.e. $output):

<?php if ( has_post_format( 'gallery' ) ) : ?>

    <div class="gallery-post-format">
        <?php
            $gallery = get_post_gallery( $post, false );
            $att_ids = wp_parse_id_list( $gallery['ids'] );
        ?>
        <ul class="gallery-images">
            <?php for ( $i = 0; $i < count( $gallery['src'] ); $i++ ) : ?>
                <li>
                    <?php
                        $att_id = $att_ids[ $i ];
                        $photographer_name = get_post_meta( $att_id, 'be_photographer_name', true );
                        $photographer_url = get_post_meta( $att_id, 'be_photographer_url', true );
                        $excerpt = get_post_field( 'post_excerpt', $att_id );
                    ?>

                    <img src="<?php echo esc_url( $gallery['src'][ $i ] ); ?>" />

                    <div>
                        <?php if ( $photographer_name ) : ?>
                            <div class="tgg-photo-credit" align="right">
                                &#x1F4F7; Image Credit /
                                <?php if ( $photographer_url ) : ?>
                                    <a href="<?php echo esc_url( $photographer_url ); ?>"><?php echo esc_html( $photographer_name ); ?></a>
                                <?php else : ?>
                                    <?php echo esc_html( $photographer_name ); ?>
                                <?php endif; // end $photographer_url ?>
                            </div><!-- .tgg-photo-credit -->
                        <?php endif; // end $photographer_name ?>
                    </div>

                    <?php if ( $excerpt ) : ?>
                        <div class="tgg-image-caption" align="left">
                            <?php echo $excerpt; ?>
                        </div><!-- .tgg-image-caption -->
                    <?php endif; // end $excerpt ?>
                </li>
            <?php endfor; // end gallery loop ?>
        </ul><!-- .gallery-images -->
    </div><!-- .gallery-post-format -->

<?php endif; ?>