Thumbnail page list using ListPages

Description

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.)

Code

[[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;"]]
**%%linked_title%%**
[[/cell]][[/row]]
[[row style="height:160px"]][[cell style="font-size:80%; vertical-align:top"]]
[[div style="height:150px; overflow:hidden"]]
%%preview%%
[[/div]]
[[/cell]][[/row]]
[[row style="height:40px"]][[cell style="font-size:80%; background:#ddf; color:blue"]]
%%tags%%
[[/cell]][[/row]]
[[/table]]
[[/div]]
[[/module]]

In action

List of highest rated pages

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 list menu side-bar

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…

collapse fold syntax text

Extra Side Bar

Description Creates an extra side-bar using the floating div element. It is quite easy if you know CSS. To use this feature, copy the code below into your wiki page. Code [[div…

layout sidebar

Google Gadgets

Description Google now offers tons of gadgets one can embed into web pages. The directory of gadgets is available at: http://www.google.com/ig/directory?synd=open Just find your gadget, click on…

embed gadget google homepage widget

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

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]] Where attributes can be: frameborder (0…

embed iframe include page web

Tabs

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…

layout tab tabs tabview

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…

no tags found for this page

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

Comments