This blog is built on WordPress and I display my pictures using a plugin called NextGen Gallery which is written by by Alex Rabe.

As I write this post, I’m using WordPress 2.7.1 and NextGen Gallery 1.3.3. I know this code will work with WordPress 2.6 but you need NextGen 1.x or higher since there was a database schema change at that revision.

You may have noticed a link at the top that says “Search Image Database”. That search function is a customisation and I’m frequently asked how its done because its not built into NextGen at the moment (but I understand it is coming in a future version).

First, a bit of background reading, it started here, which links here and then it moved here.

Are you confused? Well here is how I do it, everything involved, this is with special thanks to my beautiful girlfriend Laura!

Disclaimer; I’m not a programmer but that may help in terms of the way I write…what I’m about to write!

Major Warning; backup backup backup, don’t come screaming to me if you stuff up.

Credit; This all originated from this chap whose name I don’t know. Apologies in advance for using the term “my” as I write!

Try and understand what is going on here and don’t just copy everything, its customised for my setup, it will be easier for you if you try to understand it to a basic level at least.

If you look at your folder structure, under wp-content/themes you will find your theme, in my case it’s wp-content/themes/moshblue-10.

To get the search working you initially need 3 php files in that folder, functions.php, search.php and searchform.php. Dependent on your theme they maybe there already but if one is missing you could simply copy it from the default theme folder (don’t do that just yet).

If they are already present they maybe providing a search function to the blog already so you may need to merge my code or create additional pages, again I say, backup backup backup!

searchform.php is just that, its the search form from which you initiate the search.

search.php is the page that returns the results of the search and functions.php is the search function, i.e. the code to do the search.

This is my searchform.php;

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<label class="hidden" for="s"><?php _e('Search for:'); ?></label>
<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Go" />
</div>
</form>

that’s literally all that is in the page, nothing extra. In the code see value=”Go” go to my search page and notice the button to search says “Go”…starting to make sense?

This is my search.php;

<?php
get_header();
?>

<div id="content">
Search results;

  <p></p>
   <?php if(is_search()) {
	$search = $wp_query->get('s');
	$keywords = preg_replace('/\+/',' ',$search);
	if (function_exists ('ngg_get_search_pictures')) {  // function from functions.php
		$nggpictures = ngg_get_search_pictures($keywords, '6'); // put the number of pictures by row you want, if you don't want "4"

		if ($nggpictures) {
			echo "<h2></h2>";
			echo $nggpictures;
		}
	}
}

?>
<p>Want to refine or do another Search?</p>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
<?php get_sidebar(); ?>
<!-- The main column ends  -->
<?php get_footer(); ?>

The key thing to notice here is ngg_get_search_pictures($keywords, ’6′), that 6 represents the number of pictures per row to return. Dependent upon your theme that may or may not work, and the size of the thumbnails will also make a difference.

Note that I have adjusted the search to only search pictures!!!! Take a look at the search.php from the default theme. If you compare you will notice that search.php returns blog results, I only want pictures so I stripped most of it out, as you can see.

In that code I’d also draw your attention to the references to searchform.php. If your theme already has a search function for blogs, its probably using searchform.php already. Lets say you want a seperate search page just for images, in that case create the second searchform page as something like searchformpic.php and also change the refernce in search.php.

Editing functions.php requires great care if it exists already because your theme may use it. In that case you can merge my code, its not hard, notice how my function is called ngg_get_search_pictures, compare the files and you will notice the structure and what to copy in and where.

This is my functions.php;

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar Top',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

## Function to do searchs on gallery pics from NextGen Gallery plugin
##
## 2 vars : 	(1) $keywords (usually coming from the standard search query from wordpress)
##		(2) $numberPicCol (number of pic by row, if null it takes 4 )
function ngg_get_search_pictures ($keywords, $numberPicRow = NULL) {
	global $wpdb;
	$count=1;
	if (!$numberPicRow) { $numberPicRow = "4"; }

	$nngquery = "
SELECT pid,description,alttext
FROM   wp_ngg_pictures
WHERE  MATCH (description, filename, alttext) AGAINST ('*$keywords*' IN BOOLEAN MODE)
AND exclude = '0'
UNION
SELECT pid,description,alttext
FROM wp_ngg_pictures, wp_terms, wp_term_relationships
WHERE pid = object_id and term_id = term_taxonomy_id and
MATCH (name) AGAINST ('*$keywords*' IN BOOLEAN MODE)
AND exclude = '0'
				";
	$pictures = $wpdb->get_results($nngquery, ARRAY_A);

	if ($pictures) foreach($pictures as $pic) { 

		$out .= '<a href="'.nggGallery::get_image_url($pic[pid]).'" title="'.stripslashes($pic[description]).'" class="thickbox" rel="gallery'.$pic[pid].'">';
		$out .=  '<img class="ngg-gallery" style="border: .1em solid #FFFFFF" src="'.nggGallery::get_thumbnail_url($pic[pid]).'" alt="'.stripslashes($pic[alttext]).'" title="'.stripslashes($pic[alttext]).'" />';
		$out .=  "</a>\n";
				if ($count == 0) {
				$out .= "<br />";
				}
				++$count;
				$count%=$numberPicRow;
	}
	return $out;
};

?>

You can see from above that the search is against the description, picture name, alt text and the picture tags.

So now we need to publish the search form. For that I’m going to refer you here for some background.

In summary create a new page called searchpage.php (or whatever suits if the name is already used), again here is my code (and note the searchform.php reference);

<?php
/*
Template Name: Search Page
*/
?>

<?php get_header();?>

<div id="content">

<p>* * * I'm still importing images so not alot here but give the search a go anyway * * *</p>

<p>Tip! Use quotation marks to refine searches, e.g. instead of Bare Island, which returns all results for Bare and for Island, you may wish to search for "Bare Island" which returns more specific results.</p>
<p>You can also use part of a word to return a greater number of results</p>

<?php include (TEMPLATEPATH . '/searchform.php'); ?>   

</div>
<?php get_sidebar(); ?>
<!-- The main column ends  -->
<?php get_footer(); ?>

Note the template name of “Search Page” change that if you already have a Search Page Template otherwise you wouldn’t know which one to pick in the next step.

Now upload all 4 pages to the root of your theme.

In your WordPress admin go to Page > New > give it a title like Search Pic Database > Under attributes (right column, you may need to click on attributes to expand it) select the template “Search Page” (or whatever you called it).

Click Save and Publish and that should, in theory, be it.

Important Note; Due to limitations (default) in MySQL, your picture tags to be searched must be a minimum of 4 letters to return search results, so to get returns for the tag dog, you would put in a tag of dogg.