Customizing HTML markup for Images in Kupu

As of Lenya 1.2.4, when adding images in Kupu, the class="image-left", class="image-right", or class="image-inline" attributes are removed after saving and/or exiting from Kupu. For those that wish to add the class attribute into the img tag back instead of using the default attributes, here's some steps for achieving just that.

For the below steps, I'll assume your location for Lenya's build files are $LENYA_HOME. If you list all the files in $LENYA_HOME, one of those directories would be the pubs directory. Another would be resources. Adapt this to your Jetty or Tomcat installation as needed.

Step 1: Editing kupusave.xsl

Go to $LENYA_HOME/resources/kupu/apache-lenya/lenya/ and edit the file kupusave.xsl with your favorite editor. In the file, you should see a chunk of XSL markup that starts like this:

<!-- this template converts the img tag to object
  for more, see -->
<xsl:template match="xhtml:img">
     <xsl:attribute name="data">

Towards the bottom, you'll see a couple of <xsl:if> statements for the attributes @height and @width. Copy one of them as a template and replace it with @class. So your bottom section will look like this:

<xsl:if test="string(@height)">
  <xsl:attribute name="height">
    <xsl:value-of select="@height"/>
<xsl:if test="string(@width)">
  <xsl:attribute name="width">
    <xsl:value-of select="@width"/>
<xsl:if test="string(@class)">
  <xsl:attribute name="class">
    <xsl:value-of select="@class"/>

Save and exit out of the file.

Step 2: Editing content2edit.xsl

You'll see something similar in a file called content2edit.xsl, which is in the same directory as Step 1. Make the same change by adding in a check for the class attribute. Save and exit out of the file.

Step 3: Edit your pub's xhtml2xhtml.xsl

Lastly, you'll need to go into each publication you have and edit the file xslt/xhtml2xhtml.xsl. Take a look at the patch of XSL that starts like this:

<xsl:template name="object2img">
   <img border="0">
     <xsl:attribute name="src">
         <xsl:when test="not(starts-with(@data, '/'))">

First off, I like removing the border="0" attribute from the img tag above. I don't like the assumption that it needs to be there. I just like assigning a class to the image and assuming that the CSS will handle whether or not a border exists.

Secondly, just like you did with the above two points, add a new section for @class. You can copy one of the <xsl:if> statements from @height and @width as templates. Save and exit.

Step 4 (optional): Changing the assigned class names for images in Kupu

Now you're all set to have classes assigned to your image when you save out of Kupu (and presumably Bitflux). If you don't like the default class names that Kupu uses, then you can go into the files $LENYA_HOME/resources/kupu/common/kupubasetools.js and $LENYA_HOME/resources/kupu/common/kupudrawers/drawer.xsl and search for the default class names of "image-left", "image-right", and "image-inline" and replace them with whatever you choose. Be sure to add the classes you create in your CSS so that they float properly and have the appropriate styles.

More with images: making resizing work

One thing that people have noticed is that resizing is no longer working in the latest 1.2.4 version of Lenya. This is actually an easy fix as well. Going through steps 1-3 above, replacing @class with @style is the first step in the process. The next is to edit the file $LENYA_HOME/resources/kupu/common/kupucontentfilters.js.

Do a search for the line this.styleWhitelist. It's an array of values, one of them being float. You'll need to add the properties width and height to this list, because if you don't, then the style attribute disappears when saving. That line should now look like this:

this.styleWhitelist = new this.Set(['text-align', 'list-style-type', 'float', 'width', 'height']);

Save and exit out of the file. Since this is a Javascript file, you'll want to clear out your browser's cache before re-entering the Kupu editor, otherwise your browser may use a cached version of the file that doesn't have your edit in there. That's it!

HowToCustomizeImageMarkup (last edited 2009-09-20 23:27:23 by localhost)