LiveData with custom Icon Theme - Empty img element

Help / Discuss
#1

Hi,

Whilst working through a v12 to v13 upgrade, I noticed that the LiveData table did not have sort icons or the “More Actions” menu icon. I have a custom Icon Theme which appears to be working for everything else but on the Live Data table, instead of the xwiki.iconset.render.html or xwiki.iconset.render.wiki (sorry, not sure which one is actually used in this scenario) content being injected, the result is just an empty <img> element.

I.e.

<a title="More Actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" role="button" class="btn btn-default dropdown-toggle">
    <img>
</a>

I can see in the browser network trace that for all the working icons, the browser is going to a URL for each icon; whereas, for the live data table it looks like it’s using the REST API to search for the details for a given icon. The REST API is returning:

{"icons":[{"name":"list-bullets","iconSetType":"IMAGE","iconSetName":"AlexIcons","cssClass":null,"url":null}],"missingIcons":[]}

I could imagine that because of the null URL property, and the iconSetType being IMAGE that it might result in the empty <img> tag that I see in the HTML above but maybe that’s a bad guess.

In the XML for the Icon theme/set extension, the type property is set to font and there is a mapping for list-bullets. Also, the Icon theme has HTML in the xwiki.iconset.render.* properties so I guess I would expect to see that HTML in the livedata table, even if the URL was wrong/not-working instead of the <img> tag.

I have found this Jira Issue but nothing jumps out at me but I’ll go through it again just in case: [XWIKI-18605] Live Data macro doesn't use the configured Icon Theme - XWiki.org JIRA

I’ll try to do some digging in the REST API implementation that the livedata table uses but any advice/help would be welcomed.

Thanks in advance!

Cheers,
Alex

#2

After posting this it dawned on me that the Live Data UI is Vue based and thus would be rendered client side wouldn’t it? So I can see the need for the REST API for it to look up the icons to use.

I’ve also reread the Icon Theme Application info/docs on the extension site and I now understand them better.

So I think my question/problem is, why is the Type not as per the icon theme XML and why are no URLs being returned?

This particular install is an upgrade from V12 to 13.10.3 and then 13.10.5 with work then done in the icon theme whilst on 13.10.5.

I’ll go through the code to see if I can find any clues.

#3

Hello @alewis001,

I could reproduce your issue. The reason is, the wiki.iconset.icon.url was introduced some time ago (see [XWIKI-15389] Improve the icon API for REST API usage - XWiki.org JIRA), but was not documented.

Let me know if adding a wiki.iconset.icon.url key to your icon theme configuration solves you issue.

I’ll update the documentation of Icon Theme Application (XWiki.org)

#4

That’s great, thank you @mleduc. Ill give that a try this afternoon as I’m afk this morning, and let you know how I get on.

Cheers

#5

I’ve added the xwiki.iconset.icon.url property and used $xwiki.getSkinFile("icons/alexicons/${icon}.svg") as the value. This did improve things as I’m now seeing URLs in response payloads from the REST API; however…

  • The URLs are pointing to:
    • <domain_and_context>/skins/alexskin/icons/alexicons/$%7Bicon%7D.svg instead of something like…
    • /<context>/resources/icons/alexicons/ellipsis-small.svg?cache-version=1634548359000#ellipsis-small
  • The $%7Bicon%7D has not been substituted for the actual icon file name.

My custom Icons are stored in /usr/local/tomcat/webapps/<context>/resources/icons/alexicons.

I’ll have a look at the xwiki code in the meantime but any ideas at to what might be happening?

Cheers

#6

For my tests, I have created a icon theme with the following content:

## General settings
xwiki.iconset.type = image
xwiki.iconset.render.wiki = image:path:$xwiki.getSkinFile("icons/silk/${icon}.png")
xwiki.iconset.render.html = <img src="$xwiki.getSkinFile("icons/silk/${icon}.png")" alt="Icon" />
xwiki.iconset.icon.url = $xwiki.getSkinFile("icons/silk/${icon}.png")
## xwiki.iconset.css = 
## xwiki.iconset.ssx = 
## xwiki.iconset.jsx = 

## Icons
list-bullets = text_list_bullets

When visiting a page with a Live Data, I can see the query http://localhost:8082/xwiki/rest/wikis/xwiki/iconThemes/icons?name=list-bullets with the response:

  "icons": [
    {
      "name": "list-bullets",
      "iconSetType": "IMAGE",
      "iconSetName": "test",
      "cssClass": null,
      "url": "http://localhost:8082/xwiki/resources/icons/silk/text_list_bullets.png?cache-version=1649949534785"
    }
  ],
  "missingIcons": []
}

And later a call to http://localhost:8082/xwiki/resources/icons/silk/text_list_bullets.png?cache-version=1649949534785

Does this match what you did? Also, may I ask for the xar export of your icon theme page?

#7

HI @mleduc, Before you had responded I tried renaming my icon theme and all references to it and for some reason that has done something such that the URLs in the responses from the REST API are now correct. So… I think the problem is solved for me now, at least so far :slight_smile:

Thanks again for your help @mleduc, very much appreciated.

As an aside, on https://extensions.xwiki.org/xwiki/bin/view/Extension/Icon%20Theme%20Application I don’t see the xwiki.iconset.icon.cssClass property documented and any guidance on how to use it. I did try setting it, and I did see the property set in the REST API responses but, I didn’t see that class used anywhere in the HTML. As I do need to apply some CSS to the images to help size and display them correctly, I’m using the custom.less file in my custom Skin but I am interested to know more about the cssClass if it’s one intended for use by everyone rather than maybe an “internal” one used by the xwiki team.

Cheers

#8

Thanks for pointing that out. I’ve updated Icon Theme Application (XWiki.org) with xwiki.iconset.icon.cssClass.
You can find an example of its use in the definition of the FontAwesome icon theme (FontAwesome.xml).

Note that you can also define something like xwiki.iconset.render.html = <img src="$xwiki.getSkinFile("path/${icon}.png")" alt="Icon" class="mytheme mytheme-${icon}" /> if you want make it easier to define css selectors over your icons.

#9

Thanks @mleduc, that’s all useful info to know.

Cheers