This page is for application designers who want to add company or project branding to an application.

Image Properties

For information about the properties toolbar, and about the sections Parent Details, Analysis Models, Description and Audit Summary, see Common Properties. For a full list of all the PhixFlow property tabs and windows, see Property Tabs.

Basic Settings

Field

Description

Name

Enter a name for the image.

Browse button

Click to open a file explorer window where you can navigate to the image you want to upload.

PhixFlow displays a small version of the uploaded image.

File Name

PhixFlow adds the file name of the uploaded image.

This field is present in 8.3.0 and 8.3.1, but has been removed in 8.3.2 and later versions.

Sections on this page

How to Load and Use an Image

You can add your own images so that your applications can display company logos and banner backgrounds.

To add an image:

Go to the repository → Application → Images.
Right-click and select Add . PhixFlow opens an image property tab, where you can upload the image.
Click OK.

To use an image:

Open the layout properties for the component in which you want to use an image.
In Style Settings → Background Image, select the image from the drop-down list; see Layout → Background Image.
The drop-down list includes all images available in the full repository. To see the images uploaded to the repository for the current application, click List Images.
Set other options for the image, see Layout → Style Settings.

By default, PhixFlow will repeat 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.
Click OK.

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

Open the layout properties for the component in which you want to use an image.
In Advanced → Internal Icon Source, select the image from the drop-down list; see Layout → Internal Icon Source for details.
Click OK.

The maximum image size that PhixFlow can manage depends on the way your servers and Tomcat are configured. If you have problems uploading large files, see Configuring Large Image Upload.

For information about how to use an image stored on the PhixFlow server, see Using a URL to Display an Image.

Image Sizing

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 – e.g. 20px 20px. Sets the width and height of the background image. 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 – e.g. 100%. Sets the width and height of the background image in percent of the parent element. 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 – resizes 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 element.

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 location	backbround-size option to use	Details
Area Background	contain	The image fills the area background.
Grid Background	-	You cannot have an entire background for a grid.
Application Logo in the menu	-	This defaultes to 64px 64px and cannot be configured. We recommend you use square images.
Grid Buttons and Icons	length or contain	Depending on the image, contain will fill the grid cell, but you cannot add padding. As grids are fixed widths and heights, you can use a fixed width to ensure the image displays correctly on different screens. Remember to apply the following Style properties: background-repeat no-repeat background-position center background-image specify the image URL; see Using a URL to Display an Image. Alternatively, select an image in the Basic Settings. width 100% height 100% top leave blank left 0 Using 100% for the width and height ensures a button or icon fills the whole cell. This is good practice for action buttons, so that the user can click anywhere in the cell to trigger an action.
Company Logo displayed in top left	-	This defaults to a height of 25px. It resizes horizontally to fill the available space. We recommend a rectangular .svg image, as it is also used for the background of the application and an svg image can be scaled correctly.
Company Logo background of application	-	This defaults to a height of 100px. It resizes fit the size of the .svg image file.
Buttons	length	Buttons usually have a fixed height. To ensure the button has the correct proportions, use a fixed length or width.
Mouse-over buttons	length	Use the same background size and position settings as the original image. When a user moves their mouse pointer over, the image overlays the underlying image. You may need to add a background colour to the image, to ensure it covers the underlying image. For buttons, the image will be added to an area which completely covers the button and has absolute positioning: top 0px bottom 0px left 0px right 0px This ensures the area covers the whole button so the mouse-over applies when the user is hovering over any part of the button. For a mouse-over button to work, remember to set the additional CSS Properties: opacity 0 opacity 1 state Mouse Over transition all 0.2s