Linking to Gallery Filters

Once you have a gallery with filters setup, you can create links on your site which link directly to the gallery with a specific tag selected.

To set this up, goto the Advanced tab under your gallery settings, and enable the “State” setting:

State setting under Advanced tab

Save your gallery and visit the page with that gallery to see the state setting in action. Click on a tag above the gallery and you will notice that the URL of the page changes. This special URL will “remember” the state of the gallery, which means that if you share that URL, the visitor will visit the page and the gallery state will be the same.

If you visit our Paging and Filtering demo and click on the tags above the gallery you will see this in action:

Link to gallery filters

In the above screenshot you can see that we have clicked on the “Colors” tag, and the URL now has #foogallery-gallery-1009/f:Colors/p:1 appended. This is called the state hash.

You can manually build up this URL state hash, if you wanted to link to the specific tag from your menu, for example.

The state hash is made up of 3 parts:

  1. The gallery identifier : #foogallery-gallery-1009
  2. The filter that is selected : /f:Colors
  3. The page that is active : /p:1

The gallery identifier is just “foogallery-gallery-{gallery ID}” and you can determine the ID of your gallery in the admin when editing your specific gallery:

Gallery Filter URL

This gallery identifier tells FooGallery which gallery we are wanting to set the state, as there may be more than 1 gallery on the page.

The filter is simply the filter that you want selected. Please note that if your tags have spaces in them, then you will need to substitute the spaces for “%20” which is the way your browser encodes spaces in the URL. For example, a tag called “very dark” will need to be converted to “/f:very%20dark”

The page is simply the page number that is currently active, and is only valid if you have paging enabled for the gallery.

Final Example of building up a state hash URL:

  1. We will use the same gallery on the page
  2. We want to select the “Nature” filter
  3. We want to load all the pages

The resulting URL is the following: https://foo.gallery/demos/paging-load-more-filtering/#foogallery-gallery-1009/f:Nature/p:2