How to get clean code for a gallery?

1 Views

I want clean code for a gallery, like: 

<div class="gallery">
<ul>
<li><a href='../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='../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='../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='../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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>
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. You can try to overwrite the gallery shortcode with:

    add_shortcode( 'gallery', 'custom_gallery_shortcode' );

    where the shortcode callback is:

    /**
 * Overwrite the native [gallery] 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=', 
        );              
        $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.