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
10/8/24, 6:31 AM How to get DokuWiki Up and Running?
10/8/24, 6:31 AM Favicon Installation
10/8/24, 6:31 AM Top menubar
10/8/24, 6:31 AM How to store your site in Git?
10/8/24, 6:31 AM How to get started with ComboStrap ?

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:

Site Starter Home Page Snapshot
How to get DokuWiki Up and Running?

Because ComboStrap is built on top of the Dokuwiki Engine, the first step is to have a DokuWiki app up...

Material Design Choose Icon
Favicon Installation

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

Undraw Stepping Up
Top menubar

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

Undraw Stepping Up
How to store your site in Git?

This page will show you how to store your site as combo site in a remote Git repository. We will...

Undraw Stepping Up
How to get started with ComboStrap ?

This page helps you to get started with ComboStrap



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