Image gallery numbers

Hello,

I have added some extra code to the functions of newspaper. This code gives every image in a gallery a number.

Since I have updated to 3.01 I can no more ad this code to the functions.php. When I do that, it shows a blank page.

Here is another site of mine where it works http://www.maennerhoehle.com/arrrghhh/

Below is the code i need to place in the functions.php and the CSS.

Could you please check that? This function is very important for my site!

Thank you very much for your feedback!

Best regards,
Florian

Code for functions.php:

add_action( 'after_setup_theme', 'wpse_74492_replace_gallery_shortcode' );

/**
 * Replace the default shortcode handlers.
 *
 * @return void
 */
function wpse_74492_replace_gallery_shortcode()
{
    remove_shortcode( 'gallery' );
    add_shortcode( 'gallery', 'wpse_74492_gallery_shortcode' );
}

function wpse_74492_gallery_shortcode( $attr )
{
    // Let WordPress create the regular gallery …
    $gallery = gallery_shortcode( $attr );

    $gallery = preg_replace_callback( '~<img~', 'wpse_74492_gallery_callback', $gallery );

    return $gallery;
}

function wpse_74492_gallery_callback( $matches )
{
    static $count = 0;
    $count += 1;

    return "<span class='gallery-number'>$count</span>" . $matches[0];
}

This code is for the CSS:

.single .gallery img {
	width: 500px !important;
	height: auto;
}

.gallery-number {
	position: absolute;
	left: 0;
	top: 0;
	background: #ff6a62;
	padding: 0 10px;
}

.gallery-item {
	margin-top: XXpx !important;
	margin-bottom: 22px !important;
}

Hi Marius,

Thanks for you feedback! This works 🙂

Another problem I have with the galleries is when you resize the screen it shows 2 images on one line instead of 1 in full size.

For example here: http://www.alphamann.net/zu-viel-getrunken-30-fotos/

It should look like this: http://www.maennerhoehle.com/arrrghhh/

I don’t know why this is, it makes no sense. Is there a way to fix this?

Thanks,
Florian

Hi, you’re from romania, right? Your country was blocked by Wordfence. Please can you try again? Thanks

Hi Marius,

Thanks, but now on the desktop browser the images are no more 500 px wide, they are to small. When I resize the window the images would be 500px wide.

For example: http://www.alphamann.net/zu-viel-getrunken-30-fotos/

Here is the css code I have installed:

.single .gallery img {
	width: 500px !important;
	height: auto;
}

.gallery-number {
	position: absolute;
	left: 0;
	top: 0;
	background: #ff6a62;
	padding: 0 10px;
}

.gallery-item {
	margin-top: 0 !important;
	margin-bottom: 22px !important;
}

@media (max-width: 767px) {
	.gallery-item {
		width: auto !important;
	}
}

Could you please check this again? Thank you very much!

Hi Marius, thanks now it works on IE. I have made a virtual test and only on Opera it does not work. Is this a common problem?

By the way: I’m going to buy this theme for to new projects 🙂