You are here: Home > PhotoSmash > PhotoSmash Tutorials > Extended Navigation

Extended Navigation

Extended Navigation for PhotoSmash Extend gives you the ability to create custom navigation for galleries.  It uses the powerful Custom Layouts feature of PhotoSmash to allow you to easily build your navigation.

Step-by-Step

  1. Goto PhotoSmash Layouts Editor and create a layout to represent the navigation interface. Create as many layouts as you need. (Here’s a tutorial on creating a custom layout: Create Custom Layouts)
    • Note: not all fields shown in the Layouts Editor will be useful (many of them are image related – the navigation is not)
    • You also need to have a Gallery Shortcode on your pages somewhere in order to display the results. Something like: [ photosmash gallery_type='tags' no_form=true] (no space before photosmash)
  2. Use a short code like this one for setting up the upload form:  [ psmash_nav layout=layout_name gallery_id='optional gallery ID'] (remove the space in front of the psmash)

Extended Navigation Layouts

Create your layouts in PhotoSmash’s Layout Editor.

Here’s an Example Layout for Search

Search for images:

Search for images: [nav_search] [submit]

Yep, that’s all there is to it.

Example Layout with 2 Dropdowns

In this example Custom Layout, users select tags from 2 different drop downs, and the resulting gallery requires that all images must have both of the tags

[tag_dropdown tags="Desserts, Main Course, Beverages" select_msg='- select -']
[tag_dropdown tags='French, Italian, American, Mexican'][tags_has_all]
[submit]

So, if the user selected ‘Desserts’ from the 1st drop-down and ‘Mexican’ from the second drop-down, you would only see images tagged with Mexican and Desserts…that’s because of the [tags_has_all] code. If you remove that, then you’ll see images with either tag.

Tags for Layouts

Tag Description
[tag_dropdown] Displays a drop down list of tags. Multiple drop downs can be used in the same navigation.

Attributes

  • tags – a comma separated list of tags to be used in the drop down. Use ‘post_tags’ to take the tags from the Post and use them in the drop down
  • select_msg – use this attribute to specify a blank item that for the first item in the drop down list…e.g. select_msg=’ – select – ‘ would render ‘ – select – ‘ as the first item. It has no value when the form is submitted.
[nav_search] Displays a text box for searching the Image Tags, Image Caption, Image URL, Image Contributor, and Image Attribution
[nav_gallery] Similar to Gallery ID above, this will cause Ext Nav to only affect the results of the specified gallery. So, if you’ve got multiple galleries on a page, use this to say which one shows the results of the Navigation.
Attributes

  • id – the gallery id to affect the display for
[tags_has_all] Causes PhotoSmash to only display images that have all of the selected tags. Only has an impact when multiple tag selection fields are used (e.g. more than 1 drop down).
[submit] Dispalys a submit button for submitting the navigation form.

The Shortcode

Use the shortcode to place the navigation in your posts/pages. It needs to be used in conjunction with a regular photosmash gallery shortcode to display the selected images.

Example shortcode –

[ psmash_nav layout=tag_nav gallery_id=25] (no space before psmash…and the gallery_id is optional)

Attribute Description
layout The name of the custom layout that contains the markup for the navigation. Build layouts in the PhotoSmash Layout Editor.
gallery_id {Optional} The gallery ID that the navigation should affect. If you have more than one gallery on a page or post, they will all show the results of the navigation, unless you specify the Gallery ID. When the ID is specified, only the gallery with that ID will use the navigation cues.
no_form {Optional} Causes the navigation to render without the opening/closing form elements. Good if you’re supplying your own form elements to change the form’s action or method.