Adding Images

Owned by Fiona Sargeant (Unlicensed)
Last updated: Nov 06, 2023 by Zoe Baldwin
2 min read

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:

  1. Go to the Repository → Application → Images
  2. Click  Create New
  3. PhixFlow opens the image properties, where you can upload the image; see Image Properties, below
  4. Provide a Name for the image
  5. Click Browse
  6. Navigate to your image, select it and click the Open button
  7. Click  Apply and Close
  8. Your image is now ready to use

If you want to use your image in other application consider adding it to a Package.

How to Use an Image

  1. Open the properties for the component in which you want to use an image
  2. In the Styles tab → Style Settings → Background Image
    1. Select the image from the drop-down list 
    2. Or, click  List Images to list the available images and drag one into the Background Image box
  3. Set other options for the image. For example:
    1. background-repeat, no-repeat
    2. background-position, center
    3. background-size, 100% 100%
  4. Click  Apply and Close

Setting Palette Item Icons

 Click here to expand...

To use an image as an icon to represent the component in a palette:

  1. Open the properties for the component in which you want to use an image
  2. In Properties tab →  Advanced → Internal Icon Source, select the image from the drop-down list; see Layout → Internal Icon Source
  3. Click  Apply and Close

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 

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:

  • background-repeat no-repeat
  • background-position center

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:

  • state Mouse Over

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.

Image Properties

 Properties Tab

Parent Details

If this item is within or belongs to another, its parent name is shown here. See the Parent Details section on the Common Properties page for more details.

Basic Settings

FieldDescription
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.

Description

We recommend that you always enter a description to explain the purpose of this item.

 Audit Tab

Audit Summary

See the Common Properties page, Audit Summary section.