Header image rotation with KSS¶

Use case: the customer has an image at the top of the webpage that has to be rotated every 10 seconds. I didn't want to do that with some downloaded javascript file, but with KSS. With some pointers from Huub Bouma in irc I managed to get it done in no time. Necessary prerequisite: enable kss all the time in portal_javascripts, also for anonymous users (by default it is off for anonymous).

The great thing about KSS' way of doing ajax is their core design decision to keep the business logic on the server side instead of burying it inside unreadable javascript. The server-side functionality is done in browser/imagerotator.py (in my case). Simple, readable, python:

  from random import choice
  from kss.core import kssaction
  from plone.app.kss.plonekssview import PloneKSSView
  ... # Some parts omitted for brevity.

  IMGTEMPLATE = '<img alt="" src="%s" />'

  class ImageRotatorView(PloneKSSView):
      """KSS server action to rotate the header image."""

      def availabel_image_urls(self):
          catalog = getToolByName(self.context, 'portal_catalog')
          # Nothing fancy, just grab all image urls inside a
          # specific folder.
          ...
          urls = [brain.getURL() for brain in brains]
          return urls

      @kssaction
      def rotate(self):
          # The actual KSS work.
          ksscore = self.getCommandSet('core')
          urls = self.availabel_image_urls()
          if not urls:
              return
          url = choice(urls)
          content = IMGTEMPLATE % url
          ksscore.replaceInnerHTML('#portal-top-picture', content)

The method rotate() does the actual server-side work by telling KSS to replace the contents of <div id="portal-top-picture"> with a new image tag. A snippet of zcml makes the method available as rotateImage (browser/configure.zcml):

    <!-- Image rotator kss action -->
    <browser:page
        for="*"
        class=".imagerotator.ImageRotatorView"
        attribute="rotate"
        name="rotateImage"
        permission="zope2.View"
        />
    <browser:resource
      name="rotate.kss"
      file="resources/rotate.kss"
      />

A tiny kss stylesheet takes care of calling this method every 10 seconds (=10000 ms). browser/resources/rotate.kss :

  /* Rotate image every 10 seconds*/

  document:timeout {
      evt-timeout-delay: 10000;
      action-server: rotateImage;
      }

Last step: enable the stylesheet (handy with genericsetup's profiles/default/kssregistry.xml):

  <?xml version="1.0"?>
  <object name="portal_kss" meta_type="KSS Registry">
    <kineticstylesheet
        cacheable="True" compression="safe" cookable="True"
        enabled="1" expression="" id="++resource++rotate.kss"/>
  </object>

Works like a charm!