Versions Compared

Version Old Version 1 New Version 2
Changes made by

Anthony George

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 to display company logos, icons, backgrounds and more. To do this:

  • Go to the Repository → Application → Images
    • Click  Insert excerpt_new_newnopaneltrue
  • 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_finishnopaneltrue
  • 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_listnopaneltrue to list the available images and drag one into the Background Image box
  • Set other options for the image. For example:
    1. background-repeat, no-repeat
    2. background-position, center
    3. background-size, 100% 100%
    • Click  Insert excerpt_finish_finishnopaneltrue

    Setting Palette Item Icons

    Expand

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

  • Open the properties for the component in which you want to use an image
  • In Properties tab →  Advanced → Internal Icon Source, select the image from the drop-down list; see Layout → Internal Icon Source
    • Click  Insert excerpt_finish_finishnopaneltrue

    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  Anchorimagesizeimagesize

    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.

    Anchorpropertiesproperties

    Image Properties

    Insert excerpt_property_tabs_property_tabsnamebasic-hnopaneltrue Insert excerpt_parent_parentnopaneltrue

    Basic Settings

    FieldDescriptionName

    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_descriptionnopaneltrue Insert excerpt_audit_auditnopaneltrue

    Adding Icons

    Iframe
    src https://youtube.com/embed/BI585I0iwgU?&rel=0&ytp-pause-overlay=&list=PLbPt6SI1Zhb9JAD6TfD-qGC6vzZXOznvn
    width680px
    height400px

    Adding Interactive Icons

    Iframe
    src https://youtube.com/embed/PzSQYcnEKbc?&rel=0&ytp-pause-overlay=&list=PLbPt6SI1Zhb9JAD6TfD-qGC6vzZXOznvn
    width680px
    height400px