Linking to Gallery Filters (Deep Linking)

FooGallery Documentation

Linking to Gallery Filters (Deep Linking)

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. This feature is available in FooGallery PRO Expert and PRO Commerce.

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

Deep linking in FooGallery

Save your gallery and visit the page with that gallery to see the deep linking 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.

You can see this in action with this link:

This will take you to our Filtering demo, where the Mushroom tag is selected. Here you should see only the images that have the Mushroom tag, as in the screenshot below.

Filtered gallery with specific tag selected

In the above screenshot you can see that we have clicked on the “Mushrooms” tag, and the URL now has #foogallery-177422/f:Mushrooms appended. This is called the state hash. It would work the same way if your were using paging, and wanted to link to a specific page of the gallery

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-177422
  2. The filter that is selected : /f:Mushrooms
  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: