In a Wordpress gallery, use the Alt attribute of the images as html comment

Question

I’m developing a Wordpress theme and I’m having a problem. In my functions.php, I use the following code that changes the composition of [gallery] and so I can customize the gallery of posts.

The code is as follows::

function __my_gallery_shortcode( $attr )
{
$post = get_post();

    static $instance = 0;
    $instance++;

    if ( ! empty( $attr['ids'] ) ) {
        // 'ids' is explicitly ordered, unless you specify otherwise.
        if ( empty( $attr['orderby'] ) )
            $attr['orderby'] = 'post__in';
        $attr['include'] = $attr['ids'];
    }

    // Allow plugins/themes to override the default gallery template.
    $output = apply_filters('post_gallery', '', $attr);
    if ( $output != '' )
        return $output;

    // We're trusting author input, so let's at least make sure it looks like a valid orderby statement
    if ( isset( $attr['orderby'] ) ) {
        $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
        if ( !$attr['orderby'] )
            unset( $attr['orderby'] );
    }

    extract(shortcode_atts(array(
        'order'      => 'ASC',
        'orderby'    => 'menu_order ID',
        'id'         => $post ? $post->ID : 0,
        'itemtag'    => 'dl',
        'icontag'    => 'dt',
        'captiontag' => 'dd',
        'columns'    => 3,
        'size'       => 'thumb-portfolio',
        'include'    => '',
        'exclude'    => '',
        'link'       => 'file'
    ), $attr, 'gallery'));

    $id = intval($id);
    if ( 'RAND' == $order )
        $orderby = 'none';

    if ( !empty($include) ) {
        $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

        $attachments = array();
        foreach ( $_attachments as $key => $val ) {
            $attachments[$val->ID] = $_attachments[$key];
        }
    } elseif ( !empty($exclude) ) {
        $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
    } else {
        $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
    }

    if ( empty($attachments) )
        return '';

    if ( is_feed() ) {
        $output = "\n";
        foreach ( $attachments as $att_id => $attachment )
            $output .= wp_get_attachment_link($att_id, $size, true) . "\n";
        return $output;
    }

    $itemtag = tag_escape($itemtag);
    $captiontag = tag_escape($captiontag);
    $icontag = tag_escape($icontag);
    $valid_tags = wp_kses_allowed_html( 'post' );
    if ( ! isset( $valid_tags[ $itemtag ] ) )
        $itemtag = 'dl';
    if ( ! isset( $valid_tags[ $captiontag ] ) )
        $captiontag = 'dd';
    if ( ! isset( $valid_tags[ $icontag ] ) )
        $icontag = 'dt';

    $columns = intval($columns);
    $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
    $float = is_rtl() ? 'right' : 'left';

    $selector = "gallery-{$instance}";

    $gallery_style = $gallery_div = '';
    if ( apply_filters( 'use_default_gallery_style', true ) )
        $gallery_style = "
        <style type='text/css'>
            #{$selector} {
                margin: auto;
            }
            #{$selector} .gallery-item {
                float: {$float};
                margin-top: 10px;
                text-align: center;
                width: {$itemwidth}%;
            }
            #{$selector} img {
                border: 2px solid #cfcfcf;
            }
            #{$selector} .gallery-caption {
                margin-left: 0;
            }
            /* see gallery_shortcode() in wp-includes/media.php */
        </style>";
    $size_class = sanitize_html_class( $size );
    $gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";
    $output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );

    $i = 0;
    foreach ( $attachments as $id => $attachment ) {
        if ( ! empty( $link ) && 'file' === $link )
            $image_output = wp_get_attachment_link( $id, $size, false, false );
        elseif ( ! empty( $link ) && 'none' === $link )
            $image_output = wp_get_attachment_image( $id, $size, false );
        else
            $image_output = wp_get_attachment_link( $id, $size, true, false );

        $image_meta  = wp_get_attachment_metadata( $id );

        $orientation = '';
        if ( isset( $image_meta['height'], $image_meta['width'] ) )
            $orientation = ( $image_meta['height'] > $image_meta['width'] ) ? 'portrait' : 'landscape';

        $output .= "<{$itemtag} class='gallery-item'>";
        $output .= "
            <{$icontag} class='gallery-icon {$orientation}'>
                $image_output
            </{$icontag}>";
        if ( $captiontag && trim($attachment->post_excerpt) ) {
            $output .= "
                <{$captiontag} class='wp-caption-text gallery-caption'>
                " . wptexturize($attachment->post_excerpt) . "
                </{$captiontag}>";
        }
        elseif ( $captiontag && ( 'dd' == $captiontag ) ) {
                       $output .= "
                               <{$captiontag} class='gallery-caption'>
                               </{$captiontag}>";
               }
        $output .= "</{$itemtag}>";
        if ( $columns > 0 && ++$i % $columns == 0 )
            $output .= '';
    }

    $output .= "
        </div>\n";

    return $output;
}

