...
| Insert excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
|
How to Load
...
an Image
You can add your own images
...
to an application to display company logos
...
, icons, backgrounds and more. To do this:
- Go to the
...
- Repository → Application → Images
- Click
Insert excerpt _
...
new _
...
new nopanel true
...
- PhixFlow opens
...
- the image
...
- properties, where you can upload the image
...
- ; see Image Properties, below
- Provide a Name for the image
- Click Browse
- Navigate to your image, select it and click the Open button
- Click
Insert excerpt _finish _finish nopanel true
...
- Your image is now ready to use
| Tip |
|---|
If you want to use your image in other application consider adding it to a Package. |
How to Use an Image
- Open the
...
- properties for the component in which you want to use an image
...
- In the Styles tab → Style Settings → Background Image
...
- Select the image from the drop-down
...
- list
- Or, click
Insert excerpt _image_list _image_list nopanel true
...
- to list the available images and drag one into the Background Image box
- Set other options for the image
...
- . For example:
- background-repeat, no-repeat
- background-position, center
- background-size, 100% 100%
- Click
Insert excerpt _finish _finish nopanel true
...
Setting Palette Item Icons
| Expand |
|---|
To use an image as an icon to represent the component in a palette:
|
...
|
...
|
...
|
...
For information about how to use an image stored on the PhixFlow server, see Using a URL to Display an Image. |
Setting the Size of an Image
| Anchor | ||||
|---|---|---|---|---|
|
The size is set using CSS syntax. To learn more see Background-Size Settings.
Example Configurations
Typically, an image is set as the background of an area, and is set to cover it. The area is then used to set the size of the image.
Here are some possible locations for images, and suggestions for which options to use to control the image size.
Image Use | background-size | Details |
|---|---|---|
Area Background | contain | The image fills the area background while maintaining the aspect ratio. |
Grid Buttons and Icons | specify size e.g. 30px 30px | As grids are fixed widths and heights, you can use a fixed width and height to ensure the image displays correctly. In addition remember to apply the following Style properties:
|
Buttons | specify size | Buttons usually have a fixed height. To ensure the button has the correct proportions, use a fixed width and height. |
Mouse-over buttons | specify size | As above. For a mouse-over button remember to set the additional CSS Properties:
|
Application Icon and Logo
To change the image used on the application selection tile and/or the company logo displayed in the top left, see Editing Application Properties.
| Anchor | ||||
|---|---|---|---|---|
|
Image Properties
| Insert excerpt | ||
|---|---|---|
|
...
|
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
Basic Settings
| Field | Description |
|---|---|
| Name | Enter a name for the image. |
| Browse |
...
Click |
...
the Browse button to open a file explorer window where you can navigate to the image you want to upload. |
...
PhixFlow |
...
displays a |
...
thumbnail of the uploaded image. |
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|