Index

• Prepare yourself
• Background
  • Background color
  • Add images
• Picture parameters
  • Margins
  • Borders
  • Loading icon

Create a template

Prepare yourself

When you create a template, or change an existing one, please copy the whole directory of the template.
Choose a name without spaces, accents or any specials characters. You'll have two folders: default (original theme, please don't delete my work haha) and your own template.
To enable the template, go into the admin panel under the settings tab and click on Template. Select your themplate and save.

When PicsEngine updates are available, the original template can be a little modified. If you have some problems with PicsEngine after the update, try to use the default template to see if your template is compatible or not.
Don't replace the templates entirely when you are upload an update, it can replace the whole folder and perhaps your template.

In the template folder there is a template.xml file and interface images (png or jpg).
The file to edit is template.xml that contains all informations about font color and size, images path,...
When you are editing this file and you want to test it with your gallery, be sure that your web browser cache is cleared.

Background

(Version 3.0.3 or newer)
With PicsEngine 3 you can modify your background as you want.
You can change the background color or add many images with different alignments or repetition types (normal, horizontal, vertical, mosaic, scaled).
PNG images are also compatible so you can have images on other images to make this gallery beautiful.

Background color

The background color is in the <background> node.
<background> <color>000000</color> <!-- background color --> <color2>333333</color2> <!-- color of the home gradiant --> </background> The color node is the background color in hexadecimal. The color2 node is the gradiant color of the homescreen. To erase the gradiant, just delete this node.

Add images

Now, you can add images to your background. Images that are defined first are displayed behind . To add images, search the <background> node.
Add a <images> node. This node will contain all your background images.
<background> <!-- [...] --> <images> <!-- images definitions --> </images> </background> And here is the defition of one image:
<image> <url>image.png</url> <type>normal</type> <!-- normal, scaled, repeatx, repeaty, repeat --> <alignh>left</alignh> <!-- left, center, right --> <alignv>top</alignv> <!-- top, center, bottom --> <visible>both</visible> <!-- both, home, photo --> </image> <url> is the url of your image (that is in your template directory: admin/templates/yourtheme/image.png).
<type> is the maneer how your image will be rendered.
- normal: image displayed without any crop or resize
- scaled: image displayed to take the whole page. Scaled to the browser window.
- repeatx: image repeated horizontally
- repeaty: image repeated vertically
- repeat: image repeated in both ways (mosaic)
<alignh> contain horizontal alignment (left, center, right)
<alignv> contain vertical alignment (top, center, bottom)
<visible> contain visibility of the image
- both: image displayed everywhere
- home: image displayed on the home screen
- photo: image displayed behind the pictures

Example: <background> <color>000000</color> <!-- background color --> <images> <image> <url>img1.png</url> <type>repeatx</type> <alignh>left</alignh> <alignv>top</alignv> </image> <image> <url>img2.png</url> <type>normal</type> <alignh>right</alignh> <alignv>top</alignv> </image> </images> </background> The first node (img1.png) is the background image horizontally repeated. The seconde node (img2.png) is the logo that will be displayed in top, right and not be repeated.
Here is the result:

Picture parameters

You can now add margins and even borders to your pictures. The modifications will be in the node <large>

Margins

Margins can be added as edges of your picture. In normal mode (showed menu), the bottom margin is between the picture and the menu. In slideshow mode, the margin is between the end of the window and the picture.
By default, margins are at 0 to have maximum visibility for small screens.
Here is the code to edit if you want insert pictures margins.
<padding> <!-- photo margins --> <top>0</top> <bottom>0</bottom> <lateral>0</lateral> <!-- left and right --> </padding>

Borders

We can add border of size and color we want.
Modifications are made in the node <borders>.
The first thing to do is to enable borders, edit the node <enabled> et set true.
Then, nodes <size> and <color> define the size and the color of course.
Here is an example of code:
<border> <!-- photo borders --> <enabled>true</enabled> <size>35</size> <color>ffffff</color> </border> PicsEngine will display borders with 35 pixels and white color. Colors have to be in Hexadecimal (FFFFFF = white, 000000 = black).

Loading icon

You can also edit colors of the loading icon. Just edit the node <loading>.
The node <backgroundColor> is the background color, and <color> is the color (evidently..)
<loading> <backgroundColor>000000</backgroundColor> <color>FFFFFF</color> </loading>