Add image/logo

Add an image or company logo to the header bar widget of your application.

1. Open the project_dir/customization/custom_project_dir/js/MyHeaderBarWidget.tpl.html file with a text editor.
2. Inside the div element add an <img> tag, and set its src attribute to the path to your image. Save your changes:

   <div>
     <img src="./resources/img/my_logo.jpg"/>
     Applications started: <b class="MyHeaderBarWidget-counter"></b>
     <span data-i18n="mycusto.window.currentTitle"></span> : <b class="MyHeaderBarWidget-title"></b>
   </div>

   In this example your can see:
   • An image is added in the img element.
     Important: When referencing an image in your project's resources directory from a file in the js directory, the path needs to be set relative to your customization_project, the application root at compilation time (./).
   • Text displays the number of applications opened, referencing the MyHeaderBarWidget-counter class.
   • Text displays the application title by referencing locale custom keys with the MyHeaderBarWidget-title class.
3. Open your project_dir/customization/custom_project_dir/MyMainContainerWidget.js file. The header bar widget is added. Check that the main container class has code that adds the header bar class as a child of the main container widget.

   "use strict";
   
   modulum('MyMainContainerWidget', ['WidgetGroupBase', 'WidgetFactory'],
           
          ...
   
           constructor: function() {
             $super.constructor.call(this);
   
             var headerBar = new cls.MyHeaderBarWidget();
             headerBar.setParentWidget(this);
             this.getElement().querySelector("header").appendChild(headerBar.getElement());
           }
         };
       });
   
       cls.WidgetFactory.register('MainContainer', cls.MyMainContainerWidget);
     });

   In the highlighted code in the JavaScript example, you can see:
   • The variable headerBar references an instance of the MyHeaderBarWidget class.
   • The .getElement().querySelector method inserts the header bar widget as a child of the header element in the main container element of the interface.
4. In your project_dir/customization/custom_project_dir/scss/customization.scss file add a reference to the MyMainContainerWidget.scss. In this example we import the MyMainContainerWidget style.

   @import "MyMainContainerWidget";

5. Rebuild using grunt.
6. Test the image is displayed as expected by closing and reopening your application.
   Tip: You may need to use CTRL + F5 to clear the browser cache before you see your changes.