This section explains how to add custom banner images to Presence Builder’s image library, and make them available for selection in the editor.

Suppose, you have an image file with the name jungle.jpg, and you want to add it to the editor. Do the following:

1. Resize the image to 960 pixels in width and 250 pixels in height. Convert the image to PNG format, and save it as header.png.

2. Create a copy of header.png, resize it to 200 pixels in width, and 57 pixels in height. Save it as preview.png.

3. Connect over SSH to the hosting server.

4. Locate the directory /sb/htdocs/headers/, and create a subdirectory with the banner name. For example, /sb/htdocs/headers/jungle_01.

5. Upload the header.png and preview.png files that you prepared to the directory /sb/htdocs/headers/jungle_01/.

6. Locate the directory /sb/resources/. It should contain the file customHeaders.xml.

   If the file is missing, create it and insert the following lines into it:

   <?xml version="1.0" encoding="utf-8"?>
   <headers>
       <header id="jungle_01">
   
       </header>
   </headers>
   

   If the file is present, add the following <header> node to it:

   <header id="jungle_01">
   
   </header>
   

7. Add keywords for the image.

   Keywords are used for the following purposes:

   • Binding of images to website topics. When a new site is created based on a website topic, the editor searches for banner images that may be relevant to the topic, and adds one of them to the generated website. It also uses the relevant banners in generated design templates, which users can preview and select in the editor > Design tab > Templates. The relevance is determined by matching keywords in the website topic’s meta data and in the headers.lng file containing descriptions of all banner images in the form of keywords.
   • Enabling users to find images by keywords in the banner selection menu.

   To add keywords, do the following:

   1. Open for editing the file /sb/resources/locale/<locale_code>/headers.lng.

   2. Add a string in the following format:

      <header_id> = "<keyword_1>,<keyword_2>,<keyword_3>"
      

      Where:

      • <header_id> is the image ID that you specified in step 6, but with certain transformations: all uppercase letters must be changed to lower case, hyphens must be removed, the next symbol following a hyphen must be changed to upper case.

        For example:

        If the <header_id> is Jungle_01-eXample, then it must be changed to jungle_01Example.

        If the <header_id> is my-super-banner, then it should be transformed to mySuperBanner.

        If the <header_id> is my_super_banner, then it should be transformed to my_super_banner.

      • <keyword> is a human-readable word that describes the image or identifies items on the picture.

      You can use several keywords separated by commas. White spaces can be used only if they are part of a descriptive phrase or a combination of words.

      Example:

      jungle01 = "jungle,tropics,green,nature,family travel"
      

   3. Save the file.

8. Issue the following command:

   /usr/local/psa/bin/sw-engine-pleskrun /usr/local/sb/utils/updateResources.php header
   

Now you can go to the editor and open the list of banner images. The newly added image should be at the end of the list.