WordPress.org

Ready to get started?Download WordPress

Forums

How to put numbers on image gallery? (4 posts)

  1. FunFused.com
    Member
    Posted 2 years ago #

    Is there a way or modification to put numbers on the default image gallery? A small number being displayed at the top of the image like they have at thechive.com

    http://thechive.com/2012/05/07/signs-full-of-wtf-37-photos-2/

    Every image in the gallery has got numbers in chronological order at the top-right corner.

    How to do it?

    Thanks

  2. alchymyth
    Forum Moderator
    Posted 2 years ago #

    you can 'copy' the gallery code into functions.php of your theme, and edit it there;

    remove_shortcode('gallery','gallery_shortcode');
    add_shortcode('gallery','custom_gallery_shortcode');
    
    function custom_gallery_shorcode() {
    // full code see pastebin http://pastebin.com/n1mfN3NX //
    }

    http://pastebin.com/n1mfN3NX

    (for wp3.7.1 http://pastebin.com/XW1XVPaC )

    line 108 outputs the number:
    $output .= "<div class='imageNum'><span>".($i+1)."</span></div>"; //NEW

    your sample site uses styles similar to these to format the output:

    .gallery dt.gallery-icon{margin-bottom:9px;}
    .gallery dl{margin-top:15px;}
    .gallery{margin-bottom:15px;padding-bottom:0;}
    .imageNum{background:#797979;color:#fff;margin-left:0px;width:30px;float:left;text-align:center;}
    .imageNum span{text-align:center;padding:3px;}
    .gallery-icon{clear:both;float:left;}
    .gallery-caption{float:left;clear:left;}
  3. FunFused.com
    Member
    Posted 2 years ago #

    I am sorry could you please elaborate the steps.

    I copy gallery css code into function.php?

  4. alchymyth
    Forum Moderator
    Posted 2 years ago #

    step 1:
    paste the code from the pastebin link into functions.php of your theme;
    step 2:
    paste the css code at the end of style.css of your theme.

Topic Closed

This topic has been closed to new replies.

About this Topic