Directories

Preselect items when the page loads either by using a URL or page properties

Filters are inclusive and will display any matches.

Filter by URL

Keep all the data in the directory available to see, but will prefilter upon page load. 

Add the option value pairs at the end of the URL with standard paramater syntax: ?option=value&option=value.

Filter by page

Use the filter/extra data section in the page properties. 
Use the syntax: option=value 1, value 2, value3; option=value; option=value. 

Comma separate values and semi colon separate option/value pairs. 

Partial text in the value will be seen as a match.  For instance both 'part' and 'depart" would match for 'department'.  

*These filters are not setup to work with URL variables

• col = collection name
• cat = categories
• tag = tags
• first = first name*
• last = last name*
• title = title*
• dept = department
• loc = location
• office = office*
• unit = unit
• role = role
• status = status
• pos = position
• life = lifespan
• med = medium
• sub = subject

Filter options allow the directory interface to be reduced so only the data will show.  If the page is focusing in on a smaller section this provides some easy ways to reduce clutter.  If the content is being filtered through a URL then it can be helpful to remove features that are not going to be needed for just that page.

These classes are used in the section css for the page where you are displaying the directory.

• no-filter
  removes the right side filter tools
• no-search
  removes the search box
• open-options
  this will force your filter tools to expand on page load

Starting in version 5.18 directory filter options have been updated to provide for very customized layout and even sorting within each filter.  Due to the level of complexity we have an additional page dedicated to understanding how to use these on the page so you can refine what data your users experience.

Directory Filter Options

These classes help you change the interface in a few different formats.  A directory is still a directory, but these styles will minimize or provide different approaches to how the data is displayed.  

•  directory-simple-profile
  • shows a item/user photo with basic information below the grid view
• directory-compact
  • slims down the overall display of items
• directory-catalog
  • used for more services than people.  Very slimmed down presentation and best for linking out to a landing page of data.  This works best when all images for items are sized to no more than 225 x 225
  • image-contain
    • If you have specific images that are formatted for your catalog then add this class which will keep the size of your images in mobile, otherwise they will default to cover which may stretch them.
• directory-item-image-full
  • forces the image for items to be 100% width on the background
• directory-item-image-round
  • makes the image into a circle with offset on the top/bottom
• directory-item-image-chamfer
  • makes the image into a app like button shape with soft rounded corners
• directory-badge
  • make users / items have their information displayed like a identification card
• directory-profile
  • make users / items have information displayed like a social media profile
• hide-additional-info
  • when looking at a full view for any info block item, this will hide the addition information section which includes preview image, description, subject, medium, and lifespan fields
• hide-full-direct-link
  • when looking at a full view for any info block item, this will hide the direct link that is at the bottom of the basic info panel

Item styles are classes that go into the CSS section per info block item.  These classes can help better control the display for each item without needing to affect each entry in your directory.

Bucket content

Within the item CSS to create buckets out of your titles.  When entering your data use the Accordion, Tabbed Content, Title style to separate one block from another

• bucket-content
• bucket-content-1
• bucket-content-2
• bucket-content-3
• bucket-content-4
• bucket-content-5
• bucket-content-6
• bucket-content-7
• bucket-content-8

Header image position

Requires directory-profile class be used and sets background position for profile image in full view mode.

• header-bg-top
• header-bg-top-left
• header-bg-top-right
• header-bg-center
• header-bg-center-left
• header-bg-center-right
• header-bg-bottom
• header-bg-bottom-left
• header-bg-bottom-right

Directory Profile

• profile-large

This will make the profile header larger.  You can add this at the item level to target specific entries.  To have all items larger, add class to the section where the info block is used.

Number of items per row, item width, and the item top/bottom spacing can be adjusted with these style classes.  Depending on screen size some settings will automatically be adjusted to best fit on user's device.

Columns per row can be controlled by adding one of the following classes to the section CSS where the directory displays.

• col-1
• col-2
• col-3
• col-4
• col-5

By default the top section is set to 325 pixels and the bottom section is set to 440 pixles.  Use any of the styles below to modify that size.

Item top part (image) can be adjusted.  Some alternative display styles may override these settings.

• headshot-thin
  height = 150px
• headshot-medium
  height = 250px
• headshot-thick
  height = 450px
• headshot-ultra
  height = 550px

Item bottom part (text area) can be adjusted.  These are a minimum size and items will grow automatically based on text used.  

• directory-thin
  height = 100px
• directory-medium
  height = 200px
• directory-thick
  height = 320px
• directory-ultra
  height = 560px