And he returns me a gallery item like this:

<dl class="gallery-item">
        <dt class="gallery-icon">
            <a href="http://url-da-imagem.jpg">
                <img src="http://url-da-imagem.jpg" class="attachment-thumb-portfolio" alt="SOU O ALT SEU AMIGUINHO">
            </a>
        </dt>
        <dd class="gallery-caption">
        </dd>
</dl>

The point is that I need to insert the Alt content of the image as an html comment before the tag. In this case it would be this:

<dl class="gallery-item">
        <dt class="gallery-icon">               
            <a href="http://url-da-imagem.jpg">
                <!--SOU O ALT SEU AMIGUINHO-->
                <img src="http://url-da-imagem.jpg" class="attachment-thumb-portfolio" alt="SOU O ALT SEU AMIGUINHO">
            </a>
        </dt>
        <dd class="gallery-caption">
        </dd>
</dl>

It may sound strange, but that’s right. I’m grateful for any help.

Answer 1

1) Missed you show the filter calling your function. But surely it is:

add_filter( 'post_gallery', '__my_gallery_shortcode', 10, 2 );

function __my_gallery_shortcode( $output, $attr ) {}

Notice that they are 2 attributes in the filter declaration (and priority 10, default) and correspond to $output, $attr. You were trying to use the $attr as the first parameter in the function, and in fact is the output and comes empty.

2) Another thing is that it has an infinite loop in function, happens in the

$output = apply_filters('post_gallery', '', $attr);

who calls back his __my_gallery_shortcode(). Those apply_filters that you have in your code can be removed, or else you run the risk of other plugins filtering your shortcode.

To remove precise filters from the 2nd parameter of apply. For example, convert this:

$output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );

in

$output = $gallery_style . "\n\t\t" . $gallery_div;
# e o primeiro ali encima:
$output = '';

3) Finally, what you need can be achieved with get_post_meta( $id, '_wp_attachment_image_alt', true ); inside the loop foreach($attachments). I adjusted the $image_output to include the comment within the <a>.

foreach ( $attachments as $id => $attachment ) {

    $imagem = wp_get_attachment_image( $id, $size, false );
    $img_url = wp_get_attachment_url( $id );
    $img_perma = get_permalink( $id );
    $alt = '<!-- AQUI O ALT: ' . get_post_meta( $id, '_wp_attachment_image_alt', true ) . ' -->';

    if ( ! empty( $link ) && 'file' === $link )
        $image_output = '<a href="' . $img_url . '">' . $alt . $imagem . '</a>';
    elseif ( ! empty( $link ) && 'none' === $link )
        $image_output = $alt . $imagem;
    else
        $image_output = '<a href="' . $img_perma . '">' . $alt . $imagem . '</a>';

    $image_meta  = wp_get_attachment_metadata( $id );

    $orientation = '';
    if ( isset( $image_meta['height'], $image_meta['width'] ) )
        $orientation = ( $image_meta['height'] > $image_meta['width'] ) ? 'portrait' : 'landscape';

    $output .= "<{$itemtag} class='gallery-item'>";
    $output .= "
        <{$icontag} class='gallery-icon {$orientation}'>
            $image_output
        </{$icontag}>";

PS: There is an error in extract(shortcode_atts()), put the link blank:

'link'       => ''