Learn how to display directory data on your website using Grigora's powerful Directory Block. This guide will show you how to select your collection, loop through items, and customize how your directory appears on the page for creating visually appealing directories that automatically update as your collection grows.
Setting Up Your Directory Display
Go to your Grigora dashboard and click on "Site Editor" to open the website editing interface. You can choose where to display your directory - create a separate page for directory listings or add to your homepage for prominent display.
Adding the Directory Block
Click "Add Elements" in the left panel and search for "Directory Listing" in the search bar. Drag and drop the directory block into your editor where you want it to display.
Configuring Directory Settings
Right-click on the directory block to open settings and configuration options. Select your collection from the dropdown menu (like "Property Listing" or whichever collection you created). The block will now be connected to your chosen directory collection.
Click on dimension settings and set columns to three (or your preferred number) to create a grid layout where your directory items will display in organized rows and columns.
Creating Directory Item Layout
Click "Elements" and search for "Inner section" to drag the container into your directory block. This Inner section will hold the layout for each individual directory item.
Add an image block into your container and enable dynamic source. The system will automatically detect your directory collection and link the image dynamically to display different images for each item.
Add a text block and enable dynamic source. Select your directory collection from the source dropdown and choose the name field from directory field options. Style the text by changing it to H3 heading and adjusting font size.
Adding Additional Information
Add another text block for additional information like price, description, or other fields. Enable dynamic source and select the specific field you want to display to make your directory items more informative and visually appealing.
Styling and Making Items Clickable
Select the Inner Section holding your directory item elements and add borders to create a card-like appearance. Change border colors to match your brand and adjust spacing and padding for better visual hierarchy.
To make directory items clickable, select your Inner Section block, navigate to the links section, and toggle the dynamic source. Select your source directory and link field so each item card becomes clickable and takes users to a dedicated detail page.
Configure Directory Conditional Filters
Directory Conditional Filters allow you to control which items are displayed in a Directory Lsiting Loop by applying conditions to specific directory fields. You can add multiple filters and define the field, operator, and value to determine which items should be included in the loop.
Add a Filter
Click the + icon next to Filters to add a new conditional filter. A filter will be added to the list, which you can configure based on your requirements.
Edit a Filter
After adding a filter, click the pencil icon to modify it. In the Edit Filter panel, select the Field, choose an Operator, and enter the Value that should be used for filtering.
Available Filter Conditions
Equals: Displays items where the selected field exactly matches the specified value.
Contains: Displays items where the selected field contains the specified value anywhere in its content.
Starts With: Displays items where the selected field begins with the specified value.
Ends With: Displays items where the selected field ends with the specified value.
Is Set: Displays items where the selected field has a value or is not empty.
Is Not Set: Displays items where the selected field has no value or is empty.
Preview the Applied Filters
Before deleting a filter, click the Preview button next to Publish in the editor. The preview will show the CMS Loop with the configured filters applied, allowing you to verify that only the matching directory items are displayed.
Delete a Filter
If a filter is no longer required, click the trash icon next to the filter to remove it.
Publishing Your Directory
Click "Save and Publish" to make your directory live on your website. Your directory will display dynamic content that automatically updates as you add or modify items in your collection, providing visitors with an organized, professional way to browse and discover your directory content.