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 http://www.xml.com/pub/a/2003/07/02/dive.html --> <xsl:template match="xhtml:img"> <object> <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:attribute> </xsl:if> <xsl:if test="string(@width)"> <xsl:attribute name="width"> <xsl:value-of select="@width"/> </xsl:attribute> </xsl:if> <xsl:if test="string(@class)"> <xsl:attribute name="class"> <xsl:value-of select="@class"/> </xsl:attribute> </xsl:if>
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:choose> <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!