Blip Slideshow Reference

Shortcodes

Blip recognizes the following shortcodes:

  • [blip-slideshow] – the Blip Slideshow shortcode.
  • [blip_slideshow] – if you are still using WordPress 2.9 or earlier, you should use an underscore instead of a hypen for the Blip Slideshow shortcode.
  • [slideshow] – (deprecated) because of the potential for another plugin on your site to also define a conflicting [slideshow] shortcode, it is recommended you use
    instead.

Slideshow Options

Blip recognizes the following options in the [slideshow] shortcode:

  • captions – (boolean: default true) Whether to show captions.
  • center (0.2 and higher) – (boolean: default true) Whether the show should attempt to center images.
  • color (1.2 and higher) – (string: default “#FFF”) colours (separated by commas) to cycle through for the flash slideshow
  • controller – (boolean: default true) Whether to show controller.
  • delay – (integer: default 2000) The delay between slide changes in milliseconds (1000 = 1 second).
  • duration – (integer: default 750) The duration of the effect in milliseconds (1000 = 1 second).
  • fast – (boolean or integer: default false) Affects how the show behaves when the user is navigating via the controller or keyboard: if false/0 the show will always use transitions; if 1 the show will skip transitions if paused; if true/2 the show will skip all transitions and update the slide change instantly.
  • height – (integer) Optional height value for the show as a whole integer, if a height value is not given the height of the default image will be used. If you change the height of the default slideshow, you must use CSS to match the height of div.slideshow as well.
  • id – (string: default internally managed) Specify the <slideshow> element id here when you have two or more slideshows in the same page and wish to style each one individually. Remember, CSS dictates that element id’s must be unique per page!
  • link (0.2 and higher) – (boolean or string: default full) Determines what happens when a slideshow image is clicked:
    • full or true – Links each slide to the fullsize image, useful when mashing Slideshow with Slimbox, Lightbox, etc.
    • lightbox (0.3 and higher) – Links each slide to a WordPress Lightbox plugin. Requires Slimbox or WP-Slimbox2.
    • none or false – Disables hyperlinking altogether.
    • href – Links to the permalink given in the RSS, e.g. the original SmugMug or Flickr gallery.
    • link=http://www.someurl.com/ links to the specified URL
  • loader – (boolean: default true) Show the loader graphic for images being loaded.
  • loop – (boolean: default true) Should the show loop.
  • overlap – (boolean: default true) Whether images overlap in the basic show, or if the first image transitions out before the second transitions in.
  • pan (1.2 and higher) – (integers: default “100, 100″) controls the pan positioning for the Ken Burns slideshow
  • paused – (boolean: default false) Whether the show should start paused.
  • random – (boolean: default false) Random show, combined with thumbnails equals very cool!
  • resize (0.2 and higher) – (boolean or string: default “fill”) Whether the show should attempt to resize images, based on the shortest side (default) or longest side (“fit”) or resize without preserving proportions (“stretch”). Set to false to disable image resizing.
  • rss – (string: default is the internal slideshow) The media RSS feel URL to load. Currently supports SmugMug, Flickr and MobileMe feeds only.
  • slide – (integer: default 0) Slide from which to start the show.
  • thumbnails – (boolean: default false) Whether to show thumbnails.
  • titles – (boolean: default false) Whether to use captions for image and thumbnail title attributes.
  • transition (1.2 and higher) – (string: default “sine”) transition to use with base and push type shows
  • type (1.2 and higher) – (string: default “base”) the type of slideshow
    • flash – Flash (see the color option)
    • fold – Fold
    • kenburns – Ken Burns (see the pan and zoom options)
    • push – Push (see the transition option)
  • width – (integer) Optional width value for the show as a whole integer, if a width value is not given the width of the default image will be used. If you change the width of the default slideshow, you must use CSS to match the width of div.slideshow as well.
  • zoom (1.2 and higher) – (integers: default “50, 50″) controls the zoom positioning for the Ken Burns slideshow

Here is an example of the slideshow shortcode with all the options:

[slideshow captions=true center=true controller=true delay=2000 duration=750 fast=false height=300 id=myShow link=full loader=true loop=true overlap=true pan="100, 100" paused=false random=false resize=fill slide=0 thumbnails=true titles=false transition=sine type=base width=400 zoom="50, 50"]

36 thoughts on “Blip Slideshow Reference

  1. having a little trouble with the slideshow, it won’t center on the page, and i can’t set the width so that it shows the entire photo, it always cuts off a little at the right hand side… other than that, i’m very grateful for this plugin!!! thank you!! :)

  2. I am totally new to this so go easy on me. What I want to do is create a Gallery page with a slide-show from one of my smugmug albums. But I’m a bit stuck as to what code to use where. Thanks

      • Thanks Jason, This is what I had tried before I asked for help. I guess it would have been useful to let you know! lol

        [slideshow link=none thumbnails=false rss=http://nutter.smugmug.com/hack/feed.mg?Type=gallery&Data=2847649_nQmAU&format=rss200]

  3. Hi Jason,

    Wonderful plugin. I do have some feature requests:

    1. The kenburns effect is not really a slide transision. I am trying to have a slideshow where the slides transition is relatively short, but the kenburns effect should be rather slow. I’ve tried various combinations of delay and duration, but i’m not getting the effect. If I choose a long duration, the kenburns effect is slow, but it kind of overrides the delay.

    2. captions=topleft, topcenter, topright, bottomleft, bottomcenter,bottomright,false. These settings decide where to put the caption.

    3. caption font, color (maybe this already can be done with css?)

    4. caption background color and opacity

    5. border the image (or maybe even the whole slide show, including the thumbnails). Maybe this is already possible with css. Like a background color or something

    6. Rounded corners

    Again, maybe some of this is already possible, but not obvious enough (for me).

    Fred

    • Hi Fred. For the first issue, you’ll have to go straight to the top. Leave a comment in the official MooTools Slideshow Google Group and Aaron might consider your request. I only make Slideshow work in WordPress :)

      As for the rest, yes they can all be done in CSS. I’m not sure if this could be done programmatically, because everyone’s use of Slideshow is different. But if you make nice with a CSS developer they might help you out.

      This should get you started:

      .slideshow-captions {
      text-align:center;
      font-size:.8em;
      color:lightgreen;
      background-color:brown;
      opacity:0.25;
      bottom:340px;
      }
      .slideshow-images {
      border: solid 1px #300;
      }
      .slideshow-images img {
      -moz-border-radius-bottom-right: 20px;
      -moz-border-radius-bottom-left: 20px;
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
      }
      div.slideshow {
      border: solid 1px green;
      margin-bottom:80px;
      width:404px;
      height:360px;
      }
      div.slideshow-thumbnails {
      height:60px;
      bottom:0px;
      z-index:1;
      }

  4. What also would be nice (and then I will stop :-) ) is to delay the caption switch. Now, the caption of the new slide appears, while the slide is not even visible. The transition started, but the slide is not fully visible. That means you see the captions of the next slide with the previous slide for a while which is a bit confusing. Something like captiondelay=500 (ms).

  5. Jason:

    Thank you for the Blip Slideshow — I was finally able to get it working on my website, but I have a question about placement. I currently use the shortcode on my static front page of illgiveyousomethingtocryabout.com. My goal is to have the blog title at the top, then the slideshow, then the menu underneath. You can see that the menu is in the header and the slideshow is at the bottom of the page. Should I use the example you provided on the Theme Example page:

    slideshow(array(‘id’=>’myShow’)); ?>

    to manually insert the slideshow above the menu? I tried that in the header and it blanked out everything except the blog title.

    Thanks,
    – Jason

  6. Hi Jason,

    Thanks for your work. I’m new in WordPress and have some trouble with your plugin. Cannot install smugmug slideshow on a page neither mobile me gallery.

    [blip-slideshow link=none thumbnails=false rss=feed://pencastudios.smugmug.com/hack/feed.mg?Type=gallery&Data=15271460_EgbxE&format=rss200&Size=Small]

    [blip-slideshow captions=false link=lightbox thumbnails=false rss=http://photocast.me.com/jpvilain/100214/rss]

    I appreciate your help!

  7. What an awesome and “generic” plugin; well done!

    I’m trying to get it working (to my liking) on a new site where I need to integrate a few slideshows from a SmugMug Pro account. I’ve got it working with one exception. How do I tell blip which of the RSS-feed-images to use for each slide. I get a number of resolutions returned from SmugMug, but Blip insists on using the most lo-res one. I want to use, say, the medium or large version of the image in the slideshow.

  8. This would be a perfect plugin for a wordpress site I am currently doing! However, I couldn’t get the plugin itself to activate correctly. I installed it through FTP and then when I try to activate it on wp-admin, got this error message:
    —————————————————————-
    Plugin could not be activated because it triggered a fatal error.
    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /homepages/15/d365345162/htdocs/wp-content/plugins/blip-slideshow/blip.php on line 91
    —————————————————————-

    Any help or insights would be MUCH appreciated! Thanks!

  9. I’ve looked through the other troubles people have had getting the slideshow to work on their pages but I still can’t figure out why it won’t work for me. At this point I’ve just got the plain-old [blip-slideshow] tag in to see if it will work but it doesn’t. Any ideas? I’m running WP version 3.1.3 and don’t have any other plugins active. Thanks for any advice you can give.

  10. Great slideshow I use with Picasa in WordPress.
    Works perfectly but I get a string of warnings. How can I best suppress them:

    Warning: mkdir() [function.mkdir]: Permission denied in /home/www/f2009231c6963a840a9222daa70cea4d/web/general/wp-content/plugins/blip-slideshow/blip.php on line 609

    Warning: chmod() [function.chmod]: No such file or directory in /home/www/f2009231c6963a840a9222daa70cea4d/web/general/wp-content/plugins/blip-slideshow/blip.php on line 610

    Warning: touch() [function.touch]: Unable to create file /home/www/f2009231c6963a840a9222daa70cea4d/web/general/wp-content/plugins/blip-slideshow/cache/a5e74f814617cea12fea22c5150df89b because No such file or directory in /home/www/f2009231c6963a840a9222daa70cea4d/web/general/wp-content/plugins/blip-slideshow/blip.php on line 616

    Warning: chmod() [function.chmod]: No such file or directory in /home/www/f2009231c6963a840a9222daa70cea4d/web/general/wp-content/plugins/blip-slideshow/blip.php on line 617

  11. Hi – thanks for this plugin, it’s great. I’ve managed to configure it okay but was wondering if it was possible to link individual photos in a slideshow to different href urls? Looks as if a click on any of the slides goes to the same url or am I missing something?
    Cheers
    Andy

  12. Hi!

    I took a look at your wedding website and your pics are beautiful! I would like to use this plugin on my site but I am at a loss as to how to do that. I have built my theme using Headway and my pictures are currently hosted in Photobucket. How do I set up the rss feed from Photobucket? Is that what needs to be done?

    I don’t have alot (read that any) experience working with CSS but I am pretty darn good at following directions :-)

    Thanks and have a great day!

  13. Hi Jason,
    Wonderful plugin.
    How do I remove RSS cache? I have a picasa album that I’ve pruned, however, the images still appear in the slideshow, even though I’ve turned off cache in the blip plugin settings and the images are no longer in the RSS feed.
    Where are the images coming from?
    Thanks

  14. Hi Jason,
    Well, I’ve been successful with picasa albums but flickr file sets just won’t work. Nothing gets displayed.
    [blip-slideshow id=slideshow2 center=true link=none thumbnails=false delay=3000 rss=http://api.flickr.com/services/feeds/photoset.gne?set=72157627480369343&nsid=48144610@N04&lang=en-us]
    Any ideas?
    Thanks.

    • Ah. I’ve figured out the problem by looking at your examples.
      Flickr doesn’t natively add “&format=rss_200/” to the end of their feed URLs. adding it solves the problem.

      [blip-slideshow id=slideshow2 center=true link=none thumbnails=false delay=3000 rss=http://api.flickr.com/services/feeds/photoset.gne?set=72157627480369343&nsid=48144610@N04&lang=en-us&format=rss_200/]

  15. Hi Jason,

    When the thumbnails portion scrolls on hover to the right, is there a built-in stopping mechanism (JS) – or maybe some extra CSS defs needed? – to prevent an infinite scroll to the right? I.e. the scrolling should stop when the last thumbnail has been reached.

    Thanks.

  16. Hi,

    I am trying to use Blip slideshow and the slideshow is showing on our WP website. The problem I am having with is the width and height of the image as the images in the slideshow look quite stretched. The code I am using is:

    [blip-slideshow captions=false link=lightbox thumbnails=false rss=http://slanewengland.smugmug.com/hack/feed.mg?Type=nicknameRecentPhotos&Data=slanewengland&format=rss200]

    I have tried to read and implement your comments about resizing but none has worked so far. The following is what I see on my website dashboard:

    There are 4 CSS files in the Editor:

    Style.css
    Custom
    Slider
    Slideshow

    What code should I use to resize the image to thumbnail size and in which one of these stylesheets? Also, I do not see any blip css as mentioned in your site.

  17. Hi Jason,

    Wonderful plugin.
    I have installed plugin successfully. But the slideshow is not displaying on my page.
    I have put shortcode as you suggested. I am trying to get from Picasa album.
    Please help me!

    Thanks,
    Suresh

  18. I can’t get this to work at all. I wish there was just a simple button I could click so I don’t have to attempt to do this over and over again everytime I want to add a gallery.

    Please help me someone.

  19. You can remove the previous comment. I was able to fix it following your instructions for including a stylesheet.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>