Add Static Images

In the documentation and in previous articles we covered the basics of the modules directory. We know, for example, that it can contain folders for JavaScript, SuiteScript, templates and Sass. But, what you may not know, is that we can also use this same format for including static images.

Static imagery is useful when you want to include an image that will rarely (if ever) change and is used to support the user in some way. For example, in the bundle we have included a module called GlobalImages which contains images used throughout your site, such as a loading icon, social media icons and a favicon. This article is going to quickly run through how to add static imagery to a module. This method should obviously not be used for things like product images (see SCA Product Images for more information).

Prepare Your Files

When you have your images ready, you will need create a folder in your module's directory called Images, just like any other folder (such as JavaScript or Templates). Put your images inside of it.

After that you need to declare your images folder in the module's ns.package.json file. Thus, you will need to update it to look something like that following:

{
    "gulp": {
        "javascript": [
            "JavaScript/*"
        ],
        "images": [
            "Images/*"
        ],
        "templates": [
            "Templates/*"
        ]
    }
}

Use Your Images

There are effectively two ways you can do this:

  1. You can include the image in each view that it is to be used in.
  2. You can create a separate child views and templates for the image itself, which you can then call into multiple places. This can be useful if you plan to use the image by itself a lot.

The first method is pretty simple, and the second, in reality, complicates matters to an arguably unnecessary extent. However, you should see where the second method is appropriate: if you want to make changes in the future, you do not need to edit each file it is used in; you just change it once and it changes everywhere.

What both have in common is the underlying method:

  1. Add Underscore as a dependency in your file
  2. Use _.getAbsoluteUrl('img/<image name>') to get the URL for the image, so that we can use it in the template.

Tutorial

For the purpose of this tutorial I'm going to use the Artist module that I created in my tutorial.

So, I want to add an star to the Edit Artist Details page, which is where I update or add details about the artists in my list.

After following the steps detailed in the Prepare Your Files section above, I'm going to edit the view for this page (Artist.Edit.View.js) and add underscore as a dependency (remember to add _ as a parameter). Then, add the following to the return statement in the getContext function:

starIcon: _.getAbsoluteUrl('img/staricon.png')

What we've done is add the URL of the image and assigned it to starIcon. This'll give us a Handlebars expression which we can use in our template.

Next, in the artist_edit.tpl template, I'm going to put my image somewhere. In fact, what I want to do is add my star to both sides of the heading text so that people know that it's extra special. So I'm going to change my h1 tag to:

<h1 class="artist-edit-header-title"><img src="{{starIcon}}">{{#if isNew}}New{{else}}Edit{{/if}} Artist Details<img src="{{starIcon}}"></h1>

Note how in the src attribute we are using the {{starIcon}} expression that we defined earlier.

Use gulp deploy to push your changes up (this will upload your image to NetSuite) and then access your page. You should see your changes take effect. In future, if you need to make sure changes to your non-image files you can use your local server.

Summary

Static images are images which don't change often and are usually used as user aids. While we didn't cover the more complicated method of doing it, the simple method of including it in the views that we want the image to appear in is applicable in most situations. For an example of this method, check out the Header module.

Further Reading