WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to number an image gallery (17 posts)

  1. sentineltravis
    Member
    Posted 1 year ago #

    Is there a way or modification to put numbers on the images within a post? A small number being displayed at the top of the image like they have at thechive.com is close to what I am looking for

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

    I have tried inputting code from into my functions.php:
    http://pastebin.com/n1mfN3NX

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

    I am rather new to coding and any help is greatly appreciated!

  2. SiteGround
    Member
    Posted 1 year ago #

    Hello,

    You could use the default caption functionality of the WordPress gallery. You can then enter the images numbers as captions and style them the way you want using CSS :)

  3. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    I just added the code from the pastebin into my test site (into functions.php of a child theme of Twenty Twelve) and it is working -

    however, there could be a conflict with other filters or plugins, and the location and visibility of the numbers might depend on the css of your theme

    - please post a link to one of your posts or pages with a gallery.

  4. sentineltravis
    Member
    Posted 1 year ago #

    alchymyth-

    Did you just paste the code at the bottem of functions.php? Below is a link to a post on my test site.

    http://pacontreras.com/2012/10/05/revenge-of-morning-madness-31-photos/

    Thank you for the responses.

  5. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    your link seems to show a post with a lot of images, but no image gallery;

    http://codex.wordpress.org/Gallery_Shortcode

  6. sentineltravis
    Member
    Posted 1 year ago #

    I will test again using info provided and let you know either way! thank you again

  7. sentineltravis
    Member
    Posted 1 year ago #

    alchymyth-

    I was able to get the result in another test post listed below.
    http://pacontreras.com/2012/10/11/yoga-26-photos/

    Would you happen to know if there is a way to set the images to be their full size and centered?

  8. sentineltravis
    Member
    Posted 1 year ago #

    Also previously we were linking the first image to the post then using the "more" feature so that only one image was displayed on the home page.

    we are currently using the [gallery link="file" columns="1" orderby="title"] code from the codex link you sent.

  9. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    to set the images to be their full size and centered?

    about full size:
    try to integrate the size parameter into your gallery shortcode:

    [gallery size="full"]

    to center the image, you will need to change the code and css;

    the needed css is in these three styles:

    .imageNum{position:relative;top:-20px;left:30px;width:30px;float:left;color:#fff;background:#797979;}
    .imageNum span{text-align:center;padding:3px;}
    .gallery-icon{clear:both;float:none;position:relative;display:inline-block;}

    you might need to adjust the top:0px;left:0px; number values.

    new code:
    http://pastebin.com/zTZbqtZM

    - the number code got moved into the .gallery-icon element for better positioning.

  10. sentineltravis
    Member
    Posted 1 year ago #

    That is working perfect. The only issue is the display on the home page.

    You can see what I am trying to accomplish @ http://pacontreras.com/
    Is there a way to link the fist image from the gallery to be the only image appearing on the home page post then have the "view more" link underneath?

    Or possibly just insert the image file and use "view more" and code to hide them once inside the full post?

  11. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    Is there a way to link the first image from the gallery to be the only image appearing on the home page post then have the "view more" link underneath?

    you could use a conditional in functions.php which checks for !is_singular() to break the output loop of the gallery images;

    example:

    $output .= "</{$itemtag}>";
    		if ( $columns > 0 && ++$i % $columns == 0 )
    			$output .= '<br style="clear: both" />';
    
    //break the foreach loop on index pages
    if( !is_singular() ) break;
    //breaks the foreach loop on index pages	
    
    }
    
    	$output .= "
    			<br style='clear: both;' />";
    
    	$output .= "	</div>\n";
    
    //add 'read-more' on index pages
    if( !is_singular() ) $output .= "<p style='text-align:center;width:100%;'><a href='" . get_permalink($post->ID) . "#" . $post->ID . "'>View Full Gallery</a></p>";
    //adds the 'read more' on index pages
    
    	return $output;
    }

    - this replaces a section at the and of the shortcode starting with the three first lines which are unedited;

    - the full code is in http://pastebin.com/b7zJTS2J

  12. sentineltravis
    Member
    Posted 1 year ago #

    You're a genius. Im so donating to the paypal on your site!

    last question is if there is a way to remove the 1 from only the home page?

  13. sentineltravis
    Member
    Posted 1 year ago #

    I feel like such a bug.
    can the image on the home page be set to link into the post? currently when clicked it links to only the imagefile instead of entering the post

  14. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    single gallery image in index pages linked to post, number 1 removed from single image;

    pastebin:
    http://pastebin.com/Jm0tr2Ty

  15. paul.contreras
    Member
    Posted 1 year ago #

    Thank you thank you. You are a genius and your help is very much appreciated.

  16. JohnBolyard
    Member
    Posted 9 months ago #

    @alchymyth - I'm trying to find the location of the code "<br style='clear: both;' />" in the 2012 theme as relates to galleries.

    I'm using the built-in WP media gallery and it's adding 2 of these returns making a very large bottom margin.

    I've trying lots of work-arounds but I think I like to remove it from the code unless it's in the core.

    Any help would be really appreciated - thanks!

  17. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    @JohnBolyard - please start your own thread - this one is already resolved and months old.

    You can do so here:

    http://wordpress.org/support/forum/themes-and-templates#postform

Topic Closed

This topic has been closed to new replies.

About this Topic