How to get clean code for a gallery?

by

I want clean code for a gallery, like:

<div class="gallery">
<ul>
<li><a href="https://wordpress.stackexchange.com/questions/140681/wp-content/uploads/2014/04/lgitem-01.jpg"><img width="150" height="150" src="../wp-content/uploads/2014/04/lgitem-01-150x150.jpg" class="tnggallery" /></a></li>
<li><a href="https://wordpress.stackexchange.com/questions/140681/wp-content/uploads/2014/04/lgitem-01.jpg"><img width="150" height="150" src="../wp-content/uploads/2014/04/lgitem-01-150x150.jpg" class="tnggallery" /></a></li>
<li><a href="https://wordpress.stackexchange.com/questions/140681/wp-content/uploads/2014/04/lgitem-01.jpg"><img width="150" height="150" src="../wp-content/uploads/2014/04/lgitem-01-150x150.jpg" class="tnggallery" /></a></li>
<li><a href="https://wordpress.stackexchange.com/questions/140681/wp-content/uploads/2014/04/lgitem-01.jpg"><img width="150" height="150" src="../wp-content/uploads/2014/04/lgitem-01-150x150.jpg" class="tnggallery" /></a></li>
</ul>
</div>

Currently my code is coming out like this:

<div id="gallery-2" class="gallery galleryid-12 gallery-columns-5 gallery-size-thumbnail"><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="https://wordpress.stackexchange.com/questions/140681/uploads/2014/04/lgitem-01.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-01-150x150.jpg" class="attachment-thumbnail" alt="lgitem-01"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="http://wordpress.stackexchange.com/uploads/2014/04/lgitem-02.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-02-150x150.jpg" class="attachment-thumbnail" alt="lgitem-02"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="http://wordpress.stackexchange.com/uploads/2014/04/lgitem-03.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-03-150x150.jpg" class="attachment-thumbnail" alt="lgitem-03"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="http://wordpress.stackexchange.com/uploads/2014/04/lgitem-04.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-04-150x150.jpg" class="attachment-thumbnail" alt="lgitem-04"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="http://wordpress.stackexchange.com/uploads/2014/04/lgitem-05.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-05-150x150.jpg" class="attachment-thumbnail" alt="lgitem-05"></a>
        </dt></dl><br style="clear: both"><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="http://wordpress.stackexchange.com/uploads/2014/04/lgitem-06.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-06-150x150.jpg" class="attachment-thumbnail" alt="lgitem-06"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="http://wordpress.stackexchange.com/uploads/2014/04/lgitem-07.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-07-150x150.jpg" class="attachment-thumbnail" alt="lgitem-07"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="http://wordpress.stackexchange.com/uploads/2014/04/lgitem-08.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-08-150x150.jpg" class="attachment-thumbnail" alt="lgitem-08"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="http://wordpress.stackexchange.com/uploads/2014/04/lgitem-09.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-09-150x150.jpg" class="attachment-thumbnail" alt="lgitem-09"></a>
        </dt></dl><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="http://wordpress.stackexchange.com/uploads/2014/04/lgitem-10.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-10-150x150.jpg" class="attachment-thumbnail" alt="lgitem-10"></a>
        </dt></dl><br style="clear: both"><dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a href="http://wordpress.stackexchange.com/uploads/2014/04/lgitem-11.jpg"><img width="150" height="150" src="../uploads/2014/04/lgitem-11-150x150.jpg" class="attachment-thumbnail" alt="lgitem-11"></a>
        </dt></dl>
        <br style="clear: both;">
    </div>

1 Answer
1

You can try to overwrite the gallery shortcode with:

add_shortcode( 'gallery', 'custom_gallery_shortcode' );

where the shortcode callback is:

/**
 * Overwrite the native  shortcode, to modify the HTML layout.
 */
function custom_gallery_shortcode( $attr = array(), $content="" )
{
        $attr['itemtag']        = "li";
        $attr['icontag']        = "";
        $attr['captiontag']     = "p";

        // Run the native gallery shortcode callback:    
        $html = gallery_shortcode( $attr );

        // Remove all tags except a, img,li, p
        $html = strip_tags( $html, '<a><img><li><p>' );

        // Some trivial replacements:
        $from = array(  
            "class="gallery-item"", 
            "class="gallery-icon landscape"", 
            'class="attachment-thumbnail"',
            'a href="https://wordpress.stackexchange.com/questions/140681/, 
        );              
        $to = array("',
            '',
            'class="tnggallery"', 
            'a class="lightbox" href=", 
        );
        $html = str_replace( $from, $to, $html );

        // Remove width/height attributes:
        $html = preg_replace( "/(width|height)=\"\d*\"\s/', "", $html );

        // Wrap the output in ul tags:
        $html = sprintf( '<ul class="gallery">%s</ul>', $html );

        return $html;
}

to modify the HTML layout.

Leave a Comment