2

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>
Improve this question
5
  • That doesn't look like native gallery output. You will need to determine what is changing it (plugin/theme/etc) first.
    – Rarst
    Commented Apr 8, 2014 at 18:36
  • i simpley just add gallery from admin then show like this code. no plugins installed . i don't want to use any plugins for that now. i have nextgen etc plugins have for small gallery no need actually.
    – Accore LTD
    Commented Apr 8, 2014 at 18:38
  • Actually scratch that, this might be default — looked at wrong thing, sorry.
    – Rarst
    Commented Apr 8, 2014 at 18:44
  • i already able to change most of thing from media.php page. now want to add class in <a>
    – Accore LTD
    Commented Apr 8, 2014 at 19:02
  • finally i made it two way...
    – Accore LTD
    Commented Apr 8, 2014 at 19:17

1 Answer 1

Reset to default
2

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.

Improve this answer
11
  • thank you so much.. can you tell me how to apply this. just copy and paste (changes if i need ) to function. php file or else
    – Accore LTD
    Commented Apr 8, 2014 at 19:19
  • You can add this to your functions.php file in the current theme directory or create a plugin.
    – birgire
    Commented Apr 8, 2014 at 19:20
  • cool it work.. and nice too.. but i want to add class under a tag.. like <a href="Back-Double-Swing.jpg" class="lightbox">
    – Accore LTD
    Commented Apr 8, 2014 at 19:29
  • awesome man............... thank you so much......................... i really nice.. i like this solution most . i got two but this one i feel best :) thanks again
    – Accore LTD
    Commented Apr 8, 2014 at 19:33
  • ok great, I updated the answer. You can then modify it to your needs. If you need some additional non-trivial replacements, you might want to try for example preg_replace().
    – birgire
    Commented Apr 8, 2014 at 19:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.