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 |
collapse fold syntax text |
Foldable List |
fold foldable list menu side-bar |
Tabs |
layout tab tabs tabview |
Layout With Tables |
cell col layout row table |
Include Any Page |
embed iframe include page web |
Google Gadgets |
embed gadget google homepage widget |
Automatic Sitemap |
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!
I'm going to implement this soon. Will post my results here soon.
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
Is there a possibility to show a thumbnail picture instead of text preview?
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
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 (?)
How can I change order of the pages? I have letters as page titles a, b, c,…. How can I change order to alpha?
Sorry, I found the answer.