Tag: gallery

Categories
Development

Output WordPress Gallery In Sidebar

A client really wanted to make use of the built in WordPress gallery shortcode. It’s a really cool built in feature to WordPress that easily allows them to manage basic photo galleries. But we wanted the gallery thumbnails to be generated in a sidebar, not the actual Page or Post.

This took a bit of time to figure out how to do, but luckily it was right in front of me in the WordPress documentation.  I just entered the following in the sidebar.php file (just gallery in the brackets):

echo do_shortcode('[the-word-gallery-goes-here]');

You can add that standard gallery shortcode options to that as well. So simple, I can’t believe it took me as long as it did to figure this one out.

Categories
Development

YUI 3 Gallery

I’ve really been meaning to make the switch over from YUI 2.x to 3.x, and I do believe the YUI 3 Gallery has made up my mind. The Gallery is a repository of YUI 3 modules that aren’t addressed by the core library. Also, all modules are released under the same BSD license as the YUI Library.

Even though the Gallery is fairly new, the amount of modules is already pretty impressive. Some that I’m very excited to play with are:

This looks very cool, and if you’re using YUI3 go now.

Categories
Development

Incorporating Lightbox 2 effect with WordPress gallery

I wanted my client to be able to add pictures to a gallery using the build in WordPress gallery, but was hoping to customize the display of the gallery thumbs a bit. I was hoping to get it to display as the following:

      use the Lightbox 2 script
      able to override the CSS that is being written to the page

Since the default CSS that the gallery generates is written in the page, overriding the styles was kinda a pain to do in the site’s stylesheet I was using. However I did find that I could edit the default CSS that is being written to the page by the gallery by editing the following file:

/wp-includes/media.php

Locate the following code and edit as necessary:

	$output = apply_filters('gallery_style', "
		<style type='text/css'>
			#{$selector} {
 
			}
			#{$selector} .gallery-item {
				float: left;
 
				text-align: center;
							}
			#{$selector} img {
 
			}
			#{$selector} .gallery-caption {
				margin-left: 0;
			}
		</style>
		<!-- see gallery_shortcode() in wp-includes/media.php -->
		<div id='$selector' class='gallery galleryid-{$id}'>");

You can see I’ve removed some styles in this case.

Further edits can be made to the gallery from this file as well. I chose to use a little bit of javascript to attach the rel attribute to my anchors instead of editing the php file. Personally, I’d rather do that so in case a future version of WordPress altered the media.php file it’d be one less thing for me to worry about.

Very basic javascript to add the rel attribute that Lightbox 2 requires to the image anchors:

var galleryDivs = YAHOO.util.Dom.getElementsByClassName('gallery', 'div', 'bd');
for (var i = 0; i < galleryDivs.length; i++) {
    var imageAnchor = galleryDivs[i].getElementsByTagName('a');
    for (j = 0; j < imageAnchor.length; j++) {
        imageAnchor[j].setAttribute('rel', 'lightbox[gallery]');
    }
}

I use the YUI Dom collection to help me gather nodes.

Then it’s just a matter of calling the relevant dependancy scripts and styles into your page and it should work for you.