Oxygen XML Forum • Show image in Authoring mode

Page 1 of 2

Show image in Authoring mode

Posted: Mon Apr 28, 2008 8:33 am

by rparree

Hi,

I have XML content like:
<image name="SomeSVG">
<caption>blah blah</caption>
</image>

How can my CSS (that renders the authoring layout) display the image in the name attribute?

I am trying something with background-image, but i then also need to add the base of the XML to the filename and concat with the name attribute.
Tx.,

Raphael

Re: Show image in Authoring mode

Posted: Mon Apr 28, 2008 10:21 am

by Dan

Hello Raphael,

Here it is a working sample.

The XML file - "test.xml":
-------------
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="test.css"?>
<test>
<image name="svg/animate-elem-04-t.svg">
<caption> Hello </caption>
</image>
</test>
-------------

The CSS file - "test.css":
-------------
test{
display:block;
}
image{
display:block;
content:attr(name, url);
}
caption{
display:block;
}
-------------
You can download the SVG file from: http://www.w3.org/Graphics/SVG/Test/200 ... m-04-t.svg

You must provide the attr function the type of the object to be returned: in our case "url". In this way the editor will try to create an image by analysing the content type of the url. The paths from the XML file do not have to be absolute. The attr function will solve the url relative to the XML base.

For more information, see the oXygen User Guide:
http://www.oxygenxml.com/doc/ug-oxygen/ ... ction.html

Best regards,
Dan

Re: Show image in Authoring mode

Posted: Mon Apr 28, 2008 10:41 am

by rparree

Dan,

Thanks for the reply...this helper greatly....but

