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

2

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

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 it returns me an item from the gallery 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 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 seem strange, but that's right. I am grateful for any help.

    
asked by anonymous 22.09.2014 / 23:07

1 answer

1

1) You were missing the filter that calls your function. But it certainly 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 $attr as the first parameter in the function, and it actually is the output and it comes empty.

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

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

which returns its __my_gallery_shortcode() . These apply_filters you have in your code can be removed, or you run the risk of other plugins filtering your shortcode.

To remove the filters you need the 2nd apply parameter. 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 ); within the foreach($attachments) loop. I set $image_output to include comment within <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: You have an error in extract(shortcode_atts()) , put the link in blank:

'link'       => ''
    
23.09.2014 / 02:13