Image loading in the editor from the server

[maxim.kovalev]

Hello,

At opening in Oxygen Author dita a file from the server on the client, images, a kind aren't displayed, the image lies on the server, and the editor probably searches for them by the client car.
How to explain to the editor, without changing structure dita a file, what the given images should be requested from the server, instead of on the client?

Thanks

[Radu]

Hi Maxim,

The Oxygen Author page uses CSS to render the XML in a visual manner.
The CSS associated to the XML file also describes the location where the image should be searched.
Usually the CSS has a selector like (the sample is for XHTML):

Code: Select all

img {

    display: inline;

    content: attr(src,url);

    width:attr(width, length);

    height:attr(height, length);

}

The "content" property's value instructs the Author page to show the referenced URL as an image, the "src" attribute being resolved relative to the location of the XML file.

But you can specify another path for the image location like:

Code: Select all

img {

   ...

    content: url("http://www.oxygenxml.com/images", attr(src));

    ...

}

This will instruct Oxygen to join the server remote location with the value of the "src" attribute and interpret this as an URL.

This is another thread about interesting things to do when resolving an image:

http://www.oxygenxml.com/forum/post1022 ... age#p10228

Regards,
Radu

[maxim.kovalev]

Thanks, Radu

The problem in that that a way to the image is set concerning opened dita a file (
Whether there is still a possibility as or to set to the editor a way for search of pictures during file loading in the editor? For example any output agent to whom I can specify as correctly to process the given ways otherwise.

Thanks

[maxim.kovalev]

The problem in that that a way to the image is set concerning opened dita a file (<image href="../../image.jpg")
Whether there is still a possibility as or to set to the editor a way for search of pictures during file loading in the editor? For example any output agent to whom I can specify as correctly to process the given ways otherwise.

Thanks

[Radu]

Hi,

I'm sorry but I do not quite understand what you mean.
Besides creating a CSS selector which points to the correct image location, the other alternative is to use a custom ro.sync.ecss.extensions.api.StylesFilter implementation which can be set in the Extensions tab in the Document Type Edit dialog.

Another approach using the fixed CSS selector is to define it something like:

Code: Select all

img {

   ...

    content: url("myCustomProtocol://server/images", attr(src));

    ...

}

Then in the Author Component register this additional "myCustomProtocol" URLHandler which when called to open an input stream can search for the image in some place else and return an input stream to it.

I'm assuming you are customizing the Author Component for embedding it in a Web browser page.

Regards,
Radu

[maxim.kovalev]

Thanks Radu,
I have redefined StylesFilter and have connected it through extensions.

Code: Select all

public class DITAStylesFilter implements StylesFilter {

	

	public static String filePath = "";

	

	@Override

	public String getDescription () {

		return null;

	}

	

	private static final String IMAGE_TAG = "image";

	

	@Override

	public Styles filter (Styles styles, AuthorNode authorNode) {

		if (AuthorNode.NODE_TYPE_ELEMENT == authorNode.getType() && IMAGE_TAG.equals(authorNode.getName())) {

			try {

				styles.setProperty(

					Styles.KEY_PLACEHOLDER_CONTENT, new URL("http://localhost:8888/"));

			} catch (MalformedURLException e) {

				e.printStackTrace();

			}

		}

		

		return styles;

	}

	

}

Hi,

I'm sorry but I do not quite understand what you mean.
Besides creating a CSS selector which points to the correct image location, the other alternative is to use a custom ro.sync.ecss.extensions.api.StylesFilter implementation which can be set in the Extensions tab in the Document Type Edit dialog.

Another approach using the fixed CSS selector is to define it something like:

Code: Select all

img {

   ...

    content: url("myCustomProtocol://server/images", attr(src));

    ...

}

Then in the Author Component register this additional "myCustomProtocol" URLHandler which when called to open an input stream can search for the image in some place else and return an input stream to it.

I'm assuming you are customizing the Author Component for embedding it in a Web browser page.

Regards,
Radu

[maxim.kovalev]

But works nothing, I can not so I set parameters

[mihaela]

Hi Maxim,

See your answer here.

Regards,
Mihaela