Displaying Content with Views

What are views? A view is simply a set of criteria and configurations to query, sort, and display content items in various ways. For example, you can use views to display listings in a standard list format, a photo slider, on a map with map markers, or display photos of locations in a masonry layout. Views are enabled for listings, categories, tags, locations, and reviews in Directories Pro.

Configuring the default view for listings

Listings shown on the directory index page and single taxonomy pages of your directory in the frontend are displayed by a single view setup for listings by default (hereafter "default view"). You can customize how and what listings are displayed on those pages by modifying the settings of the default view.

Follow the steps below to configure the default view.

  1. Login to your website if not yet logged in and go to the WordPress administration dashboard.

  2. Click Directories in the admin sidebar.

  3. Under the All Directories tab, click the gear icon in the row of the directory to edit.

  4. Under the Content Types tab, click the dropdown button in the Listing row and then click Manage Views.

    As can be seen above, there is already a view created for listings. Also notice the green check icon shown for the view in the Default column which indicates that the view is a default view.

  5. To configure the view, click the gear icon in the row of the view.

    • General Settings

      • View label - Label of the view used for administration purpose only.

      • View name - Unique name assigned to the view so that it can easily be referenced. Only lowercase alphanumeric characters and underscores are allowed.

      • View mode - Mode (or format) used to display content items with the view. By default there are 3 view modes available for listings; List, Masonry, and Photo Slider view modes.

        The following are sample outputs of listings for each view mode.

    • View Mode Settings - Shows settings specific to the view mode selected under General Settings.

      • Settings specific to List view mode:

        • Enable grid layout - Whether or not to enable displaying items in grid layout.

        • Disable row layout - Whether or not to disable displaying items in row layout.

        • Set grid layout as default - Whether or not to display items in grid layout by default.

        • Grid layout gutter width - Width of gutters between items in grid layout.

        • Grid layout columns - Select the number of columns shown in Grid layout.

      • Settings specific to Masonry view mode:

        • Number of columns - Select the number of columns shown in masonry layout.
      • Settings specific to List/Masonry/Map view mode:

        • Show map - Whether or not to display a small map along with the list of listings.

        • Map coordinates field - Field that provides lat/lng coordinates to show on map.

        • Map position - Select where to display the small map, above or next to the list of listings.

        • Map width - Specify the horizontal display ratio of the map, 12 being 100% wide.

        • Map height - Height of the map in pixels.

        • Map marker icon - Select what to show as an icon inside map markers.

        • Scroll to item on marker click - Whether or not to scroll the screen to the position where the listing is displayed in the list when a marker on the map is clicked.

        • Enable sticky map - Whether or not to make the map stick to the top of the viewport when scrolling up and down the list.

        • Enable full screen mode - Whether or not to allow viewing the list and the map in full screen. When enabled, a button will be displayed on the map to toggle full screen mode.

        • Full screen map width - Specify the horizontal display ratio of the map on the page when in full screen mode, where 12 being 100% wide.

        • Enable map infobox - Whether or not to display a small popup window (infobox) over the map containing listing information when a marker is clicked on the map.

        • Map infobox width - Specify the width of the map infobox in pixels.

        • Open infobox on item hover - Whether or not to show the map infobox when hovering over listings in the list.

        • Customize format of address on infobox - Whether or not to specify a custom format for the address shown in the map infobox.

      • Settings specific to Photo slider view mode:

        • Image field - Select the field used to display a photo image for each content item in the slider.

        • Image size - Select the size of photo images in the slider.

        • Number of columns - Select the number of columns to display in each slide.

        • Show slide indicators - Whether or not to show small dot slide indicators.

        • Show prev/next arrows - Whether or not to show prev/next navigation arrows.

        • Show photo captions - Whether or not to show a caption text for each photo.

        • Autoplay slides - Whether or not to automatically play the slides when the slider is loaded.

        • Autoplay speed in milliseconds - Specify the slider autoplay speed in milliseconds.

        • Enable centered view - Whether or not to enable centered view with partial prev/next slides.

        • Fade in/out slides - Whether or not to use fade in/out effect instead of sliding.

        • Slider height - Set the height of the slider in pixels.

        • Photo padding - Set the length of horizontal padding applied to each photo in pixels.

        • Show thumbnails - Whether or not to show a thumbnail navigation.

        • Number of thumbnail columns - Select the number of thumbnail columns to display in the thumbnail navigation.

      • Settings commonly available with every view mode (except for some that may not exist for certain view modes):

        • SORT SETTINGS

          • Sort options - Select sorting options that should be available in the Sort by dropdown displayed above content items. You can change the display order of the options by dragging them up and down. You can also unselect all options to disable the Sort By dropdown.

          • Default sort order - Select the sort option that should be applied by default. Make sure to select one from the ones enabled for Sort options, otherwise the first sort option available will be used as the default.

          • Show featured items first - Whether or not to display featured items above those non-featured.

        • PAGINATION SETTINGS

          • Disable pagination - Whether or not to completely disable pagination.

          • Items per page - Set the number of items to show per page.

          • Allow selection of number of items per page - Whether or not to let viewers select the number of items shown per page.

          • Allowed number of items per page - Select the number of items per page options available for the viewers to choose from.

        • QUERY SETTINGS

          • Query by field - By default, the view will display all public (and private if allowed in permission settings) listings. If you wish to display a certain type of listings only, e.g. featured listings, listings that belong to certain categories, listings with a certain custom field value, you can do so by adding custom query criteria using this setting.

            Select a field from the dropdown and then enter a value into the next text box specific to the selected field. Click inside the text box to display a tip on what value you can enter for the field. You can add as many field criteria as you like by pressing the Add More button.

          • Max number of items to query (0 = unlimited) - Specify the maximum number of items to query from the database. Enter 0 to fetch all that match the query.

        • FILTER SETTINGS

          • Show filter form - Whether or not to display a filter form. For more details on filters, see Adding and Managing Filters.

          • Show filter form in modal window - Whether or not to display a filter form in a modal popup window instead of displaying the form above content items.

        • OTHER SETTINGS

          • Show number of items found - Whether or not to show the total number of content items found as well as the number of items currently displayed on the page.

          • Show "Add Listing" button - Whether or not to show a button which links to the Add Listing page.

  6. Click Save Changes to save the view.

