How to Load an Image

You can add your own images to an application so that you can 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  OK.

How to Use an Image

1. Open the properties for the component in which you want to use an image.
2. In Styles tab → Style Settings → Background Image, select the image from the drop-down list; see Component → Background Image.
   The drop-down list includes all images available to you. To list only the images available to the current application, click  List Images.

3. Set other options for the image, see Component → Style Settings. 

   By default, PhixFlow repeats a small image or icon to fill the available background space. To use a small image as a single icon, change Background Repeat to no-repeat.

4. Click  OK.

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

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 

Use the CSS Properties to size an image. For a background image, the background-size can be:

• auto: the background image is displayed in its original size.
• length: sets the width and height of the background image, for example, 20px 20px.
  • The first value sets the width.
  • The second value sets the height.
  • If only one value is given, the second is set to 'auto'.
• percentage: sets the width and height of the background image in percent of the parent component, for example 100%.
  • The first value sets the width
  • The second value sets the height.
  • If only one value is given, the second is set to 'auto'.
• cover: resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off.
• contain: resize the background image to make sure the image is fully visible.
• initial: sets this property to its default value.
• inherit: inherits this property from its parent component.

Getting an image to display correctly is a process of trial and error. The exact settings depend on the image size and how you want it to appear in your application. We recommend that you aim to make the image responsive on different screens using the options percentage, cover or contain. However, this can be ignored if you know your image will only be used in one form factor and you are having problems with it becoming distorted.

Here are some possible locations for images, and suggestions for which options to use to control the image size.

Image Properties

Property Pane Toolbar

For information about the toolbar options, see the Common Properties page, Toolbars and Controls section.

 Properties Tab

Parent Details

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

Basic Settings

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.