[Lenya Wiki] Update of "HowToCustomizeImageMarkup" by JonathanLinczak

[Apache Wiki <wi...@apache.org>]

Dear Wiki user,

You have subscribed to a wiki page or wiki category on "Lenya Wiki" for change notification.

The following page has been changed by JonathanLinczak:
http://wiki.apache.org/lenya/HowToCustomizeImageMarkup

New page:
= 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.

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@lenya.apache.org
For additional commands, e-mail: dev-help@lenya.apache.org