Thumbnail page list using ListPages

By elishapetersonelishapeterson


The code below shows how to use the ListPages module to generate a list of "thumbnail" previews of pages. As currently configured, the thumbnail displays the page title, the first 200 characters (using %%preview%%), and the page tags.

(Warning: If the title or tags are longer than 2 lines, the content will "spill over" the thumbnail.)


[[module ListPages category="*" separate="true"]]
[[div style="float:left; width:200px; height:250px; border:1px solid gray; background:#eee; margin:10px 10px 0 0"]]
[[table style="width:100%;height:100%;table-layout:fixed;"]]
[[row style="height:40px"]][[cell style="background:#ccf;"]]
[[row style="height:160px"]][[cell style="font-size:80%; vertical-align:top"]]
[[div style="height:150px; overflow:hidden"]]
[[row style="height:40px"]][[cell style="font-size:80%; background:#ddf; color:blue"]]

In action

List of highest rated pages

Collapsible Text Block

Description This solutions will show you how to make nice collapsible text blocks. What for? See the examples, you should know. Code [[collapsible]] Some text to show/hide. [[/collapsible]] ...

collapse fold syntax text
Foldable List

Description Do you like a foldable list from My Account or Site Manager? Create your own! The trick is to embed the list within the foldable-list-container class div like below. Use your own links...

fold foldable list menu side-bar

Description This solution will show you how to create tabs. Code There are 2 control tags you will have to use: [[tabview]] and [[tab]]. [[tabview]] [[tab Lorem ipsum]] Lorem ipsum dolor sit amet......

layout tab tabs tabview
Layout With Tables

Description A nice way to add advanced layout control using the [[table]] tag. The example uses the style attribute for the whole table and particular cells to adjust layout. Code [[table style=...

cell col layout row table
Include Any Page

Description Here is a way to include ANY page within your Wiki page using an [[iframe]] element. The syntax for it is: [[iframe url-source attributes]] url-source does not include quotation marks...

embed iframe include page web
Google Gadgets

Description Google now offers tons of gadgets one can embed into web pages. The directory of gadgets is available at: Just find your gadget, click on Add...

embed gadget google homepage widget
Adding A Site Logo

Description This snippet lets you add a logo to the site by creating a custom CSS. Code Create logo, 90px high by (e.g.) 500px wide Upload logo to start page as file 'logo.jpg' Go to site manager...

Automatic Sitemap

Description It is quite important to have a nice and clean structure of the site. One of the best ways to do maintain such a structure is to use the parent page relation. This allows to: display...

parent sitemap structure

Thanks to tsangk for this great snippet: conditional-blocks

text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]

Other snippets posted by elishapeterson

Rate this solution

If you think this solution is useful — rate it up!

rating: +23+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License