How to generate and layout a list of pages with a grid and their image?

Undraw Animating

About

This howto will show you how to:

  • select a list of pages
  • and lay out them in a grid.

Steps

Page Sql: How to select the pages

With page sql, you can select pages via a select statement.

Page Sql permits to query pages in a lot of fashion.

For this example, we will select the last 5 modified howto with the following sql.

select from pages where path like ':howto%' order by date_modified desc limit 5

This query returns for this website the following pages:

Date Page
4/15/24, 8:36 AM How to create a top menu bar?
4/15/24, 8:35 AM How to configure the Favicons
4/15/24, 8:35 AM Third Plugins - ComboStrap Getting Started
4/15/24, 8:34 AM How to install Combo ?
4/15/24, 8:34 AM How to install Dokuwiki ?

Fragment: The markup to generate

When you generate content, you are looping over the same content over and over. This content part in ComboStrap is called a fragment

<card width="250px" align="center" clickable>
   <page-image/>
   <heading 4>$title</heading>
   ${description | head(100,"...")} [[$path| ]]
</card>
  • The output for the actual page is:
Undraw Animating
How to generate and layout a list of pages with a grid and their image?

This howto shows you how to use the page sql, a fragment, the iterator and to generate a grid layout....

Iterator: Iterate over the fragment with the selected pages

The iterator is a component that

  • takes the page sql
  • and iterates over the fragment

The below example generate a grid that splits the horizontal space in 3 (max-line=3)

<iterator>
    <data>select from pages where path like ':howto%' order by date_modified desc limit 5</data>
    <grid max-line="3">
        <fragment>
            <box>
               <card width="250px" align="center" clickable>
                   <page-image/>
                   <heading 4>$title</heading>
                   ${description | head(100,"...")}
                   [[$path| ]]
               </card>    
            </box>
       </fragment>
    </grid>
</iterator>

The output is:

Undraw Stepping Up
How to create a top menu bar?

The theme system supports the creation of a slot page called header slot in order to create a menu bar...

Material Design Choose Icon
How to configure the Favicons

This page is an HowTo that shows you how to choose and install a favicon and your logo image with ComboStrap. You...

Move Plugin Rename
Third Plugins - ComboStrap Getting Started

This page is an optional and informative step that highlights important information that you should now...

Dokuwiki Admin Window Default Template
How to install Combo ?

Combo is the bundle of components that complements the strap template. This step shows you how to install...

Undraw Stepping Up
How to install Dokuwiki ?

Because ComboStrap is built on top of the Dokuwiki Engine, the first step is to install it. This page...



Note that in the fragment, we have wrapped the card in a box. Why ? Because:

  • the grid splits the horizontal space inside the box
  • and in this space, in this box, the card takes a maximum with of 200 px.

Conclusion

In this howto, you learned about:

That's all, folks.




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Undraw Animating
How can I generate a list of pages?

This howto shows you how you can generate a list of pages with the iterator components. page sql a list element with a link created from: the path and the title variables ...
Undraw Animating
How to generate a list of events?

This howto shows you how you can generate a list of pages event with the iterator components. page sql a list element with the date_start and date_end formated date of a page event...




Task Runner