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

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

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!

Very nice solution!

sstern82 01 May 2009 19:58

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

Re: Very nice solution!

sstern82 01 May 2009 20:50

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

Brunhilda 05 Nov 2008 13:10

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

---

If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney

Last edited on 05 Nov 2008 13:28 by Brunhilda Show more

Re:

elishapeterson 15 Dec 2008 16:20

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 (?)

Order of pages

Charles Sutton 04 Nov 2008 09:49

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 04 Nov 2008 10:57

Sorry, I found the answer.