Getting the image title/alt attribute from the gallery shortcode

Question

I am trying to learn how to code php so that I can customize the image gallery within WordPress (among other customizations).

The code I have works great for a stylized gallery page, but having a difficult time trying to figure out how to get the title and alt attributes of the images within the WP gallery (I am guessing it's because the images are not seen as attachments to the post since they are in the gallery function).

And I would like to use the WP gallery, as I want to use that WP built-in functionality for galleries.

any help is appreciated... is this the dumbest way of doing something or what?

Note: get_attachment or get_children has been disastrous too when trying to edit images on a page when NOT using the WP gallery in that old attachments or children that have been removed from the page still show up).

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

<div class="gallery-wrapper three-cols clearfix">

  <?php // image gallery content 
    if( has_shortcode( $post->post_content, 'gallery' ) ) {   

       // Add a filter for full gallery size:
       add_filter( 'shortcode_atts_gallery','wpse_full_size_gallery' );


$gallery = get_post_gallery_images( $post->ID );

       // Remove the filter:
       remove_filter( 'shortcode_atts_gallery','wpse_full_size_gallery' );  

foreach ( $gallery as $image_url ) {
        $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
            $image_title = $attachment->post_title;


            echo '<div class="one-third columns gallery-item">';
            echo '<div class="item-picture" data-type="image">';
            echo '<img src="' . $image_url . '">' ;
            echo '<div class="image-overlay">';
            echo '<a href="' . $image_url . '" data-rel="prettyPhoto[gallery]"><span class="zoom"></span></a>';
             echo '</div>';
             echo '<span class="item-label">' . $image_title . '</span>';
             echo '</div>';
             echo '</div>';

        }

}                         
?>

  </div>
        <!-- article -->
        <article class="full-width columns" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <br class="clear">

            <?php edit_post_link(); ?>

        </article>
        <!-- /article -->

    <?php endwhile; ?>

    <?php else: ?>

        <!-- article -->
        <article>

            <h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>

        </article>
        <!-- /article -->

        <?php endif; ?>            

Answer 1

A little background: WP stores the attachments in the same database table as posts. Therefore the table rows correspond to the fields of the media edit modal:

get_post_gallery_images will return you URLs to the images, but not the actual data in the database. You could do a reverse-query and look for posts that contain the image URL but that would be more difficult than necessary.

Instead use the get_post_gallery function. This one is actually used by get_post_gallery_images too, but also returns the IDs of the attachments in an array. Use these IDs to get the information from the database using get_posts:

<?php
$gallery = get_post_gallery( get_the_ID(), false );
$args = array( 
    'post_type'      => 'attachment', 
    'posts_per_page' => -1, 
    'post_status'    => 'any', 
    'post__in'       => explode( ',', $gallery['ids'] ) 
); 
$attachments = get_posts( $args );

foreach ( $attachments as $attachment ) {

    $image_alt = get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true);
    if ( empty( $image_alt )) {
        $image_alt = $attachment->post_title;
    }
    if ( empty( $image_alt )) {
        $image_alt = $attachment->post_excerpt;
    }
    $image_title = $attachment->post_title;
    $image_url = wp_get_attachment_image_src( $attachment->ID, 'full' );

    echo '<div class="one-third columns gallery-item">';
    echo '<div class="item-picture" data-type="image">';
    echo '<img src="' . $image_url[0] . '" alt="'. $image_alt .'">' ;
    echo '<div class="image-overlay">';
    echo '<a href="' . $image_url[0] . '" data-rel="prettyPhoto[gallery]">
          <span class="zoom"></span></a>';
    echo '</div>';
    echo '<span class="item-label">' . $image_title . '</span>';
    echo '</div>';
    echo '</div>';

} ?>

The script looks for alt-tag info in _wp_attachment_image_alt, post_title and post_excerpt until it finds a value.