Summary

• Page properties (3 modified, 0 added, 0 removed)

Details

Page properties

Title

...	...	@@ -1,1 +1,1 @@
1		-$services.localization.render("PT.Main.Bild")
	1	+Image

Author

...	...	@@ -1,1 +1,1 @@
1		-XWiki.gru
	1	+XWiki.fse

Content

...	...	@@ -1,19 +1,31 @@
1		-{{figure image="image.png" width="100"}}The icon for form elements of type //Image//.{{/figure}}
	1	+{{panel float="right"}}
	2	+(% class="block text-align-center%){{ficon name="XImage" size="4em"/}}
2	2
3		-== Functionality
	4	+(% class="block%)The icon for form elements of type //Image//.
	5	+{{/panel}}
4	4
5		-{{figure image="image_0_en.png" width="200"}}The size in pixels can be specified in the basic properties panel of the {{designer/}}{{/figure}}
	7	+== Functionality ==
6	6
7		-{{figure image="image_1_en" width="300"}}The image size can be specified with //CSS// as well.{{/figure}}
	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}}
8	8
	13	+{{figure image="designer_element_image_csssize_en.png"}}
	14	+The image size can also be specified with //CSS// code.
	15	+{{/figure}}
	16	+
9	9	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/}}.
10	10
11		-There are two ways of specifying the size of an image:
	19	+{{html}}There are two ways of specifying the size of an image:{{/html}}
12	12
13		-* {{litem title="via the properties panel"}}The height and the width can be adjusted in the basic properties panel of the {{designer/}}. Setting the width or height to {{code}}0{{/code}} will not add the CSS properties //width// or //height// and the image will be sized automatically by the browser.
14		-* {{litem title="via CSS"}}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:Main.CSS]] of the {{designer/}} and select this class in the [[CSS class panel>>doc:Main.CSS Klassen]].{{/litem}}
	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]].
15	15
16		-{{internBaseOptionsElement page="base"}}
	26	+{{internBaseOptionsElement page="base"/}}
	27	+
	28	+{{internBaseOptionsElement page="style"}}
17	17	{{table dataTypeAlpha="0" colWidth="-500"}}
18	18	|=Name|=Description
19	19	|Alignment|Changes the alignment (left, right, center) of the image.
...	...	@@ -23,6 +23,10 @@
23	23	{{internBaseOptionsElement page="cond"/}}
24	24
25	25	{{internBaseOptionsElement page="label"}}
	38	+{{figure image="designer_element_image_properties_label.png"}}
	39	+Additional settings for the section //label//.
	40	+{{/figure}}
	41	+
26	26	{{table dataTypeAlpha="0" colWidth="-500"}}
27	27	|=Name|=Description
28	28	|Title|When set, a tooltip will show up when the user hovers with the mouse over an image. This uses the HTML attribute //title//.
...	...	@@ -30,11 +30,13 @@
30	30	{{/table}}
31	31	{{/internBaseOptionsElement}}
32	32
33		-== Images
	49	+{{id name="sec-image"/}}
34	34
35		-{{figure image="image_2_en.png" width="200" group="secImg"}}The images panel before any images have been uploaded.{{/figure}}
	51	+== Images ==
36	36
37		-{{figure image="image_3_en.png" width="200" group="secImg"}}The images panel once an image has been uploaded.{{/figure}}
	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}}
38	38
39	39	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.
40	40