Indexes can be used to create dynamic lists of content that read from either your pages or your posts. These are commonly used for blog indexes, but they can also be used for other purposes such as a product catalogue, a list of staff profiles or any other listing that creates a list from your underlying pages or posts.
The video below walks through creating an index of projects for a site:
For this example following, we will walk through how to create a blog page. Once you have created your blog posts, you can then create your blog index.
Step 1. Create an index page
Click the 'Add new' button and create a new page for the blog index. Please note that you can have an index on any of your pages, it does not need to be a new page.
Step 2. Go to the index page and choose your layout options.
This is where you decide what your index page will look like. You can choose how many posts you would like in each section (1-3), what information you would like to include in your index and how you would like the layout of each bit of information (eg. Just an image and title).
To begin, go to the section settings in the drop-down box in the top right corner of the section.
Change the section type to ‘index’. From here, you can also choose how many posts you want in each section, how you want to order your posts (newest to oldest or visa versa). Once you have finalised your options, click Apply.
Step 4. Build out your index layout.
Below is the method used to create the blog index used at https://pixeltogether.com/blog.
Add your layers from the ‘add’ tab on the left of your canvas. Then navigate to the Settings tab and select "Dynamic" as the Content Type. From here there are two "Content Source Field" options for adding text fields. For single value text fields with a fixed height, individual fields can be linked such as these Date fields below:
For longer text sections with a dynamic length of content, the new (released Feb 2023) "Post Variables" feature is recommended. This allows multiple fields to be combined into a single text field, to be styled individually and for the height of the section matched to the height of the longest layer.
The following options are available within a "Post Variables" field:
- {Name}
- {Description}
- {Heading}
- {Author}
- {Body}
- {Date}
- {Tags}
Name and Description both read from the Page Name and Description under Page Settings. The {Tags} variable automatically creates links to all tags added to the page.
Step 5. Link each layer
For layers that need to be linked to the pages such as the blog posts, they can be linked to "Index Items". These can be added within the paragraph for Post Variables by selecting text, or for the whole layer in the case of images or buttons.
Do this for each layer that requires a link.
Step 6. Save and publish.
The content will be replaced with default text and will show the blog content when published. This section will then be replicated for each 1-3 blog posts.
Comments