The #newsgrid pagelist template

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

Example of usage

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

(:div class="container":)
(:pagelist fmt=#newsgrid group=Demo name=Homepage1,Homepage2,Homepage4,Homepage5,HomePage6,HomePage7 sm="4" md="4" lg="4" xl="4" fmtdate="[=%H h %M=]" fit=cover  fadeoutheight=20px fadeoutcolor=white fadeoutheight=20px cardblockheight=100px:)
(: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.
• imageheight : This parameter is optional. It specifies the height (as as CSS height) of the image in the pagelist element.
• cardblockheight : This parameter is optional. It specifies the height of the cardblock under the image (as a CSS height) in the pagelist element. If the value is not set, the height will adjust to the content of the card.
• 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 .

The NewsGrid 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, when included in the #newsgrid template defined above :