Adding a view

You can create additional views for each content type which can then be displayed using a shortcode.

Follow the steps below to add a new view for listings to your directory.

  1. Login to your website if not yet logged in and go to the WordPress administration dashboard.

  2. Click Directories in the admin sidebar.

  3. Under the All Directories tab, click the gear icon in the row of the directory to edit.

  4. Under the Content Types tab, click the dropdown button in the Listing row and then click Manage Views.

  5. Click the Add View green button.

  6. Configure the view. See the Configuring the default view for listings section above for details on each setting.

  7. Scroll down the page and press Save Changes.

You will be redirected back to the manage views page if the view is created successfully. You can then optionally set the view as the default view by clicking on the greyed out check icon under the Default column in the row of the view just created.

Note: There can only be one default view for each content type in your directory.

Adding a view for other content types

The steps for adding or configuring a view for other content types are exactly the same as above for listings. Simply go to the Manage Views page for each content type from the Content Types tab of your directory admin page and add or configure views from there.

Displaying a view with shortcode

Views can also be displayed using shortcodes. Copy the shortcode text displayed in the Shortcode column for each view and then paste the copied text to the content section of any WordPress post/page or use it in your theme template file with the do_shortcode() function.

You can optionally use the cache parameter to cache the content generated by the shortcode, for example:

[drts-directory-view directory="directory" cache="1"]

This lets the content generated by the shortcode to be cached for a day by default. If you need to increase or decrease the cache duration, you can instead pass a cache lifetime value in seconds using the cache parameter. For example, the code below tells the content to be cached for an hour (3600 seconds):

[drts-directory-view directory="directory" cache="3600"]

Deleting a view

To delete a view, click the button with a red cross icon in the row of the view that you wish to delete, and then click the Delete View button in the popup window.

Note: You can not delete a view that is currently set as the default view.

Examples

Here are some examples of views and instructions on how to configure them.

Recent Listings

Display 4 most recent listings:

  1. Go to Directories -> [Your Directory] -> Content Types -> Listing -> Manage Views.
  2. Click the Add View button.
  3. Enter Recent Listings for View label.
  4. Select List for View mode.
  5. Switch on Disable row layout.
  6. Under the Sort Settings tab, check Newest First and uncheck all others for Sort options.
  7. Select Newest first for Default sort order.
  8. Under the Query Settings tab, enter 4 for Max number of items to query (0 = unlimited).
  9. Click the Add View button at the bottom of the popup window.
  10. Copy the shortcode generated for the view and use it on any page.

Categories

