Posted on by Matthew

Mastering Backlight’s Search

Backlight’s search seems simple enough on the surface, but has hidden depths. In this article, we deep dive on Backlight’s search features!

The Search Page

Backlight’s search accepts keyword queries, and returns a page with a list of matching albums, and a gallery of matching images.

Search is a part of Backlight’s core. It works out of the box, with no additional setup required. The only prerequisite is that you have published at least one album, else there would be nothing to search.

By default, the site navigation menu includes a “Search” item to get you to the Search page. Otherwise, the Search page can always be reached by URL:

yourdomain.com/backlight/search/

Searches can begin here; search results will also be displayed here.

The Search Template

Like most things in a Backlight-powered website, the appearance of the Search page is user configurable. The Search page uses a standard album template. This can be the same template as your portfolio albums, or you can design a separate template specifically for search.

By default, Search uses the same “Default Album” template that your albums use.

While Backlight will allow you to assign any type of album template for search to use, we strongly advise creating a template of the Pangolin Album type.

Beyond that strong recommendation, most else is a matter of personal preference. I do suggest using the “Classic” grid type for the layout. The Masonry grid layout favors portrait-orientation images, while Justified favors landscape-orientations; the Classic grid gives equal emphasis to images of both orientations. The Classic grid also does a good job handling thumbnails of varying size, an important consideration if your site uses album templates with differently sized thumbnails.

To change the template used by search, in Backlight’s admin menu, go Designer => Templates => Assign Templates.

Once there, select your preferred album template for “Search”, and Save.

Making Search Accessible

Search is always available. Making it accessible is a simple matter of exposing it to your audience. This can be done in a variety of ways.

Perhaps the most obvious way, you can include a “Search” item in your site navigation menu, as we do by default.

You can provide links anywhere that allows you to input page copy. Using HTML, that link might look like this:

<a href="http://yourdomain.com/backlight/search/">Search</a>

Or like this, using Markdown:

[Search](http://yourdomain.com/backlight/search/)

If you’re feeling more ambitious, you might like to drop a search input form into one of your content areas; in a sidebar, for example. The HTML – copied from the Search page – is this:

<form action="/backlight/search/" method="GET" class="search-form">
    <p>
        <label><span class="screen-reader-text">Search for:</span></label>
        <input type="text" id="q" name="q" value="">
    </p>
    <button type="submit" class="fa_pseudo">
        <span>Search Albums</span>
    </button>
</form>

Quick Search is yet another option. The quick search button appears as a Magnifying Glass in the top-right corner of page. Clicking it opens the search input in a large page overlay.

To enable or disable the Quick Search button, create or edit a page template using the Pangolin Page module; in the Top Pallet options group, look for the “Quick Search” heading. The quick search button is enabled by default when creating a new page template.

My personal preference when designing in Backlight is to remove the Search item from the navigation menu, and to expose the quick search button in my top pallet.

Search Handoff

Search Handoff is a convenience feature for those also using Backlight’s WordPress Add-on.

Backlight and WordPress run parallel to one another, but are separate systems; WordPress is unaware of Backlight’s database, and vice versa.

Backlight’s search queries its own published albums. When search results are displayed, the page includes a search input field at the top of the page, pre-filled with the current query.

If the WordPress Add-on is installed, this form will also include the search handoff link, “Search Blog”. Clicking this link will pass the same query to WordPress, yielding a page of search results from your blog.

The search results page in our WordPress theme is similarly structured, with a “Search Albums” handoff link. This passes the same query to Backlight and displays Backlight’s search results.

Advanced Search Techniques

This section comes directly from our documentation, Working with Backlight’s Search.

Backlight’s search operates on keywords, file names, album titles and image captions. It matches albums containing the search terms, as well as individual images. The search results page will contain two sections, displaying returned albums and returned images separately.

Photos that match on keywords will feature higher in the results. Searching on photos is done primarily on keywords, and secondarily on matches of title, caption and filename. Searches are further ordered based on the proportion of search terms found in the fields.

Search accepts required and omitted terms, and defaults to “OR” behavior.

By “OR” behavior, we meant that a search for “thailand bangkok” would return all hits for either “thailand” or “bangkok”.

To require a term, use “+” (plus); this would ensure we only display images of Bangkok, Thailand, and exclude images of Bangkok, Nebraska:

+thailand bangkok

To omit a term, use “-” (minus); this would return all images from Thailand, excluding images of Bangkok:

thailand -bangkok

To search a string of words as if it were a single term, wrap it in either single or double quotation marks:

thailand bangkok "Khaosan Road"

To require or omit a string of words, add the “+” or “-” sign within the quotes:

thailand bangkok "+Khaosan Road"

Let’s say you had these photos:

1 – keywords=apple, orange, title=fruit
2 – keywords=apple, orange, title=apple
3 – keywords=apple, title=fruit
4 – keywords=apple, title=apple
5 – title=orange

When searching for the terms apple and orange, the results would be:

2 – (keywords match both search terms, title matches search term)
1 – (keywords match both search terms)
4 – (keywords match one search term, title matches one search term)
3 – (keywords match one search term)
5 – (title matches on search term)

Using keywords in the title or filename will elevate photos in the results over other photos that have the same level of keyword matching.

Search by URL

Backlight’s search queries appear in the URL. For example, running our search on “thailand bangkok” would yield results at the URL:

domain.com/backlight/search/?q=thailand+bangkok

Rather than composing URLs by hand, the easiest way to get a URL for any given search is to run that search yourself, then copy the URL from the browser’s address bar when results are returned.

That URL, you can use in whatever ways you can imagine. Email it to a client; create a hyperlink on one of your pages, a menu item in your site navigation menu, a curated list of search keywords in a sidebar, etc.

\(*_*)/

And that’s it! Having been caught within the blast radius of such a knowledge bomb and survived it, you now have mutant search powers. How you use them is up to you, but I hope you now feel empowered to create a more searchable site, and to use Backlight’s search more effectively.

If you have any remaining questions about Backlight’s search, leave them in the comments below!