Image - FORMCYCLE Wiki

author	version	line-number	content
1	{{panel float="right"}}
2	(% class="block text-align-center%){{ficon name="XImage" size="4em"/}}
3
4	(% class="block%)The icon for form elements of type //Image//.
5	{{/panel}}
6
7	== Functionality ==
8
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/}}.
11	{{/figure}}
12
13	{{figure image="designer_element_image_csssize_en.png"}}
14	The image size can also be specified with //CSS// code.
15	{{/figure}}
16
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/}}.
18
19	{{html}}There are two ways of specifying the size of an image:{{/html}}
20
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]].
25
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.
32	{{/table}}
33	{{/internBaseOptionsElement}}
34
35	{{internBaseOptionsElement page="cond"/}}
36
37	{{internBaseOptionsElement page="label"}}
38	{{figure image="designer_element_image_properties_label.png"}}
39	Additional settings for the section //label//.
40	{{/figure}}
41
42	{{table dataTypeAlpha="0" colWidth="-500"}}
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//.
46	{{/table}}
47	{{/internBaseOptionsElement}}
48
49	{{id name="sec-image"/}}
50
51	== Images ==
52
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.
55	{{/figure}}
56
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.
58
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.
60
61	Delete an image by clicking the {{icon name="times"/}} icon at the upper right hand corner of the image.
62
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"/}}

1

2

(% class="block text-align-center%){{ficon name="XImage" size="4em"/}}

3

4

(% class="block%)The icon for form elements of type //Image//.

== Functionality ==

The size in pixels can be specified in the style panel of the {{designer/}}.

The image size can also be specified with //CSS// code.

15

16

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/}}.

18

19

{{html}}There are two ways of specifying the size of an image:{{/html}}

20

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]].

|=Name|=Description

|Alignment|Changes the alignment (left, right, center) of the image.

Additional settings for the section //label//.

|=Name|=Description

|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//.

== Images ==

{{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.

55

56

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.

58

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.

60

61

Delete an image by clicking the {{icon name="times"/}} icon at the upper right hand corner of the image.