Wiki source code of Bild
Hide last authors
author | version | line-number | content |
---|---|---|---|
![]() |
1.4 | 1 | {{panel float="right"}} |
![]() |
19.3 | 2 | (% class="block text-align-center%){{ficon name="XImage" size="4em"/}} |
![]() |
1.1 | 3 | |
![]() |
20.1 | 4 | (% class="block%)The icon for form elements of type //Image//. |
![]() |
1.4 | 5 | {{/panel}} |
![]() |
1.5 | 6 | |
![]() |
20.1 | 7 | == Functionality == |
![]() |
1.1 | 8 | |
![]() |
20.1 | 9 | {{figure image="designer_element_image_properties_base_en.png"}} |
10 | The size in pixels can be specified in the style panel of the {{designer/}}. | ||
![]() |
1.4 | 11 | {{/figure}} |
![]() |
1.1 | 12 | |
![]() |
20.1 | 13 | {{figure image="designer_element_image_csssize_en.png"}} |
14 | The image size can also be specified with //CSS// code. | ||
![]() |
1.4 | 15 | {{/figure}} |
16 | |||
![]() |
20.1 | 17 | Form elements of type //image// add an image to the current form and are just design elements. No value will be sent when the form is submitted. Add new images via drag & drop, by dragging the image from the file explorer of your choice to the //images// panel of the {{designer/}}. |
![]() |
1.1 | 18 | |
![]() |
20.1 | 19 | {{html}}There are two ways of specifying the size of an image:{{/html}} |
![]() |
1.1 | 20 | |
![]() |
20.1 | 21 | ; via the properties panel |
22 | : The height and the width can be adjusted in the basic properties panel of the {{designer/}}. Setting the width or height to {{code language="none"}}0{{/code}} will not add the CSS properties //width// or //height// and the image will be sized automatically by the browser. | ||
23 | ; via CSS | ||
24 | : Custom CSS can be used to specify the size of an image. For example, you can add a new CSS class in the [[CSS tab>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]] of the {{designer/}} and select this class in the [[CSS class panel>>doc:Formcycle.FormDesigner.ElementProperties.CSSClasses]]. | ||
![]() |
1.1 | 25 | |
![]() |
20.1 | 26 | {{internBaseOptionsElement page="base"/}} |
27 | |||
28 | {{internBaseOptionsElement page="style"}} | ||
29 | {{table dataTypeAlpha="0" colWidth="-500"}} | ||
30 | |=Name|=Description | ||
31 | |Alignment|Changes the alignment (left, right, center) of the image. | ||
![]() |
1.1 | 32 | {{/table}} |
33 | {{/internBaseOptionsElement}} | ||
34 | |||
35 | {{internBaseOptionsElement page="cond"/}} | ||
36 | |||
![]() |
20.1 | 37 | {{internBaseOptionsElement page="label"}} |
![]() |
19.2 | 38 | {{figure image="designer_element_image_properties_label.png"}} |
![]() |
20.1 | 39 | Additional settings for the section //label//. |
![]() |
19.2 | 40 | {{/figure}} |
41 | |||
![]() |
1.1 | 42 | {{table dataTypeAlpha="0" colWidth="-500"}} |
![]() |
20.1 | 43 | |=Name|=Description |
44 | |Title|When set, a tooltip will show up when the user hovers with the mouse over an image. This uses the HTML attribute //title//. | ||
45 | |Alt Text|An alternative text that will be displayed when the image cannot be shown, for example when using screen readers. Sets the HTML attribute //alt//. | ||
![]() |
1.1 | 46 | {{/table}} |
47 | {{/internBaseOptionsElement}} | ||
48 | |||
![]() |
19.4 | 49 | {{id name="sec-image"/}} |
50 | |||
![]() |
20.1 | 51 | == Images == |
![]() |
1.1 | 52 | |
![]() |
20.1 | 53 | {{figure image="designer_element_image_drag_drop_upload_en.png" group="secImg"}} |
54 | The gallery contains all images available for the current form. Images can be uploaded directly via drag&drop as well. | ||
![]() |
1.4 | 55 | {{/figure}} |
![]() |
1.1 | 56 | |
![]() |
20.1 | 57 | Images can be uploaded in the images panel of the {{designer/}}. To upload an image with drag & drop, drag the image from the file explorer of your choice, eg. Windows Explorer, Finder, or Nautilus, to this panel. |
![]() |
1.1 | 58 | |
![]() |
20.1 | 59 | Images that have been uploaded already can be used simply by clicking on it. The selected image will now be shown in the form. |
![]() |
1.1 | 60 | |
![]() |
20.1 | 61 | Delete an image by clicking the {{icon name="times"/}} icon at the upper right hand corner of the image. |
62 | |||
![]() |
1.1 | 63 | {{internBaseOptionsElement page="css"/}} |
64 | |||
65 | {{internBaseOptionsElement page="help"/}} | ||
66 | |||
67 | {{internBaseOptionsElement page="attr"/}} | ||
68 | |||
69 | {{internBaseOptionsElement page="avail"/}} | ||
70 | |||
71 | {{internBaseOptionsElement page="ronly"/}} | ||
72 | |||
73 | {{internBaseOptionsElement page="misc"/}} | ||
74 | |||
75 | {{content moveToTop="true"/}} |