CSS Alternative Image

[patrick]

Hi,

is it possible to add an alternative text or image if an referenced image in author view is not available, instead of showing the error message "Cannot display image (hover for details)" + path?

XML: <graphic fileref="image.jpg"/>
CSS: graphic{content:url(oxy_base-uri(),attr(fileref))}

Regards,
Patrick

[Radu]

Hi Patrick,

Sorry, we do not have APi for such a customization.
Could you describe us the use case in more details?

Regards,
Radu

[patrick]

Hi Radu,

thanks for your interest in this problem.

We have the case that not all images are available on all stages, so if an user open the xml file without have access to the images, a big red warning message scares him.

Secondly there are many tif and eps images in some xml files. It is not necessary to display them but the user should not get an error message.

It would be nice to have a possibility to define an alternative style for images that are available and those are not (e.g. an alternative image or simply the source attribute content from the xml) - like the alt-Attibute in html.

A solution could be to create two stylesheets but then the user have to swich everytime manually the stylesheet from the dropdown and wait till the big xml is rendered again.

Regards,
Patrick

[Radu]

Hi Patrick,

There is a possibility to accomplish what you want using our Author SDK Java API:

http://www.oxygenxml.com/oxygen_sdk.htm ... horing_SDK

There is an entire chapter in our user guide devoted to customizing the Author page:

http://www.oxygenxml.com/doc/ug-editor/ ... intro.html

Basically you can set a ro.sync.ecss.extensions.api.StylesFilter implementation to the document type which you are using for editing the XML files.

The implementation code would be like this:

Code: Select all

      @Override

      public Styles filter(Styles styles, AuthorNode authorNode) {

        if("image".equals(authorNode.getName())) {

          //This is an image

          AttrValue hrefValue = ((AuthorElement)authorNode).getAttribute("href");

          if(hrefValue != null) {

            String href = hrefValue.getValue();

            if(href.endsWith(".eps")) {

              styles.setProperty(Styles.KEY_MIXED_CONTENT, new  StaticContent[] {new StringContent("EPS IMAGES ARE NOT SUPPORTED")});

              return styles;

            } else {

              try {

                URL imageURL = new URL(authorNode.getXMLBaseURL(), href);

                InputStream is = imageURL.openStream();

                is.close();

              } catch (MalformedURLException e) {

                e.printStackTrace();

              } catch (IOException e) {

                styles.setProperty(Styles.KEY_MIXED_CONTENT, new  StaticContent[] {new StringContent("IMAGE DOES NOT EXIST")});

                return styles;

              }

            }

          }

        }

        return null;

      }

if you want to follow this approach I can give you more details.

Regards,
Radu

[Radu]

Hi Patrick,

Sorry for coming back on this older post.
About this remark:

Secondly there are many tif and eps images in some xml files. It is not necessary to display them but the user should not get an error message.

TIFF images can be viewed in the Author page by installing an additional plugin in the Java Virtual Machine used to run Oxygen:

http://www.oxygenxml.com/doc/ug-oxygen/ ... ering.html

About EPS images, usually saved EPS images can also have a TIFF preview image embedded inside.
Oxygen 14 which will be released in a couple of months will try to extract from the EPS image the preview image and if it exists will display it in the Author page.

Regards,
Radu

[patrick]

Now I have tried the customization with your example within the Author SDK Java API - thats perfect - Thanks!

[patrick]

I want to have the possibility to activate and deactivate the image preview in Oxygen.

I have created an option image.display[on|off] - this works fine and I can toggle it, but how can I get its value in the StylesFilter?

[Radu]

Hi Patrick,

So you created a custom action for image.display[on|off] and added it to the toolbar, right?

The easiest way would probably be to set a System property (which can be read on the StylesFilter side) then call the API method:

ro.sync.exml.workspace.api.editor.page.author.WSAuthorEditorPageBase.refresh()

Another alternative using Oxygen 14.0:

In Oxygen 14.0 we added support for the following CSS selector:

Code: Select all

E[foo$="bar"] 	an E element whose "foo" attribute value ends exactly with the string "bar" 

so you could use the selector in the CSS to match ".eps" images.
Then you could try to create an alternate CSS stylesheet which hides ".eps" images using steps like:

http://www.oxygenxml.com/doc/ug-oxygen/ ... t-CSS.html

Then this alternate CSS will appear in the CSS drop-down in the Author toolbar and the user will be able to switch to it.

Regards,
Radu

[patrick]

I have sucessfull written the setting with authorAccess.getOptionsStorage().setOption("kis.images", value);

Can you give me a sample, how I can read this on styles filter side?

Thanks,
Patrick

[Radu]

Hi Patrick,

Unfortunately the StylesFilter does not have access to the AuthorAccess interface.
You have two options:

1) Use the java.lang.System.setProperty(String, String) method to set a system property on one side and then to read it on the other

2) In Oxygen 14.0 we introduced a static accessor which can be used to obtain the PluginWorkspace object:

ro.sync.exml.workspace.api.PluginWorkspaceProvider.getPluginWorkspace()

You can use this to gain access to the method:

ro.sync.exml.workspace.api.PluginWorkspace.getOptionsStorage()

and use it on both sides, in the custom actions and in the styles filter.

Regards,
Radu

[patrick]

Thanks, I have successful used the System.setProperty solution.

[Shail]

Can someone please explain me How can I add alternative text for an image added in any of the xml files. We have some images that needs the text to pop up when mouse arrove is hovered over in after converting to HTML.

I am using following in the oxygen Editor - Text mode for edition xml

<imagedata heightNumber="0.989in" widthNumber="2.1799in" fileref="....

Thanks
~S

[Radu]

Hi,

Your post does not quite connect to the initial discussion.

But here it goes:

You are using Docbook, right? Are you using Docbook 4 or Docbook 5?

Basically in order to have a tooltip when hovering over an image in HTML you would need to have a "title" attribute set on the HTML image reference like:

Code: Select all

<img src="path/to/image.png" title="tooltip description"/>

So your Docbook code should produce a similar HTML <img> element with the one above.
Unfortunately the Docbook stylesheets do not seem to output the @title attribute for the image.
The XSLT stylesheet which outputs the <img> element for Docbook to XHTML is this one:

OXYGEN_INSTALL_DIR/frameworks/docbook/xsl/xhtml/graphics.xsl

I think that what you could do would be to specify the description for the image like this:

Code: Select all

            <mediaobject>

                <textobject>

                    <phrase>Description of image</phrase>

                </textobject>

                <imageobject>

                    <imagedata fileref="images/lake.jpeg" scale="100" >

                    </imagedata>

                </imageobject>

            </mediaobject>

Then edit the XSLT specified above in Oxygen and at some point it has an xsl:if like:

Code: Select all

<xsl:if test="$alt != ''">

    <xsl:attribute name="alt">

      <xsl:value-of select="normalize-space($alt)"/>

    </xsl:attribute>

  </xsl:if>

just change it to output the @title attribute instead like:

Code: Select all

<xsl:if test="$alt != ''">

    <xsl:attribute name="title">

      <xsl:value-of select="normalize-space($alt)"/>

    </xsl:attribute>

  </xsl:if>

You should also search or write about this on the Docbook Users List, they might have more elegant solutions.

Regards,
Radu