Custom site search

SmugMug's search box allows your visitors to type in the keywords they want to search for, and that's it. This customisation allows you to build a custom search box which supports multiple ways for your customers to choose keywords instead of typing them in.

The basics

Add an HTML block to your page where you want the search box to appear. We'll begin with this HTML code which is a basic search textbox similar to SmugMug's default one:

<form action="http://smugedit.com/keywordsearch/" method="get">
	<input type="hidden" name="site" value="www.mikejulianaphotography.com">
	<input type="text" name="q" style="width: 15em" class="sm-form-field sm-form-field-text-input" placeholder="search for photos...">
	
	<button class="sm-button sm-button-size-small sm-button-skin-accent">
		<span class="sm-button-label">Search</span>
	</button>
</form>

This looks like:

Try searching for "snow". The important details of this code are:

Form action: The form action is set to "http://smugedit.com/keywordsearch/", which is the page hosted on my server which does the work of redirecting your visitor to the right page.
Form method: Must be set to "get" (not "post").
Hidden field "site": You must set this to your SmugMug site's domain name. If you've got a custom domain name, you can use that, otherwise just use your .smugmug.com domain name.
Text field "q": You can include a text field called "q" to allow the visitor to type in keywords.

Always add keywords to the user's search

Let's say that you want to restrict your search to photos taken this year, and you've keyworded all your photos with the year they were taken. You can automatically add the keyword "2013" to searches by adding a hidden field called "keyword" whose value is "2013", like so:

<input type="hidden" name="keyword" value="2013">

That code needs to be added somewhere next to the other <input> tags in the sourcecode. Here's the search box with that tweak, I've also changed the "placeholder" text to read "search this year":

If you only want to search photos which have both the keywords "may day" and "2013", you can add code like this:

<input type="hidden" name="keyword" value="2013">
<input type="hidden" name="keyword" value="may day">

Or you can combine those two keywords together into one field:

<input type="hidden" name="keyword" value="2013;may day">

This is the result:

Use a drop-down box to pick keywords

Sometimes your customers aren't sure what your keywords are, and would get tired of trying to guess them. You can provide a drop-down list of keywords to search for instead. This example code:

<form action="http://smugedit.com/keywordsearch/" method="get">
	<input type="hidden" name="site" value="www.mikejulianaphotography.com">
	
	<label>
		Race:
		<span class="sm-form-field sm-form-field-select-wrapper sm-nochrome">			
			<select name="keyword" class="sm-form-field-select">
				<option value="" class="sm-form-field-select-option">All races
				<option value="May Day" class="sm-form-field-select-option">May Day
				<option value="Buddy Werner" class="sm-form-field-select-option">Buddy Werner
				<option value="Meadows Challenge" class="sm-form-field-select-option">Meadows Challenge
				<option value="Kandi Cup" class="sm-form-field-select-option">Kandi Cup
				<option value="4Way" class="sm-form-field-select-option">Oregon 4-Way
				<option value="Kandahar" class="sm-form-field-select-option">Kandahar
				<option value="Superbowl SL" class="sm-form-field-select-option">Superbowl SL
				<option value="Winterstart" class="sm-form-field-select-option">Winterstart
			</select>
			<span class="sm-fonticon sm-fonticon-small sm-fonticon-AngleBracketDown sm-form-field-select-arrow"></span>
		</span>
	</label>
	
	<label>
		Ladies/men:
		<span class="sm-form-field sm-form-field-select-wrapper sm-nochrome">
			<select name="keyword" class="sm-form-field-select">
				<option value="" class="sm-form-field-select-option">Both
				<option value="ladies" class="sm-form-field-select-option">Ladies
				<option value="men" class="sm-form-field-select-option">Men
			</select>
			<span class="sm-fonticon sm-fonticon-small sm-fonticon-AngleBracketDown sm-form-field-select-arrow"></span>
		</span>
	</label>
	
	<button class="sm-button sm-button-size-small sm-button-skin-accent">
		<span class="sm-button-label">Search</span>
	</button>
</form>

Produces this search box:

Basically, you add a <select> tag with a name of "keyword" for each drop-down box you require. Inside the select tag are <option> tags which show the keywords to pick from. You set the "value" on these tags to the keyword that will be searched for, and then write the text to display to the user after the tag.

To create a choice which doesn't add a keyword to the search (e.g. an "any" option), just add an option tag with an empty "value".

Host the tool on your own server (optional)

