Adding Custom Banner Images
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:
-
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
. -
Create a copy of
header.png
, resize it to 200 pixels in width, and 57 pixels in height. Save it aspreview.png
. -
Connect over Remote Desktop to the hosting server.
-
Change to the directory
%plesk_dir%\sb\htdocs\headers\
, and create a subdirectory with the banner name. For example,%plesk_dir%\sb\htdocs\headers\jungle_01
. -
Upload the
header.png
andpreview.png
files that you prepared to the directory%plesk_dir%\sb\htdocs\headers\jungle_01\
. -
Change to the directory
%plesk_dir%\sb\resources\
. It should contain the filecustomHeaders.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>
-
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:
-
Open for editing the file
%plesk_dir%\sb\resources\locale\<locale_code>\headers.lng.
-
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>
isJungle_01-eXample
, then it must be changed tojungle_01Example
.If the
<header_id>
ismy-super-banner
, then it should be transformed tomySuperBanner
.If the
<header_id>
ismy_super_banner
, then it should be transformed tomy_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"
-
-
Save the file.
-
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
-
Issue the following command:
"%plesk_dir%\admin\bin\php.exe" -c "%plesk_dir%\admin\php.ini" -d auto_prepend_file="" "%plesk_dir%\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.