Display all categories in grid layout grouped by top level categories:

  1. Go to Directories -> [Your Directory] -> Content Types -> Category -> Manage Views.
  2. Click the Add View button.
  3. Enter Categories for View label.
  4. Select List for View mode.
  5. Switch on Disable row layout.
  6. Select Medium width for Grid layout gutter width.
  7. Under the Sort Settings tab, check Title and uncheck all others for Sort options.
  8. Select Title for Default sort order.
  9. Under the Query Settings tab, select Parent Category - Parent Term and enter 0 in the text field for Query by field.
  10. Under the Pagination tab, switch on Disable pagination.
  11. Click the Add View button at the bottom of the popup window.
  12. Copy the shortcode generated for the view and use it on any page.

Display 12 random locations that have a photo and at least 3 listings:

  1. Go to Directories -> [Your Directory] -> Content Types -> Location -> Manage Views.
  2. Click the Add View button.
  3. Enter Popular Locations for View label.
  4. Select Masonry for View mode.
  5. Under the Sort Settings tab, check Random and uncheck all others for Sort options.
  6. Select Random for Default sort order.
  7. Click the Query Settings tab, scroll down to Query by field. Select Photo - Image and enter 1 in the text field. Click Add More, select Term content count - Term content count and enter 3 in the text field.
  8. Enter 12 for Max number of items to query (0 = unlimited).
  9. Under the Pagination tab, switch on Disable pagination.
  10. Click the Add View button at the bottom of the popup window.
  11. Copy the shortcode generated for the view and use it on any page.

Display maximum of 12 random featured listings in a photo slider:

  1. Go to Directories -> [Your Directory] -> Content Types -> Listing -> Manage Views.
  2. Click the Add View button.
  3. Enter Featured Listings for View label.
  4. Select Photo slider for View mode.
  5. Select Photos (Image) for Image field.
  6. Select Thumbnail for Image size.
  7. Select 5 for Number of columns.
  8. Switch on Enable centered view.
  9. Switch on Disable row layout.
  10. Enter 135 for Slider height.
  11. Enter 5 for Photo padding.
  12. Under the Sort Settings tab, check Random and uncheck all others for Sort options.
  13. Select Random for Default sort order.
  14. Under the Query Settings tab, select Featured Content - Featured Content and enter 1 in the text field for Query by field.
  15. Under the Query Settings tab, enter 12 for Max number of items to query (0 = unlimited).
  16. Click the Add View button at the bottom of the popup window.
  17. Copy the shortcode generated for the view and use it on any page.

Recent Reviews

Display 6 most recent reviews in masonry layout:

  1. Go to Directories -> [Your Directory] -> Content Types -> Review -> Manage Views.
  2. Click the Add View button.
  3. Enter Recent Reviews for View label.
  4. Select Masonry for View mode.
  5. Under the Sort Settings tab, check Newest First and uncheck all others for Sort options.
  6. Select Newest first for Default sort order.
  7. Under the Query Settings tab, enter 6 for Max number of items to query (0 = unlimited).
  8. Under the Pagination tab, switch on Disable pagination.
  9. Click the Add View button at the bottom of the popup window.
  10. Copy the shortcode generated for the view and use it on any page.

Nearby Listings

Display maximum of 10 nearby listings within 20km (or 20mi) from the location of the currently viewed listing sorted by distance:

  1. Go to Directories -> [Your Directory] -> Content Types -> Listing -> Manage Views.
  2. Click the Add View button.
  3. Enter Nearby Listings for View label.
  4. Select List for View mode.
  5. Under the Sort Settings tab, check Distance and uncheck all others for Sort options.
  6. Select Distance for Default sort order.
  7. Under the Query Settings tab, select Location - Location and enter _current_,20 in the text field for Query by field.
  8. Click the Add more button, select ID - ID and enter -_current_ (do not forget to prefix with "-") in the text field.
  9. Under the Query Settings tab, enter 10 for Max number of items to query (0 = unlimited).
  10. Click the Add View button at the bottom of the popup window.
  11. Copy the shortcode generated for the view.
  12. Go to Directories -> [Your Directory] -> Content Types -> Listing -> Manage Displays.
  13. Click the Detailed sub-tab.
  14. Click the green + button at the bottom.
  15. In the popup window, click the Content tab and then click the Text element.
  16. Under the General tab, paste the shortcode copied in step 10 into the Text content textarea field.
  17. Under the Heading tab, select Custom label for Label and enter Nearby Listings into the Custom label setting field.
  18. Click the Add Element button at the bottom of the popup window.
  19. Press Save Changes at the bottom of the page.

results matching ""

    No results matching ""