Nick Mudge Ignition Software Consulting & Development

Normally images in Ignition are stored in the Ignition gateway, not in Ignition projects. This makes it easy to reuse the same images in multiple projects, but it makes projects less portable because images used in projects are not exported with projects.

So you might add your own special icons and images to Ignition and use them in your project. Later you export your project and send the project export file to a colleague. Your colleague imports the project into a different Ignition server and the images are missing. Ah man, too bad. This blog post shows how to solve this problem so that your images stay with your exported projects.

One way to solve the problem is to use SVG graphics within your projects. SVG graphics are components in Ignition and are saved in Ignition projects.

However if you want to use jpeg and/or png images in your projects and want them to be exported as part of project files, follow the steps below.

Or you can just watch this video: How to Store Images In Ignition Projects

How to store jpeg and png images in an Ignition project

Step 1.

Create a new client tag with the tag path and name, "project_images". Make the value of the tag an empty dataset. This client tag is where the project images will be stored.

Step 2.

Download this project file: ProjectImagesTemplates.proj. Click on the link to download the file.

Import that project file into your existing Ignition project using the Designer.

The project file contains two Ignition templates: The ProjectImageStorage template and the ProjectImage template.

ProjectImagesStorage template:

The ProjectImagesStorage template is used to upload and manage images in your project.

ProjectImage template:

The ProjectImage template is used to display images that are stored in your project.

Step 3.

Open the ProjectImageStorage template in the Ignition designer. Put the Designer into preview mode and click on the "Upload Image" button to find images on your local computer and upload them into the project. Give names to images at the same time you upload them.

Uploaded images will be added as rows to the "[client]project_images" tag and will appear in the table in the template. The table is bound to the "[client]project_images" tag.

It is possible to change the name of an uploaded image by double clicking in a name cell. It is possible to remove images by selecting a row in the table and pressing the "Remove Image" button.

Be sure to use the ProjectImageStorage template in the Ignition Designer and not in a client.

Step 4.

Drag and drop the ProjectImage template on windows and templates where you want to display images.

The ProjectImage template has a template property called, "imageName". For each ProjectImage template instance on a window or template input the name of an image as given in ProjectImageStorage template. Setting the name of an image in the imageName property will make that image display.

Step 5.

Save the project in the Designer. The images that are uploaded in the Designer will not be available to clients until the project is saved.

Step 6.

The next step is to join my email list. Just kidding, you are done. But you should join my email list if you haven't already. So you are updated about new blog posts.

The solution given in this blog post is an efficient way to store images in projects and display them multiple times across multiple windows and templates. Your .proj project export files will include your images. And when you import your projects into a different Ignition server, your images will be there, displaying and working.

A couple people have suggested to me the idea of using a memory tag instead of a client tag. A memory tag won't work because a memory tag is not exported with a project.

It is important to understand that images must be uploaded in the designer, not the client. The reason this works is because the value of a client tag in the designer (where the images get stored) becomes the default value of the client tag in all clients -- and this is how all clients get the images.

Check out this video that shows the steps: How to Store Images In Ignition Projects