0

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; ?>            
3

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:

http://i.imgur.com/1i2gfLE.jpg

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.

  • Hi Jan thanks so much for your help and augmenting details. Still having trouble getting the gallery images/post-meta, the page returns no results. How does image_url obtain the url of the gallery image? I tried setting $image_url = post_guid; to no success. The explode function is taking a string (image IDs) and turning this into an array used by get_posts and get_post_meta, yes? I'm reference the codex too for some clues: [codex.wordpress.org/Function_Reference/get_post_gallery] and [codex.wordpress.org/Function_Reference/wp_get_attachment_image] – ccbar Apr 26 '15 at 17:57
  • I'm a nut and actually forgot to include image_url. Sorry for that. I have updated the answer. Note that wp_get_attachment_image_src returns an array that contains the url, width, height and "boolean: true if $url is a resized image, false if it is the original or if no image is available." – Jan Beck Apr 27 '15 at 13:31
  • Hi Jan, still empty page results. I also tried adding new images to a new gallery to see if I needed to upload new images, not existing images within media library, in order to see if I could get any results, but no. So still learning php but $image_url[0] means to set to null until the ID is passed? the only thing that's worked reliably is getting the shortcode for gallery as in my first question, just can't get the darn title. – ccbar Apr 27 '15 at 15:21
  • So does the counting have to start from 0, can I have an empty bracket[] and still have image IDs passed though it? $image_url[0] vs $image_url[] – ccbar Apr 27 '15 at 18:57
  • I'll try it later, meanwhile have a look at the documentation codex.wordpress.org/Function_Reference/… – Jan Beck Apr 27 '15 at 20:52

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.