Image loading in the editor from the server

maxim.kovalev
Posts: 35

Image loading in the editor from the server

Tue Nov 22, 2011 12:26 pm

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
Posts: 5224

Re: Image loading in the editor from the server

Tue Nov 22, 2011 12:42 pm

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/post10228.html?hilit=css%20image#p10228

Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
maxim.kovalev
Posts: 35

Re: Image loading in the editor from the server

Tue Nov 22, 2011 4:40 pm

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
Posts: 35

Re: Image loading in the editor from the server

Tue Nov 22, 2011 4:42 pm

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
Posts: 5224

Re: Image loading in the editor from the server

Tue Nov 22, 2011 5:08 pm

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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
maxim.kovalev
Posts: 35

Re: Image loading in the editor from the server

Fri Nov 25, 2011 12:45 pm

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;
   }
   
}


Radu wrote: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
Posts: 35

Re: Image loading in the editor from the server

Fri Nov 25, 2011 12:46 pm

But works nothing, I can not so I set parameters
mihaela
Posts: 174

Re: Image loading in the editor from the server

Fri Nov 25, 2011 3:21 pm

Hi Maxim,

See your answer here.

Regards,
Mihaela
Mihaela Calotescu
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 3 guests