Adding screenshots but don't package them

Hi all! I’m updating my plugin, Psychart (Psychrometric Chart for Grafana). With it I am adding some screenshots. Here is a snippet from my configuration in plugin.json:

      {
        "name": "General use case: Psychart as a thermodynamic calculator.",
        "path": "img/screenshot_calc.png"
      },
      {
        "name": "Random data, for illustrative purposes on customizing the appearance.",
        "path": "img/screenshot_rand.png"
      }

The problem? I notice that when I build the plugin using yarn build, I get these following warnings:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  img/screenshot_calc.png (562 KiB)
  img/screenshot_rand.png (556 KiB)

From unpackaging my plugin, I see that it is including all the icons and screenshots in the .zip file. Packaging the icons is good, but packaging the screenshots is not necessary for my plugin. Is there a way I can tell the compiler not to copy certain image files?

@ventura Why do you specify them if you don’t want to be packaged and then available in the Grafana Catalog?

You can just reference images in the README from GitHub.

Hi @mikhailvolkov, thanks for your reply. I want to keep the screenshots in the plugin’s download page like below. (I assume this is what you mean by catalog?) I just don’t see a need to package them with the code as that would increase the download size. Plus, the screenshots are not referenced anywhere in the plugin.

Perhaps I can put an image URL in the "path" attribute in plugin.json?

You can put images in your README file (using absolute urls (starting with https://).

They won’t appear on the same place the catalog screenshot appear. Instead they’ll appear in the text section.

Additionally you can try to optimize the size and compression of your screenshots. Maybe your screen is to big and generating big images.

Also the warning you see there is a webpack warning, This is not a limit in the size of the archive you can put in the catalog.

1 Like

This is probably the best alternate fix, but I do like how the screenshots are displayed currently in the catalog. Do you know if it would work if I put absolute URLs in plugin.json instead?

It should work as far as I know.

Unfortunately, I cannot add absolute screenshots in plugin.json. From the Validate Plugin step, this is the error(s) I get:

error: plugin.json: screenshot path should be relative to plugin.json: https://raw.githubusercontent.com/nicfv/Psychart/main/screenshots/display_options.png
detail: Don't use absolute paths inside plugin.json

Is there a way I could request this feature removed? Link to GitHub

For anyone reading this in the future: Plugins with absolute URLS within plugin.json are not accepted.

This is the direction I went moving forward. However, there is 1 catch - you are, in fact required to have at least 1 relative screenshot in plugin.json. Since the plugin’s logo is packaged anyway, I used that as my 1 screenshot and put “see README for screenshots” in the image description.

1 Like

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.