Preview Modals are back, now with keyboard navigation.

A popular feature in Brandkit 1 was the Preview Modal that makes it easier to maintain your current position in Search, by loading a larger preview of an Asset in a modal rather than going directly to the Asset Page.

We’ve now brought this to Brandkit 2 as a configurable option - Admin only at this stage. It will be coming to front-end Portals soon.

Why a Preview Modal ?

When searching for Assets, you will often find yourself scrolling down through the results, maybe even looking at results a few pages deep with pagination.

However the search results grid has limited information about the Asset - so you will find your self clicking though to the Asset Page to see more.

That’s fine but when you go back to Search you end up back at the beginning of your Search Results. So you start your scroll all over again

To solve that the Asset Preview Modal superimposes a more detailed view of the Asset in a modal, maintaining your current scroll position in the background.

To turn on

This feature is currently in Beta. Please contact Brandkit Support if you wish to activate or turn this feature off. Later we’ll make this Admin configurable.

In Use

When searching (in Admin) just click on an Asset in the Search Results to launch the preview modal. This pops up over the top of the current page. You can close the modal at any time and you’ll be back where you started before the click, with scroll position and page preserved.

Asset Grid

When the feature in on in your account:

• Clicking on an Asset Thumbnail or Asset Name launches the Asset Preview modal (pop-up).
• A new icon/button appears in the Asset Grid which opens the Asset Page directly skipping the Preview Modal.

Asset Preview modal

When active the Asset Preview modal pops-up over the top of the current search results.

There are 4 buttons in the modal:

• Left - goes to previous Asset (in the current search result).
• Right -goes to next Asset (in the current search result).
• Add to Basket/Remove from Basket (toggles select).
• More details - goes to the Asset Page of the currently visible Asset.

Scroll left and right (New in 2)

You can now navigate to next and previous assets in the current search result with the left and right arrows. A great way to navigate.

Keyboard nav (New in 2)

Power users will love this. You can now use your keyboard to navigate

• Left arrow key - to go to the previous Asset in the search result
• Right arrow key - to go to the next Asset in the search result
• Spacebar key - to select or un-select the currently displayed Asset

That’s it.

Happy branding :)