How to Display PNG Images in HTML on Galaxy?

Dear community members,

I’m seeking guidance on an effective solution for displaying PNG images in HTML. We have developed a tool that generates PNG files, and our goal is to present these images collectively within an HTML page. However, upon job completion, Galaxy relocates these files from the transient job working directory to permanent storage. As a result, the images are renamed to “xxx.dat,” and the HTML file is unable to locate the relative path within the permanent storage directory (e.g., “galaxy_files/000/547/dataset_547316.dat”). How can I display these images in my HTML on Galaxy?

Your assistance is greatly appreciated!

Hi @hohosharon

Maybe review how other tool wrappers that produce HTML content handle that data? FastQC is one example. Then you can use Planemo to tune up your tool, or try to do that directly outside of Planemo.

https://planemo.readthedocs.io/

How to get from the application into the details of a tool wrapper is in this screenshot. Or, you can search the Main ToolShed directly. Links to the development repository and related resources will be available.

Tool form → Options → See in ToolShed

Then, to get the display to work for any tool that has HTML content, go to Admin → Allowlist and toggle the tool for display. This assumes that you turned off default HTML display. So – all are displayed by default (in the galaxy.yml config file) or all are set to not display and you set specific tools to pass through to display with Allowlist settings.

Please let me know if any of that is not clear and I can try to rephrase :hammer_and_wrench:

Xref: Private Galaxy Servers

1 Like

Thank you very much! Your explanation is exceptionally clear. The primary distinction between my HTML and FastQC is that their PNG files are converted into base64 code. Therefore, Galaxy no longer needs to locate the relative PNG file.

1 Like