Thumbnail page list using ListPages

By elishapeterson

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

By michal frackowiak 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

Foldable List

By michal frackowiak 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…

fold foldable list menu side-bar

Tabs

By michal frackowiak 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…

layout tab tabs tabview

Layout With Tables

By michal frackowiak 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…

cell col layout row table

Google Gadgets

By michal frackowiak 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…

embed gadget google homepage widget

Automatic Sitemap

By michal frackowiak 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….

parent sitemap structure

Include Any Page

By michal frackowiak 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…

embed iframe include page web

Extra Side Bar

By michal frackowiak 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…

layout sidebar

Rate this solution

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

Order of pages

Charles Sutton 1225792167|%e %b %Y, %H:%M %Z|agohover

How can I change order of the pages? I have letters as page titles a, b, c,…. How can I change order to alpha?

Re: Order of pages

Charles Sutton 1225796276|%e %b %Y, %H:%M %Z|agohover

Sorry, I found the answer.

Brunhilda 1225890607|%e %b %Y, %H:%M %Z|agohover

Is there a possibility to show a thumbnail picture instead of text preview?

---

The time you enjoy wasting is not wasted time.
Bertrand Russell

last edited on 1225891728|%e %b %Y, %H:%M %Z|agohover by Brunhilda + show more

Re:

elishapeterson 1229358008|%e %b %Y, %H:%M %Z|agohover

This is just pulling text from the page, so the same thing wouldn't work to generate images of the pages, if that's what you mean. There might be a plugin of some sort that could be used to accomplish the same thing (?)

Very nice solution!

WhiteKnight82 1241207892|%e %b %Y, %H:%M %Z|agohover

I'm going to implement this soon. Will post my results here soon.

Re: Very nice solution!

WhiteKnight82 1241211043|%e %b %Y, %H:%M %Z|agohover

Of course I wanted a 'perfect' result so I removed the tags row and tweaked the table until i got an exact fit for my preview thumbnails for a particular category. I also prefer to print the page title with a "read more.." link to the side. I think it looks more intuitive.

In action: (on my test page)
http://www.definitive-socionics.info/system:sandbox