Embedding an image in i18n messages text

[huber]

In the i18n reference and local text, we use following html code to embed an image: <img src="media:///helpBtnActionMenu.png">

Unfortunately, this does not seem to work in NG. How to embed an image within text in the i18n message editor for NG?

[mboegem]

Hi Robert,

there are a couple of options, but I think the 2 most straightforward are these:

Code: Select all

<img src="resources/fs/<SOLUTION_NAME>/helpBtnActionMenu.png">

the solution name can be your main solution, but it's better to use the solution name from the media library where this image is stored.

2nd solution includes 2 parts
css:

Code: Select all

.img-help-btn-action-menu {
   content: url("helpBtnActionMenu.png");
   width: 30px; /** optional */
    height: 30px; /** optional */
}

and the html:

Code: Select all

<img class="img-help-btn-action-menu">

for both options: if the image is stored in a subfolder within media, this should be included in the path
for the 2nd option: the image is a relative link to the image file, so if the less/css file is stored in a 'css' folder within the media library and the image in the root the url would be: url("../helpBtnActionMenu.png")

Hope this helps

[huber]

Hi Marc

Thanks a lot for your solutions. The first versions I got to work with adding a slash in front of resources, like

Code: Select all

<img src="/resources/fs/<SOLUTION_NAME>/helpBtnActionMenu.png">

The second solution I can't get to work (up to now), although we have a similar solution for selectors in the css file, like

Code: Select all

.btnHistoryForward {
   background-image: url('../btnHistoryForwardNG.png');
   background-repeat: no-repeat;
}

where we use the selector btnHistoryForward in the styleClass property on a form.

[mboegem]

Hi Robert,

the 2nd solution should also work.
It's a bit hard to troubleshoot without further context, but there must be something wrong.

So either the reference to media-url from css is not correct (I see you are using ../img.jpg, which means the image is stored in the parent folder of the folder that contains your css/less file)

If the reference is correct however, the style class might be applied incorrectly.
Sometimes it's not just enough to create a class and use that in a property.
Due to the nested DOM structure you could apply the class to the parent of a particular structure, however css of a particular component can contain more specific selectors, which will override your class.
In that case you need to find the more specific selector and redefine your class so it will contain that selector path.

All of this makes perfect sense when you use the browser inspector and have a look at the DOM element that you would expect to have your styleclass applied.
It might be that the class is applied to one of the parents in the DOM structure. (so it is basically missing where you'd expect it)
In case it is applied it could be overridden by a more specific selector, so you'll find the properties in your class to be visualised as 'strikethrough' meaning their overridden (Chrome is very clear on this)

Hope this makes sense.

[huber]

Hi Marc

Thanks for your detailed explanations, they help a lot. There are some more classes in the inspector, but I haven't found the correct selector yet to make it work. Will analyse further. In my case it seems to be something like

Code: Select all

.tinymce .mce-content-body .mce-content-readonly .helpBtnEyeClosed

[mboegem]

Hi Robert,

this does clarify why solution 1 works and solution 2 doesn't.

TinyMCE is running within its own iframe, therefor the body can not use the css/less file you have created in Servoy. (solution 2)
However you are able to access an external URL (solution 1).

If you want to style the body content of the editor, you can do so by loading a configuration on the tinymce editor like:

Code: Select all

var _oConfig= {
      content_style:"body { font-family: 'Arial', sans-serif; font-size:14px;}"
}
elements.myTinyMCE.putClientProperty(APP_UI_PROPERTY.HTML_EDITOR_CONFIGURATION, JSON.stringify(_oConfig));


The above is just a generic style for the body element, but you can define more specific classes.
Solution 2 however, still won't work as the reference to media would be reference to an "external source"

Hope this makes sense.

[huber]

Hi Marc

Again thanks for your explanation and (generic) example. It makes perfectly sense to me.
In the meantime, I implemented some i18n texts with solution 1. For the moment it seems a sufficient and quite easy way to go, but I will look further into solution 2.