ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Image control
  • Overview
  • Options of the description window
  • "General" tab
  • "UI" tab
  • "Details" tab
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview
This help page presents the characteristics of an Image control found in a page.
Reminder: To create an Image control:
  1. On the "Creation" tab, in the "Usual controls" group, expand "Image" and select "Image".
  2. Click where you want to create the control in the page. The control appears in the editor.
To view the control characteristics, select "Description" in the context menu of the control.
Options of the description window

"General" tab

The "General" tab is used to define the displayed image and its characteristics.
Image source:
  • Image : The image displayed by the control is selected via the button, "Browse" option. Depending on the selected image, a wizard is displayed, allowing you to:
    • compress the image automatically (for images whose size exceeds 20 KB). This option also allows you to convert the image into one of the formats suited to Internet pages. When this option is not selected:
      • If the image uses a format not adapted to Internet pages, the image will be converted each time the page is generated, so this generation may be slowed down.
      • If the image uses a format adapted to the pages but its size is too large, the page load time may increase.
      If you perform the conversion immediately, you can select the image format and quality. You can also use the progressive JPEG format. This format displays a page progressively while the browser loads the page.
    • automatically convert the image into one of the formats suited to Internet pages. If this option is not selected, the image will be converted each time the page is generated, so this generation may be slowed down. If you perform the conversion immediately, you can select the image format and quality.
    • define the image location: you can copy the image to the site directory (_WEB directory) to optimize the page generation time or leave the image at its location (recommended when the file is shared between several contributors).
Display parameters
Display mode: For more information on the image display mode and transparency, see Choosing the image display mode.
Action
An action can also be associated with the image. For more details, see Choosing the action associated with a control.

"UI" tab

Transitions - Effects - Automatic scroll
  • Transition/Effect: When the value of the Image control is modified, a transition can be selected (e.g., Fade, Cover, Slide, etc.) to make the image transition smoother. For more details, see Animating the image display.
  • Enable the automatic scroll of images: This option is available for "dynamic" images or images "from a database: path". For more details, see Image with automatic scroll.

"Details" tab

The "Details" tab is used to specify advanced options.
Localize the image in the browser code _WEB directory:
This option is checked by default when creating an Image control. In this case, in browser code, the image is automatically sought in the _WEB directory of the site. No specific code is required.
If this option is unchecked, the full image path must be specified to find the image. To do so, use the FolderWeb function.
Image protection :
If this option is checked, the context menu of the image will not be displayed in the browser. Some of the actions related to the image (save, print, etc.) will not be available. This option is also available in the Clickable image and Thumbnail controls.
Automatic zoom:
WEBDEV proposes the automatic zoom of an image in a popup. For more details, see Zoom on an image.
Drag/Drop:
This option is used to configure the Image control for the management of Drag and Drop. For more details, see Automatic Drag and Drop.
Delayed loading:
The option "Load the image when the control is displayed on the screen" is used to delay the image loading. Indeed, when a browser performs the rendering of a page, it loads the page and its images from the server. This load time may be quite long in some cases. This option allows the browser to load the image only when this one is displayed in the visible page section. You also have the ability to specify the wait image, used during the delayed image load.
Zoom and scroll with fingers
This option is used to manage the multi-touch on the browser for the images. For more details, see Multi-touch in an Image control.
Minimum version required
  • Version 9
Comments
Click [Add] to post a comment

Last update: 06/07/2022

Send a report | Local help