Versions Compared

Old Version 35

changes.mady.by.user Anthony George

Saved on

compared with

New Version Current

changes.mady.by.user Anthony George

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

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 
    Insert excerpt
    _new
    _new
    nopaneltrue
    .
  3. PhixFlow opens the image properties, where you can upload the image; see Image Properties, below.
  4. Provide a name Name for the Image
  5. Click Browse
  6. Navigate to your image, select it and click the Open button.
  7. Click 
    Insert excerpt
    _finish
    _finish
    nopaneltrue
    .
  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 
      Insert excerpt
      _image_list
      _image_list
      nopaneltrue
       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 Sizebackground-size, 100% 100%
  4. Click 
    Insert excerpt
    _finish
    _finish
    nopaneltrue
    .

Setting Palette Item Icons.

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 
    Insert excerpt
    _finish
    _finish
    nopaneltrue
    .

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
imagesize
imagesize

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 distortedSize 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 the it 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

location

Use

background-

size option to use

size 

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 defaults to 64px 64px and cannot be configured. We recommend you use square imagesDepending on the image, contain will fill the grid cell, but you cannot add padding.

while maintaining the aspect ratio.

Grid Buttons and Icons

length or contain

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

on different screens

.

Remember

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

In addition 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.

    Buttons

    specify size

    Buttons usually have a fixed height. To ensure the button has the correct proportions, use a fixed

    length or
  • 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

    width and height. 

    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:

    specify size

    As above.

    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

    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
    properties
    properties

    Image Properties

    Insert excerpt_property_toolbar_property_toolbarnopaneltrue

    Insert excerpt
    _property_tabs
    _property_tabs
    namebasic-h
    nopaneltrue

    Insert excerpt
    _parent
    _parent
    nopaneltrue

    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.

    Insert excerpt
    _description
    _description
    nopaneltrue

    Insert excerpt
    _audit
    _audit
    nopaneltrue