Thumbnail page list using ListPages

By elishapetersonelishapeterson

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

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
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 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: http://www.google.com/ig/directory?synd=open Just find your gadget, click on Add...
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
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 style= float:right;...
layout sidebar

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: +19+x
Add a New Comment
listpagespagesthumbnail
page revision: 3, last edited: 16 Feb 2012 01:47
Edit Rate (+19) Tags Discuss (6) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License