Styling the native gallery

Sorry perhaps i read your question a little too fast before and didn’t quite grasp what your issue is.

The embedded styling is in the source of the page, at a guess maybe the gallery shortcode pulls that in when it’s used in a post/page (view source and scroll down to where the images are you’ll see the styling placed just before those lines).

So i take it your page linked above is set to 8 images then?, since i see 6 images on the link you’ve provided above, would that be correct?

You see this part..

$output = apply_filters('gallery_style', "

This indicates a filter hook… 🙂

So if you wanted to remove all that markup above, you could do this(purely as an example).

add_filter( 'gallery_style' , 'my_gallery_filter' );

function my_gallery_filter( $existing_code ) {
	return;
	//return $existing_code; // Uncomment the start of this line and remove/comment-out line above to fix(incase you're testing this code)
}

However you’d probably not want to remove all the markup, since it includes the opening DIV element that encompasses your gallery images, i’m simply showing you how you’d hook onto that filter.

I’ve not used a filter on that particular hook before, so i can’t give a better example right now. If you’re unable to make use the example above, let me know i’ll test some code and give a better example (can’t do that right now, have other things to get done).

I’m not sure those variables will work though.

The point of interest being that you can run a filter(avoid editting core files), so yes you can add it as a filter in your functions file.

If you get stuck let me know and i’ll try to find some time to take a look at writing a filter for you.

One approach is how the new wp 3.0 theme does it, and that’s to remove the styling and declare them in the stylesheet, here’s how that’s done.

In functions file: Inside the opening and closing php tags of the functions file, ie. <?php and ?>

function twentyten_remove_gallery_css( $css ) {
	return preg_replace( "#<style type='text/css'>(.*?)</style>#s", '', $css );
}
add_filter( 'gallery_style', 'twentyten_remove_gallery_css' );

In stylesheet:

.entry-content img {
	margin: 0 0 24px 0;
	max-width: 640px;
}
.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 24px;
	margin-top: 4px;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 24px;
	margin-top: 4px;
}
.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignleft, img.alignright, img.aligncenter {
	margin-bottom: 12px;
}
#content .wp-caption {
	background: #f1f1f1;
	color: #888;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	margin-bottom: 20px;
	padding: 4px;
}
#content .wp-caption img {
	margin: 5px;
}
#content .wp-caption p.wp-caption-text {
	margin: 0 0 4px;
}
#content .wp-smiley {
	margin:0;
}
#content .gallery {
	margin: auto;
}
#content .gallery .gallery-item {
	float: left;
	margin-top: 10px;
	text-align: center;
	width: 33%;
}
#content .gallery img {
	border: 2px solid #cfcfcf;
}
#content .gallery .gallery-caption {
	margin-left: 0;
}
#content .gallery dl {
	margin: 0;
}
#content .gallery img {
	border: 10px solid #f1f1f1;
}
#content .gallery-caption {
	color: #888;
	font-size: 12px;
	margin:-24px 0 24px 0;
}
#content .gallery br+br {
	display: none;
}

hello,

i am having an issue where individual image thumbnails are being displayed differently to the thumbnails generated for a gallery.

when i look at the code in the page, for the gallery there is:

[gallery link="file" columns="4" orderby="ID"]

and for the single image there is:

[caption id="attachment_525" align="alignnone" width="150" caption="Caption Here"]<a href="http://www.path_to_image.com/2.jpg"><img src="http://www.path_to_image.com/2-150x150.jpg" alt="" title="Title" width="150" height="150" class="size-thumbnail wp-image-525" /></a>[/caption]

i have the following classes defined in my stylesheet but they don’t seem to be passing on to the gallery thumbnails:

.wp-caption
.wp-caption img
.wp-caption p.wp-caption-text

any ideas appreciated!

thanks!