This search box requires a page on my server to perform the work of joining the search keywords together. If you'd prefer to host this part on your own server, you can do that with one of the options below.

PHP version

If your webhost supports PHP, this is the best option as it avoids a brief "loading..." screen appearing while the search is performed. Create a file called "search.php" with this content:

<?php

header('Expires: 0');

if (empty($_GET['site'])) {
	die('Missing required "site" parameter, this should be set to your SmugMug domain name.');
}

$matches = array();
if (!preg_match('#^(?:http://)?([-a-z0-9]+(?:\.[-a-z0-9]+)*)(?:/|$)#i', trim($_GET['site']), $matches)) {
	die('Bad "site" parameter, check that you have correctly entered your SmugMug domain name.');	
}

$domain = $matches[1];

$search_query = '';

//We want to allow multiple get fields with the same name, so we must manually parse the URL arguments
foreach (explode('&', $_SERVER['QUERY_STRING']) as $param) {
	list($key, $value) = explode('=', $param);
	
	$key = trim(urldecode($key));
	$value = trim(urldecode($value));
	
	if ($value) {
		if ($search_query) {
			$search_query .= ';';
		}
		
		if ($key == 'q') {
			// Treat spaces in user-entered queries as keyword-separators (e.g. "bee flower" is a search for "bee; flower", not a search for a keyword called "bee flower")
			$search_query .= preg_replace('#\s+#', ';', $value);			
		} elseif (preg_match('#^keyword#', $key)) {
			// Other keywords get added in as-is
			$search_query .= $value;
		}
	}
}

header('Location: http://' . $domain . '/keyword/' . rawurlencode($search_query));

Upload search.php to your webhost, then change the "action" in your <form> tag to point to it.

HTML/JavaScript version

This version briefly shows a "loading" screen while the user is redirected, so if you can use PHP you should choose that version instead. Create a file called "search.html" with this content:

<!DOCTYPE html>
<html>
<head>
	<title>Searching...</title>
</head>
<body>
	<h1>Please wait a moment while you are redirected...</h1>
	<script type="text/javascript">
	function redirectTo(url) {
		/*
		 * Add a link to the page as a backup in case the user's browser disables
		 * redirects:
		 */
		var a = document.createElement('a');
	
		a.href = url;
		a.innerHTML = 'Please click here if your web browser does not redirect you automatically.';
	
		document.body.appendChild(a);
	
		window.location = url;
	}
	
	function getQueryParams(queryString, asMap, asList) {
	    queryString = queryString.split("+").join(" ");
	
		var tokens, re = /[?&]?([^=]+)=([^&]*)/g;
	
		while (tokens = re.exec(queryString)) {
			var param = {
				key : decodeURIComponent(tokens[1]),
				value : decodeURIComponent(tokens[2])
			};
	
			asList.push(param);
	
			asMap[param.key] = param.value; 
		}
	}
	
	function trim(s) {
		return s.replace(/^\s+|\s+$/g, '');	
	}
	
	var 
		queryMap = {},
		queryList = [],
		domainMatches;
	
	getQueryParams(document.location.search, queryMap, queryList);
	
	if (!queryMap.site) {
		alert('Missing required "site" parameter, this should be set to your SmugMug domain name.');
	} else if (!(domainMatches = queryMap.site.match(/^(?:http:\/\/)?([-a-z0-9]+(?:\.[-a-z0-9]+)*)(?:\/|$)/i))) {
		alert('Bad "site" parameter, check that you have correctly entered your SmugMug domain name.');	
	} else {
		var searchQuery = "", i, key, value, argument;
		
		for (i = 0; i < queryList.length; i++) {
			argument = queryList[i];
			
			key = trim(argument.key);
			value = trim(argument.value);
			
			if (value) {
				if (searchQuery) {
					searchQuery += ';';
				}
				
				if (key == 'q') {
					// Treat spaces in user-entered queries as keyword-separators (e.g. "bee flower" is a search for "bee; flower", not a search for a keyword called "bee flower")
					searchQuery += value.replace(/\s+/, ';');			
				} else if (key.match(/^keyword/)) {
					// Other keywords get added in as-is
					searchQuery += value;
				}
			}
		}
		
		redirectTo('http://' + domainMatches[1] + '/keyword/' + encodeURIComponent(searchQuery));
	}
	</script>
</body>
</html>

Upload search.html to your webhost, then change the "action" in your <form> tag to point to it. Here's a search box that uses the HTML/JS method, so you can see what the brief search delay looks like: