Skip to content. | Skip to navigation

Personal tools
Log in
Sections
PSU » ITS » TLT »
WebLion Home » Services » Documentation » Products » Add Image Displays and Slideshows to Your Site With Products.BlingPortlet

Add Image Displays and Slideshows to Your Site With Products.BlingPortlet

A simple portlet with a lot of Bling!

Seems like every website has to have a gallery of changing photos or a slideshow, right? This product makes it easy to create and customize this kind of website bling.

With Products.BlingPortlet, you can set up two types of portlets:

  • A Bling Portlet retrieves a single image per page load.
  • A Bling Slideshow Portlet references all images in a folder and displays them in a slideshow.

And yes, you can more than one on a single page. For maximum bling!

Installing

See instructions for installing Products.BlingPortlet at plone.org/products/blingportlet.

Setting Up a Bling Portlet

A Bling Portlet retrieves a single image per page load. This is a fine option when you don't need a full-blown slideshow.

1. Add a folder to your site for storing Bling Portlet images.
You can name the  folder whatever you want, but it makes sense to name it something like Bling Images 01 since you may have more than one Bling Portlet or Bling Slideshow Portlet on your site.

Publish the folder. As with most images folders, you may also want to exclude it from navigation.

2. Add your images to this folder.
Two Image content types are available for your Bling:

  • Image: This is the regular Image content type that you're used to working with in Plone. Use this if you want a collection of images that do not link to web pages.
  • Linkable Image: This has an additional Link field. Use this if you want the images in your Bling Portlet to link to URLs that you specify.

Depending on your page design and how portlets are styled, you may want to edit your images so that they are exactly the dimensions you want in the portlet.

3. Go to the page where you want your Bling Portlet to appear, and...

  1. Click Manage Portlets.
  2. Add a Bling Portlet.
  3. Give your portlet a Title. Or leave it blank if you don't want one to appear.
  4. Search for and select the Bling Folder in which you are storing your images.
  5. Indicate the image Scale you want to use (large, preview, mini, thumb, etc.). If you are using Plone 4 or have plone.app.imaging installed, @@imaging-controlpanel lists Plone's image sizes, and you can add more to accommodate your Bling Portlet needs.
  6. If you are using the Linkable Image content type, check the box next to Enable Links.
  7. Under Change, select how frequently you want a new image to appear on the web page.  Random means that images will change in a random pattern when the web page is reloaded.
  8. Save and Return to the page.

Setting Up a Bling Slideshow Portlet

A Bling Slideshow Portlet references all images in a folder and displays them in a slideshow.

1. Same as step 1, above.

2. Same as step 2, above, except...

  • The Title and Description will appear in the portlet along with the image.
  • You will need to give some thought to the length of the Description. More about this later.
  • If you use the Linkable Image, the linked text "Read more..." also will appear after the Description in the portlet.

3. Go to the page where you want your Bling Portlet to appear, and...

    1. Click Manage Portlets.
    2. Add a Bling Slideshow Portlet.
    3. Give your portlet a Title. Or leave it blank if you don't want one to appear.
    4. Search for and select the Bling Folder in which you are storing your images.
    5. Indicate the image Scale you want to use. At @@imaging-controlpanel on your site, you can see a list of Plone's image sizes. You can add more sizes at @@imaging-controlpanel to accommodate your Bling Portlet needs.
    6. If you are using the Linkable Image content type, check the box next to Enable Links.
    7. Under Interval, indicate the time in milliseconds that you want time to elapse between slides.
    8. Under Ordering, select whether you want the images to appear in a Random or Sequential order. Sequential will display the images in the order that they appear in the folder.
    9. Indicate whether you want the slideshow to Repeat. If you leave this box unchecked, the slideshow will end by displaying the last image in the cycle.
    10. Description Length Limit allows you to control the length (number of characters) of the Description that is displayed before an elipsis (...) appears. Unless you are linking to a page that begins with the full text of the Description, it's best not to write one that exceeds this limit. You may need to style your portlet to accommodate the Description's length if you prefer displaying a longer Description.
    11. Save and Return to the page.

    Sites Using this Product

      Comments (0)

      Need Help Now?

      Immediate assistance is available during Penn State work hours: