Custom site search - Sherlock Photography
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:
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:

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:

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

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:

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:

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:

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:

Powered by SmugMug Log In