How can i concat the string "images" to the attr (the images are in the "images" subdir under the xml' base URI.

tx.,

Raphael

Re: Show image in Authoring mode

Posted: Mon Apr 28, 2008 11:12 am

by Dan

Unfortunately, using oXygen 9.1 this is not possible.

The good news are that starting from the version 9.2 (that will be released at the beginning of May), there will be support for the recursive evaluating of functions.
In your case, the expression will be like:

Code: Select all


content:url(concat('../images' attr(name)));

The modified sample from the last post can be written as:

The XML file - "test.xml":
-------------
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="test.css"?>
<test>
<image name="animate-elem-04-t.svg">
<caption> Hello </caption>
</image>
</test>
-------------

The CSS file - "test.css":
-------------
test{
display:block;
}
image{
display:block;
content: url(concat("svg/", attr(name)));
}
caption{
display:block;
}
-------------

For the moment, the only thing you could do is either modify the XML file so that the name attributes would contain correct relative paths to the SVG files, or make a copy of the SVG files in the XML file directory.

Cheers,
Dan

Re: Show image in Authoring mode

Posted: Mon Apr 28, 2008 11:20 am

by rparree

Dan,

Thanks again for the quick response.

I can't change the XML nor can i copy the image files, this is a mandatory structure for our system. That leaves postponing this as an alternative. I will wait for the 9.2 release.

Again, tx!

Raphael

Re: Show image in Authoring mode

Posted: Mon Apr 28, 2008 11:45 am

by Dan

Hello Raphael,

I have just uploaded a new beta kit for the oXygen 9.2. If you want to try it, you can download it from:

http://www.oxygenxml.com/update/oxygen.tar.gz

After extracting it, you should use one of oxygen.sh or oxygen.bat to start it. I assume you have Java 1.5 or 1.6 installed on your computer. Please note that this distribution may be unstable.

Best regards,
Dan

Re: Show image in Authoring mode

Posted: Mon Apr 28, 2008 12:20 pm

by rparree

Dan,

Tx for the link(!!). I was just trying the concat. It seems the file is now relative to the CSS directory (i can see that in the "cannot display image" box)

tx.,

Raphael

Re: Show image in Authoring mode

Posted: Mon Apr 28, 2008 2:40 pm

by Dan

Hello Rapahel,

The url function is working correctly resolving relative references to the CSS. It might be used for loading images used as decorators. We solved the problem using another two functions:

document-url() - returns the URL of the document - in fact of the XML element the CSS rule applies.
parent-url() - returns the parent URL - eg: file:/a/b/c.xml -> file:/a/b/

So, you can use them like this:

Code: Select all


image{

    display:block;

    content:url(concat(parent-url(document-url()) "../images" attr(name)));

}

I have uploaded a new version of oXygen, at the same link as before:
http://www.oxygenxml.com/update/oxygen.tar.gz
If you have other problems do not hesitate to contact us.

Best regards,
Dan

Re: Show image in Authoring mode

Posted: Mon Jun 02, 2008 3:24 pm

by p.schmitz

Dan,

You mentioned above that we should should use the following code to resolve Raphaels question

Code: Select all

image{

    display:block;

    content:url(concat(parent-url(document-url()) "../images" attr(name)));

}

I created a small piece of XML to give it a try, attempting to show two images

Code: Select all

    <test>

        <image name="image1.png">

            <caption>image 1</caption>

        </image>

        <image name="image2.png">

            <caption>image 2</caption>

        </image>

    </test>

I was quite pleased with the image being displayed, however it appears that every time (throughout the entire XML document) the same picture is being displayed.

do you have any advice ?

Peter

Re: Show image in Authoring mode

Posted: Mon Jun 02, 2008 4:55 pm

by Dan

Indeed, there is a problem in the expression evaluation. The next version will fix it. For the moment, I propose the following workaround:

Code: Select all


image{

    display:block;

    content:url(

            concat(

                parent-url(document-url())  

                concat("../images/") 

                attr(name) ));

}

In this way the name attribute will be reevaluated for each of the "image" elements.

Best regards,
Dan

Re: Show image in Authoring mode

Posted: Wed Jun 18, 2008 2:07 pm

by rparree

Hi,

Is there a possibility to get the document base as apposed to the document-uri?

tx.,

Re: Show image in Authoring mode

Posted: Wed Jun 18, 2008 2:30 pm

by sorin_ristache

Hello,

The base URL of the XML document displayed in Author mode can be obtained in the CSS stylesheet with

Code: Select all

parent-url(document-url())

Is this what you wanted?

Regards,
Sorin

Re: Show image in Authoring mode

Posted: Wed Jun 18, 2008 3:41 pm

by rparree

Hi sorin,

No i am looking for the XML Base of the XML document being edited (same as in XPath 2.0 base-uri() but then now in CSS)

Re: Show image in Authoring mode

Posted: Wed Jun 18, 2008 5:44 pm

by sorin_ristache

Hello,

The function document-url() returns the base URL of the current node of the XML document. Of course this is the same as the URL of the document if you do not change the base URL of an XML element with an xml:base attribute added to that element. We should rename the function to base-url().

Regards,
Sorin

Re: Show image in Authoring mode

Posted: Wed Jun 18, 2008 5:53 pm

by rparree

Hi,

Our XML documents which bare an xml:base attribute (http://www.w3.org/TR/xmlbase/) don't seem to work correctly.

Are you sure the document-url() respects any xml:base values?

Re: Show image in Authoring mode

Posted: Wed Jun 18, 2008 6:37 pm

by sorin_ristache

I just tested in Oxygen 9.2 build number 2008050821 (that is the initial build of Oxygen 9.2) with an XML document which changes the base URL in some nodes with the xml:base attribute. So it works in all builds of Oxygen 9.2. When I use for these nodes

content: document-url();

the Author node displays the URL set by the xml:base attribute. If it does not work for you please post small samples of your XML and CSS files.

Regards,
Sorin

Re: Show image in Authoring mode

Posted: Thu Jun 19, 2008 10:16 am

by rparree

I have found the "problem" (if it is a problem)

My xsml:base is:

Code: Select all

xml:base="../../"

(where this document is in a subfolder head/sub, and the images are in head/images.
We use this base value successfully in our XSL documents.

When i set the base like:

Code: Select all

xml:base="../somedoc-in-headdir.xml"

it works.

Is my base value invalid, or is the CSS function not working correctly?

Re: Show image in Authoring mode

Posted: Thu Jun 19, 2008 10:57 am

by sorin_ristache

I think your base value is not correct. If the XML document is in a subfolder head/sub and the images are in head/images then the correct xml:base value is probably:

Code: Select all

xml:base="../images/"

but it depends also on the file paths used for accessing the image files. If you post a fragment of the XML file and a fragment of the CSS where the file images are used then we can find the error more quickly.

Regards,
Sorin

Re: Show image in Authoring mode

Posted: Thu Jun 19, 2008 1:32 pm

by rparree

The images are always resolved like

Code: Select all

content:url(

  concat(

    parent-url(document-url()) 

      concat("/images/")

      attr(name) ));

files are either head/somefile.xml or head/sub/somefile.xml
The xml:base on files in the head/sub/somefile.xml make sure the standard resolution of image URIs works.

In XSL we use the following XPath expression:

Code: Select all

resolve-uri(concat('images/',@name),base-uri())

The resolve-uri XPath function and our CSS solution are not identical that's the problem i guess. We need a function that resolves a relative URI based on another URI. If the URI points to a path, we don't need parent-url, when the URI points to a resource (somefile.xml) we need to use the parent-url.

Is there something like resolve-uri in your extension. Writing your own CSS function would be very helpful

tx.,

Re: Show image in Authoring mode

Posted: Thu Jun 19, 2008 3:03 pm

by sorin_ristache

rparree wrote:The xml:base on files in the head/sub/somefile.xml make sure the standard resolution of image URIs works.

In XSL we use the following XPath expression:
Code: Select all
resolve-uri(concat('images/',@name),base-uri())

In that case I think you need to remove the first '/' from "/images/":

Code: Select all

content:url(

  concat(

    parent-url(document-url()) 

      concat("images/")

      attr(name) ));

This is the same as

Code: Select all

resolve-uri(concat('images/',@name),base-uri())

because parent-url(document-url()) finds the parent folder from the base URL of the current XML node which is the same as the result of base-uri() applied to the current XML node. The result of the first concat from the CSS expression is the same as the result of resolve-uri() that you use in the XSLT stylesheet because the first parameter of the function is a relative path. Does it work with concat("images/") instead of concat("/images/")?

Regards,
Sorin

Re: Show image in Authoring mode

Posted: Thu Jun 19, 2008 3:32 pm

by rparree

Sorin,

I am sorry to say that it did not work. I believe it is all because i am not implementing the resolve-uri XPath function using the parent-url(document-url())combination.

When the base is "../../" (xml = library/book/chapters/chapter.xml) then the my relative URI resolves one directory to high. In this case the base is a path and therefore the document-url() would be sufficient. (It resolves to library/images/ where it should resolve to library/book/images)
When the base is library/book/book.xml then the parent-url is needed to resolve the images relative to somerootdir/somedir/images.

This is all done in XPath using the resolve-uri

(The idea is that sometimes "chapters" are in separate files and are xincluded into the book.xml; all images however are in chapter/images. So whether i am in library/book/chapters/chapter.xml or in library/book/book.xml the images should resolve, therefor we place the xml:base on the chapter.xml)

Re: Show image in Authoring mode

Posted: Thu Jun 19, 2008 4:25 pm

by sorin_ristache

rparree wrote:It resolves to library/images/ where it should resolve to library/book/images
...
So whether i am in library/book/chapters/chapter.xml or in library/book/book.xml the images should resolve, therefor we place the xml:base on the chapter.xml)

I understand that all images for library/book/book.xml and library/book/chapters/chapter.xml are located in library/book/images. In that case the xml:base attribute of chapter.xml should specify xml:base="../" instead of xml:base="../../".

With xml:base="../../" used in chapter.xml the result of concat(parent-url(document-url()) concat("images/") attr(name)) and resolve-uri(concat('images/',@name),base-uri()) is the same: library/images/imageFile.gif where I assumed that the name attribute is name="imageFile.gif". I do not understand how resolve-uri(concat('images/',@name),base-uri()) returns library/book/images/imageFile.gif. Can you post small sample files book.xml, chapter.xml, a sample XSLT stylesheet and a sample CSS stylesheet for reproducing the problem?

Regards,
Sorin

Re: Show image in Authoring mode

Posted: Mon Jun 23, 2008 1:37 pm

by rparree

Sorin,

Can i send or upload an example (this way you get the correct directory structure) I have also include some Java code that transforms the XML using SAXON and Xerces XInclude processing.

Re: Show image in Authoring mode

Posted: Mon Jun 23, 2008 3:17 pm

by Radu

Hi,

You can zip the sample files and send them to our techical support email.
http://www.oxygenxml.com/techSupport.html

Regards,
Radu

Re: Show image in Authoring mode

Posted: Mon Jun 23, 2008 3:44 pm

by rparree

I did upload the fila that way.
the Java code shows that a base of ../../ works for the XSL process.

Re: Show image in Authoring mode

Posted: Mon Jun 23, 2008 6:10 pm

by sorin_ristache

You sent only XML files and an XSLT stylesheet. Please send also a CSS file as I asked you that shows that the parent-url() and document-url() functions combined as we discussed in this forum topic do not locate the image file correctly because the base URL set with xml:base is not computed correctly.

Waiting for your CSS example,
Sorin

Re: Show image in Authoring mode

Posted: Mon Jun 23, 2008 6:34 pm

by rparree

Sorin.

I have updated the book.xml like

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/css"  href="../../../xsl/wysiwyg.css"?>

<book xmlns:xi="http://www.w3.org/2001/XInclude">

    <chapter id="inline">

        <image name="foo.gif"/>

    </chapter>

    <xi:include href="chapters/loose-chapter.xml"/>

</book>

the wysiwyg.css:

Code: Select all

image{

    display:block;

    content:url(

            concat(

                parent-url(document-url()) 

                concat("images/")

                attr(name) ));

                

                margin-top: 15px;

}

There are no images, but the "cannot display image" error shows where it is trying to find the image. As you can see the image URL in the included document is not the same. Changing the base to ../foo.xml or ../ does the trick but that breaks the XSL code.

Re: Show image in Authoring mode

Posted: Wed Jun 25, 2008 5:54 pm

by sorin_ristache

Thank you for the files. The CSS function document-url() does not return the correct path when an xml:base goes to a parent folder of the XML document whre it is used. It returns the parent folder of the correct folder. We will fix this bug in the next version of Oxygen / Author.

Regards,
Sorin

Re: Show image in Authoring mode

Posted: Wed Jun 25, 2008 6:32 pm

by rparree

Sorin,

Thanks for the update. Any clues on when this release will be, is there perhaps an intermediary patch available?

Tx.,

Re: Show image in Authoring mode

Posted: Thu Jun 26, 2008 9:52 am

by sorin_ristache

Version 9.3 will be released probably next week.

Regards,
Sorin