Page last modified 12:28, 24 Nov 2009 by graynotgrey
You can use a DekiScript template to output a all pictures attached to a page.
First: let's create a template for our purposes; we are calling the template "ImageGallery".
Notice on this template I am passing in the page path as "page" and the number of images per row as "columns".
Next: Use the template.
{{ template.ImageGallery("User:SteveB/Gallery") }}
And see the output:
 |  |  |
 |  |  |
Variation showing image name (contributed by graynotgrey)
Here is a variation on the ImageGallery template that shows the name of the image and provides a link to it. No need to change the DekiScript statements in the HTML code, unless your images have long names. In that case, edit the HTML code and change the columns arg from 3 to 2.
if(index + column < #files) {
var myuri = uri.build(files[index + column].uri);
var equalsign = string.IndexOf(myuri, "=")+1;
web.image(uri.build(files[index + column].uri, _, {size: 'thumb'}));
web.html('<br/><span style="font-size: _fckstyle="font-size: smaller;">'..web.link(uri.build(files[index + column].uri), string.remove(uri.build(files[index + column].uri),0,equalsign),'/') )
}
Variation (contributed by Bryan Nelson)
Just paste the following code into a DekiScript section of a new template on your site.
/*
* ImageGallery Dekiscript Template
*
* by Bryan Nelson 16 May 2009
*
* {{ template.ImageGallery( path : uri ?, columns : number ?, sortkey : string ?, reversesort : bool ?) }}
* path : URI path to page with image attachements; Optional; Default = page.path
* columns: Number of columns for table, Optional; Default = 4
* sortkey: The parametor to sort by ("name", "description"), Optional; Default = None
* reversesort: Sort descending (true, false), Optional; Default = false
*
* This template inserts a table of thumbnails (with name and description) of all the
* images attached to a particular page.for the a page. If a page is not sepecified then the
* current page is used. If the number of columns are not specified then 3 is default.
*
* Work based on examples at
* http://developer.mindtouch.com/DekiScript/FAQ/How_do_I..._Embed_an_image_gallery%3f
* http://developer.mindtouch.com/DekiScript/FAQ/How_do_I..._Embed_image_depending_on_the_description%3f
*
* This template uses my preferred method of writing Dekiscript in the text editor and not
* the source editor to keep code formatting. Requires extensive use of web. commands.
*
*/
/* Get a map of all the files attached to the page */
var FileList = map.values(wiki.getpage($0 ?? $path ?? page.path).files ?? { });
/* Create a list of all the image files from the file map */
var ImageList = list.select(FileList, "string.startswith($.mime, 'image/')");
if(#ImageList)
{
/* Create a variable to hold a list of maps and sort the images by map key */
var ImageMapList;
var index = 0;
foreach(var Image in ImageList)
{
let ImageMapList = ImageMapList .. [ { index:(index), name:(Image.name), uri:(Image.uri), description:(Image.description) } ];
let index = index + 1;
}
var SortedImageMapList = list.sort(ImageMapList, ($2 ?? $sortkey ?? index), ($3 ?? $reversesort ?? false));
/* Build the table as a HTML String and write it to the page */
var HTMLString = "<table width='100%' cellspacing='0' cellpadding='3' border='0'><tr>";
var ColumnCounter = 0;
foreach(var SortedImage in SortedImageMapList)
{
let ColumnCounter = ColumnCounter + 1;
let HTMLString = HTMLString .. "<td align='center'><a href='" .. SortedImage.uri .. "' class='internal' rel='internal' target='_blank'><img class='internal' src='" .. SortedImage.uri .. "?size=thumb' alt='" .. SortedImage.name .. "' /></a><br /><p><em><span style='font-size: smaller;'>" .. SortedImage.description .."</span></em></p></td>";
if(ColumnCounter == ($1 ?? $columns ?? 4))
{
let HTMLString = HTMLString .. "</tr><tr>";
let ColumnCounter = 0;
}
}
let HTMLString = HTMLString .. "</tr></table>";
web.html(HTMLString);
}
else
{
web.html("You do not have any photo attachments to display in a gallery. Please upload some photos using the Attach File or Image button below");
}
Lightbox Variation
The following variation is similar to the one above, but adds the use of the Lightbox extension to improve previewing of images. It mimics the image gallery.
/*
* ImageGallery Dekiscript Template
*
* by Bryan Nelson 16 May 2009
* Lightbox added by Ed Gray 2 November 2009
*
* {{ template.ImageGallery( path : uri ?, columns : number ?, sortkey : string ?, reversesort : bool ?) }}
* path : URI path to page with image attachements; Optional; Default = page.path
* columns: Number of columns for table, Optional; Default = 4
* sortkey: The parametor to sort by ("name", "description"), Optional; Default = None
* reversesort: Sort descending (true, false), Optional; Default = false
*
* This template inserts a table of thumbnails (with name and description) of all the
* images attached to a particular page.for the a page. If a page is not sepecified then the
* current page is used. If the number of columns are not specified then 3 is default.
*
* Work based on examples at
* http://developer.mindtouch.com/DekiScript/FAQ/How_do_I..._Embed_an_image_gallery%3f
* http://developer.mindtouch.com/DekiScript/FAQ/How_do_I..._Embed_image_depending_on_the_description%3f
*
* This template uses my preferred method of writing Dekiscript in the text editor and not
* the source editor to keep code formatting. Requires extensive use of web. commands.
*
*/
/* Get a map of all the files attached to the page */
var FileList = map.values(wiki.getpage($0 ?? $path ?? page.path).files ?? { });
/* Create a list of all the image files from the file map */
var ImageList = list.select(FileList, "string.startswith($.mime, 'image/')");
if(#ImageList)
{
/* Create a variable to hold a list of maps and sort the images by map key */
var ImageMapList;
var index = 0;
foreach(var Image in ImageList)
{
let ImageMapList = ImageMapList .. [ { index:(index), name:(Image.name), uri:(Image.uri), description:(Image.description) } ];
let index = index + 1;
}
var SortedImageMapList = list.sort(ImageMapList, ($2 ?? $sortkey ?? index), ($3 ?? $reversesort ?? false));
/* Build the table as a HTML String and write it to the page */
var HTMLString = "<table width='100%' cellspacing='0' cellpadding='1' border='0'><tr>";
var ColumnCounter = 0;
foreach(var SortedImage in SortedImageMapList)
{
let ColumnCounter = ColumnCounter + 1;
let HTMLString = HTMLString .. "<td align='center'>" .. lightbox(SortedImage.uri,nil,SortedImage.description,SortedImage.name) .."<br><p><em><a href='" .. SortedImage.uri .. "' class='internal' rel='internal' target='_blank'><span style='font-size: smaller;'>" .. SortedImage.name .."</span></a></em></p></span></em></p></td>";
if(ColumnCounter == ($1 ?? $columns ?? 4))
{
let HTMLString = HTMLString .. "</tr><tr>";
let ColumnCounter = 0;
}
}
let HTMLString = HTMLString .. "</tr></table>";
web.html(HTMLString);
}
else
{
web.html("You do not have any photo attachments to display in a gallery. Please upload some photos using the Attach File or Image button below");
}
- Was this page helpful?
- Tag page
- What links here
| Images 0 | ||
|---|---|---|
| No images to display in the gallery. |
Copyright © 2011 MindTouch, Inc. Powered by
Stupid question, but how do I create a template like the ImageGallery one above? Everything it paste the code into the template as DekiScript, i get the following error after saving the template and when calling it:
/pre, line 1, column 1: EOF expected
I have no idea what's up and haven't had much luck with dekiscript. (the documentation around it is a bit weak to be honest!).
Cheers,
Eamon.
But having trouble figuring out how to pass in the number of columns to use. Any ideas?
Eamon
When I do code, I rely heavily on IDEs and if I need to drop into a text editor for some Linux scripting or something I tend to put a lot of formatting into the code and lots of comments (if you're not hardcore you need it to follow what's going on). I tried to do that in source in Deki but it strips out all my nice formatting - nearly causing me to give up trying! I can deal with not having an IDE, but losing code formatting is not acceptable for me. So my choice was to either abandon my attempts at DekiScript and get other software for our corporate ImageGallery, or find a way to make DekiScript work for me.
I'm pleased to say that I persevered and found this to work well. I personally find it infinitely more readable than mixed script/html in source. The end-users never see this code because it's locked into a template. All they need to do is put {{ template.ImageGallery() }} and they're done. It's very important that our end-users never go near source. Inserting a template is pretty much as far as we can get them to go regarding add-on features! I personally also seriously dislike mixing coding paradigms, which is why I prefer the approach I've used above of writing out web.html. It's kind of like a self-contained function in a template. I know it's not the most efficient, but it makes sense to me and our team here and is easy to maintain.
Thanks for a great product by the way, we've been using it extensively for 18 months now! edited 01:05, 28 May 2009
does this work on version 8.08?
Thanks.