The #newslist pagelist template

The #newslist template allows to display a pagelist using Bootstrap Cards like the following:

Example of usage

Here is an example of usage of the #newslist template, that will produce a page that looks like the previous image (without the parallax background) :

(:div class="container":)
(:pagelist fmt=#newslist group=Demo name=DocStripedAll,Homepage1,Homepage2 sm="6" md="4" lg="3" xl="3" fmtdate="[=%H h %M=]" fit=cover imagecolwidth=2 cardblockcolwidth=10 fadeoutheight=20px fadeoutcolor=white cardblockheight=150px:)
(:divend:)

The div directive is present to put the news list in a Bootstrap container. The parameters for the newslist template are :

• sm , md , lg and xl : These parameters specify the width of the elements of the pagelist in terms of bootstrap columns. They are equivalent to setting the col-sm-{value} , col-md-{value} , col-lg-{value} and col-xs-{value} bootstrap classes to the elements.
• fmtdate : this parameter specifies the format of the date displayed in the pagelist elements, according to the format specified by PHP's strftime() function. It must be given between double quotes ( " ) and escaped with [= =].
• fit : This parameter specifies the object-fit CSS attribute of the image in the pagelist element.
• imagecolwidth : This parameter is optional. It specifies the width of the image in the pagelist element in terms of bootstrap columns. The default value is 2.
• cardblockcolwidth : This parameter is optional. It specifies the width of the cardblock (at right of the image) in the pagelist element in terms of bootstrap columns. The default value is 10.
• fadeoutheight : This parameter is optional. It specifies the height of the fadeout (as a CSS height) at the bottom of the card, if text overlaps from the card. As it is a CSS height, the unit can be different from px . The default value is 20px.
• fadeoutcolor : This parameter is optional. It specifies the color of the fadeout (as a CSS color) at the bottom of the card, if text overlaps from the card. As it is a CSS color, the unit can be different a color word (it can be hexadecimal for example). The default value is white .
• cardblockheight : This parameter is optional. It specifies the height of the pagelist element as a CSS height. If the value is not specified, no height is specified for the element, and the height will thus be adjusted to the content.

The NewsList items

Each item in the NewsList comes from a page. In order to specify the image, title and description of the elements, PageVariablesmust be defined:

• Title : This PageVar defines the title that will be displayed in the bootstrap card of the pagelist.
• Attached : This PageVar specifies the attached image that will be used as the image in the bootstrap card.
• ImageFit : Allows the page to override the fit parameter of the pagelist template. If this variable is not set, the value of the fit parameter of the pagelist will be used.
• Description : This PageVar defines the description that will be displayed in the bootstrap card of the pagelist.

Example

This code here :

 
(:Title: [=Titre page Docker=]:)
(:Attached: docker.png:)
(:ImageFit: contain:)
(:Description: [=Ceci est ma description=]:)
 Attach:docker.png

Gives the result below :