Show image in Authoring mode

[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

[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

[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

[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

[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

[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

[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

[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

[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

[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

[rparree]

Hi,

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

tx.,

[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

[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)

[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

[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?

[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

[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?

[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

[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.,

[sorin_ristache]

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

[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)

[sorin_ristache]

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

[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.

[Radu]

Hi,

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

Regards,
Radu

[rparree]

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

[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

[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.

[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

[rparree]

Sorin,

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

Tx.,

[sorin_ristache]

Version 9.3 will be released probably next week.


Regards,
Sorin