Was this page helpful?

Embedding an image slideshow

    You can use a DekiScript template to automatically select all pictures from a page for a slideshow.

     

    First: let's create a template for our purposes; we are calling the template "ImageSlideshow".

    
            

    Notice on this template I am passing in the page path as "path" and optionally the width and height of the slideshow.

     

    Next: Use the template.

    {{ template.ImageSlideshow("User:SteveB/Gallery") }}

    And see the output:

    reference to undefined name 'image' Exception of type 'MindTouch.Deki.Script.Runtime.DekiScriptUndefinedNameException' was thrown. (click for details)

    Variation (contributed by Bryan Nelson)

    Just paste the following code into a DekiScript section of a new template on your site.

    /*
    * ImageSlideshow Dekiscript Template
    *
    * by Bryan Nelson 16 May 2009
    *
    * {{ template.ImageSlideshow( path : uri ?, width: number ?, height: number ?) }}
    * path : URI path to page with image attachements; Optional; Default = page.path
    * width: Image width, Optional; Default = 320
    * height: Image height, Optional; Default = 240
    *
    * 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/index.php?title=DekiScript/FAQ/How_do_I..._Embed_an_image_slideshow%3F&highlight=image+slideshow
    *
    * This template uses my preferred method of writing Dekiscript in the text editor and not
    * the source editor to keep code formatting.
    *
    */
    
    var pics = map.values(wiki.getpage($0 ?? $path ?? page.path).files ?? { });
    let pics = list.select(pics, "string.startswith($.mime, 'image/')");
    let pics = list.collect(pics, "uri");
    
    var webviewpics;
    foreach(var pic in pics)
    {
    	let webviewpics = webviewpics .. [ (pic .. "?size=webview") ];
    }
    
    if(#pics > 0)
    {
    	image.slideshow(webviewpics, $1 ?? $width ?? 320, $2 ?? $height ?? 240, 5, "slideright");
    }

     

    Was this page helpful?
    Tag page
    Viewing 10 of 10 comments: view all
    If you get: "reference to undefined name 'image'" make sure that the Imagemagick extension is running.
    From forums: http://forums.developer.mindtouch.com/showthread.php?p=24905
    Posted 12:04, 15 Mar 2009
    Any way to force it to use the thumbs for the slideshow. My images are large and take too long to render in the current form. I'm new to this and after trying to modify the code for a few hours I find I have to post.

    thanks
    Posted 19:36, 22 Apr 2009
    When collecting the image URIs, add ?size=thumbnail or ?size=webview to them and you'll get smaller images.
    Posted 06:35, 23 Apr 2009
    I'm a total newbie here and trying to figure out the syntax. I assume this is the line I need to mod:
    let pics = list.collect(pics,"URI");
    but when I try to add that text"
    let pics = list.collect(pics,"URI").."?size=webview";

    I get an error because it doesn't want to add str to type list.
    Could you elaborate on where to make the change? I've researched the list.collect function but still don't understand how to append the string to it.

    Thanks for replying!
    Posted 18:01, 24 Apr 2009
    alas I figured it out. simply changed : let pics = list.collect(pics,"URI"); to
    let pics = list.collect(pics,"webviewURI");
    Posted 18:34, 24 Apr 2009
    Found this tutorial very helpful too. Rewrote it a little or my template, all in the normal editor (no need to go into the source editor). Not the most elegant but it works well.

    {{

    /*
    * ImageSlideshow Dekiscript Template
    *
    * by Bryan Nelson 16 May 2009
    *
    * {{ template.ImageSlideshow( path : uri ?, width: number ?, height: number ?) }}
    * path : URI path to page with image attachements; Optional; Default = page.path
    * width: Image width, Optional; Default = 320
    * height: Image height, Optional; Default = 240
    *
    * 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/index.php?title=DekiScript/FAQ/How_do_I..._Embed_an_image_slideshow%3F&highlight=image+slideshow
    *
    * This template uses my preferred method of writing Dekiscript in the text editor and not
    * the source editor to keep code formatting.
    *
    */

    var pics = map.values(wiki.getpage($0 ?? $path ?? page.path).files ?? { });
    let pics = list.select(pics, "string.startswith($.mime, 'image/')");
    let pics = list.collect(pics, "uri");

    var webviewpics;
    foreach(var pic in pics)
    {
    let webviewpics = webviewpics .. [ (pic .. "?size=webview") ];
    }

    if(#pics > 0)
    {
    image.slideshow(webviewpics, $1 ?? $width ?? 320, $2 ?? $height ?? 240, 5, "slideright");
    }

    }}
    Posted 02:52, 27 May 2009
    @btnelson any reason you don't want to embed your code directly in the page? it would be easier to reuse and nicer to look at.
    Posted 17:10, 27 May 2009
    This is a really cool effect. Is there any way to have text wrap around the slideshow object? In your sample above, the text would be posted to the right of the images.
    Thanks.
    Posted 09:40, 25 Jun 2009
    Hi There,
    i like the Slideshow, but i am looking for a function to get the imagesize OR the width and height of a picture, so I could use it for correct aspect razio at the slideshow.
    Some of my Pics are not 3:4, some are 4:3.
    Do you know what I'm looking for?
    Posted 04:55, 26 Oct 2009
    OK, I found something useful:
    http://developer.mindtouch.com/DekiScript/Reference/Wiki_Functions_and_Variables
    ImageWidth int Width of the image, if the file is an image (9.02 or later)
    ImageHeight int Height of the image, if the file is an image (9.02 or later)
    But how do I use these information to patch the code above?
    Posted 05:21, 26 Oct 2009
    Viewing 10 of 10 comments: view all
    You must login to post a comment.

    Copyright © 2011 MindTouch, Inc. Powered by