Customizing GBC images

Images for the customization are typically stored in the customization-project-dir/resources/img directory. To include images in your customization, add them to this directory and reference them in your code.

You can then add images using the following files:

• The style sheet (.scss) file. For example, to use the text-color.png file as your background image:

  background: url('$$RES/img/text-color.png')

  Note:

  The $$RES variable allows the GBC build process to set the correct path for the resources in your distribution.

  For further details, see Customizing your application using style sheets and Widget scss file.

• The template (.tpl.html) file of the widget. This is particularly useful for a fixed image, such as a company logo, for example:

  <img class="logo" src="./resources/img/company_logo.png"/>

  For further details, see Customizing your application using widgets and Widget template file. For an example, see Add header image.

• The JavaScript (.js) file of the widget. This is particularly useful for a variable image, such as one that is dependent on a value from a widget, for example:

  this.setImage(context.ThemeService.getResource(image_variable));

  For further details, see Customizing your application using widgets and Widget JavaScript file. For an example, see Change file loading icon.

The following images are special cases:

• The favicon and emptytabbed images are hard coded into the gbc-project-dir/src/index.html file. To update the image, you need to replace that named file. See Customizing your application by replacing an image.
• Icons for the checkbox, combobox, radio group, and table widgets are set using theme variables. See Change icons.