Can't get web item icon to display

Bitbucket Development Bitbucket Server
1

Hello,

Try as I might I cannot get my plugin’s web-item in the sidebar of the Repository context to display the specified icon. I’ve scoured the developer community, stack overflow, the source code … nothing I try works.

My atlassian-plugin.xml looks like this

<?xml version="1.0" encoding="UTF-8"?>
<atlassian-plugin key="${atlassian.plugin.key}" name="${project.name}" plugins-version="2">

    <plugin-info>
        <description>My plugin</description>
        <version>${project.version}</version>
        <vendor name="${project.organization.name}" url="${project.organization.url}" />
        <param name="plugin-icon">images/logo-16.png</param>
    </plugin-info>

    <resource type="i18n" name="i18n" location="bitbucket-plugin"/>

    <web-resource
        key="bitbucket-plugin-resources"
        name="Web Resources"
        i18n="bitbucket-plugin-resources.name"
    >
        <dependency>com.atlassian.auiplugin:ajs</dependency>
        <resource type="soy" name="soyui" location="/templates/servlets.soy"/>
        <resource type="download" name="images/" location="/images"/>
        <context>bitbucket-plugin</context>
    </web-resource>

    <servlet
        key="plugin-servlet"
        name="Plugin Servlet"
        i18n-name-key="plugin-servlet.name"
        class="com.mycompany.servlet.PluginServlet"
    >
        <url-pattern>/myplugin/*</url-pattern>
    </servlet>

    <web-item
        key="repo-plugin-web-item"
        name="Repository Plugin Web Item"
        i18n-name-key="repo-plugin-web-item.name"
        section="bitbucket.web.repository.header.buttons"
        weight="1000"
    >
        <label key="repo-plugin-web-item.label">MyPlugin</label>
        <icon height="16" width="16">
            <link linkId="repo-plugin-web-item.icon">/download/resources/com.mycompany.bitbucket-plugin:bitbucket-plugin-resources/images/logo-16.png</link>
        </icon>
        <link linkId="repo-plugin-web-item.link">/plugins/servlet/myplugin/repo/$repository.id/</link>
    </web-item>

</atlassian-plugin>

I’ve tried any number of url permutations:

${baseUrl}/download/resources/com.mycompany.bitbucket-plugin:bitbucket-plugin-resources/images/logo-16.png

/download/resources/${atlassian.plugin.key}:bitbucket-plugin-resources/images/logo-16.png

/images/logo-16.png

Nothing works. I always get the aui-dialog close icon instead (no idea why - seems a strange default). However if I manually enter the full url (as shown in the atlassian-plugin.xml file above) into my browser, the icon is displayed! What gives?

Any ideas?

Many thanks in advance…

2

If it is displaying the aui-dialog close icon - there is the possibility of some name clash (ie it’s icon is also named logo-16?

I would try the /images/name.png method with a more unique name.

3

Thanks for the response but I don’t think that’s it. I simplified the xml somewhat for the post (removed some prefixes etc). The actual image name is unique. I should also mention that the aui-icon aui-icon-small aui-iconfont-close-dialog icon is displayed even if I completely remove the icon from my atlassian-plugin.xml file.

4

I tried the following too:

<link linkId="plugin-web-item.icon" absolute="true">
    $webResourceManager.getStaticPluginResource("${atlassian.plugin.key}:bitbucket-plugin-resources", "/images/logo-16.png")
</link>

nope :frowning:

5

Hi @a.webster,

To add an icon to the web-item on the navigation sidebar you will have to use this syntax:

    <web-item>
        <param name="iconClass" value="aui-icon-small aui-iconfont-world"/>
    </web-item>

The value provided to the iconClass param can be any CSS class name. In the example above, I’m using the AUI icons that you can find here: Icons - AUI Documentation

On the AUI page, if you click on the icon that you want to use, you will get a code snippet similar to this one:

<span class="aui-icon aui-icon-small aui-iconfont-world">
   Insert meaningful text here for accessibility
</span>

From the class attribute, you need to extract two values, e.g. aui-icon-small aui-iconfont-world and pass them to the web-items iconClass param.

If you wish to use a custom icon, then you will have to:

  • create a Less file inside your plugin project and add the new web-resource definition to the atlassian-plugin.xml file:

      <web-resource key="some-resource-key">
     <resource type="download" name="my-css-file.css" location="my-css-file.less" />
     <resource type="download" name="my-icon.png" location="my-icon.png">
     <context>bitbucket.layout.repository</context> <!-- we want to load those files or all repository pages -->

     <transformation extension="less">
         <transformer key="less-transformer" />
     </transformation>
 </web-resource>

  • create a custom CSS class e.g. my-plugin-icon-class and add it to the Less file:

    .my-plugin-icon-class {
   background-image: url('my-icon.png');
   /* Insert here any other CSS styles you need */
 }

  • Pass the class name param to your web-item:

     <web-item>
   <param name="iconClass" value="my-plugin-icon-class"/>
 </web-item>

Let me know if that works. Unfortunately, you stepped on the undocumented part of the plugin development for Bitbucket DC.

Thanks,
Maciej Adamczak
Atlassian Developer

1 Like
6

OMG finally! Thanks ever so much, you are a life-saver!

Anthony

edit - (ps. “finally” as in “finally it works”, not as in “finally someone answered”! I’m most appreciative of any help/experiences community members have graciously taken the time to offer)

1 Like