Page upload: Difference between revisions

@@ Line 1: / Line 1: @@
-The following form (click the button below) shows the use of PageProperties as a multiple file uploader fully customizable.
+The following form (click the button below) shows the use of VisualData as a multiple file uploader fully customizable.
 The form below uses the following features:
 * wikitext in either title and description of each item and subitem
@@ Line 8: / Line 8: @@
 * list of accepted mime-types editable in the file input config (special page [[Special:ManageSchemas]] then Page upload schema) accessible from the settings icon besides the dropdown with available inputs (see picture below)
-[[File:Screenshot-PageProperties-InputConfig.png|480px|frameless]]
+[[File:Screenshot-VisualData-InputConfig.png|480px|frameless]]
 (the caption associated to each file is simply a field besides the file field in the same subitem, other fields could be added as well)
@@ Line 14: / Line 14: @@
-{{#pagepropertiesform: Page upload
+{{#visualdataform: Page upload
 |title = Page upload
 |action = edit
 |edit-page =
 |return-page =
-|view = popup
+|view = inline
 |popup-size = medium
 |css-class =
@@ Line 40: / Line 40: @@
 <pre>
-{{#pagepropertiesform: Page upload
+{{#visualdataform: Page upload
 |title = Page upload
 |action = edit
@@ Line 64: / Line 64: @@
-'''Also note that although the [[PagePropertiesSchema:Page_upload|Page upload schema]] is now used inside a form, its typical use would be to add it to whatever page of the wiki through the "Edit semantic" tab, and then adding it to the page.''' This way there is no need to create a form each time.
+'''Also note that although the [[VisualDataSchema:Page_upload|Page upload schema]] is now used inside a form, its typical use would be to add it to whatever page of the wiki through the "Edit semantic" tab, and then adding it to the page.''' This way there is no need to create a form each time.
+<!--
 Here is a [https://www.mediawiki.org/wiki/Help:Images/en gallery] created through the parser function below. It uses the following 2 templates: [[Template:Page_upload]] and [[Template:Page_upload_files]]. The gallery is automatically updated after form submit with the new data.
+-->
+Here is a Carousel which displays the files uploaded with the form above.
+{{#visualdataprint: {{FULLPAGENAME}}
+|schema=Page upload
+|format=carousel
+|height_=400px
+|slick-adaptiveHeight=true
+}}
-{{#pagepropertiesprint: {{FULLPAGENAME}}
+<pre>
+{{#visualdataprint: {{FULLPAGENAME}}
+|schema=Page upload
+|format=carousel
+|slick-adaptiveHeight=true
+}}
+</pre>
+<!--
+{{#visualdataprint: {{FULLPAGENAME}}
 |?files/file
 |?files/caption
@@ Line 78: / Line 94: @@
 |format=template
 }}
 <pre>
-{{#pagepropertiesprint: {{FULLPAGENAME}}
+{{#visualdataprint: {{FULLPAGENAME}}
 |?files/file
 |?files/caption
@@ Line 91: / Line 105: @@
 </pre>
+-->
 == See also ==
-* [[Test pageproperties 2.0]]
+{{Demo VisualData footer}}
-* [[New task]]
-* [[Test pageproperties 2.0 - Result formats|Result formats]]
-* [[Test_pageproperties_2.0_-_Dependent_values|Dependent values]]
-* [[Test_pageproperties_2.0_-_Queries|Queries]]
@@ Line 1: / Line 1: @@
-{}
+{
+	"schemas": {
+		"Page upload": {
+			"files": [
+				{
+					"file": "File:433-s-l1600.webp",
+					"caption": "a"
+				},
+				{
+					"file": "File:433-s-l1600 (1).webp",
+					"caption": "b"
+				},
+				{
+					"file": "File:433-s-l1600 (2).webp",
+					"caption": "c"
+				},
+				{
+					"file": "File:433-s-l1600 (3).webp",
+					"caption": "d"
+				},
+				{
+					"file": "File:433-cape-cod-evening.jpg",
+					"caption": "cape cod evening"
+				},
+				{
+					"file": "File:433-s-l1600 (5).webp",
+					"caption": "f"
+				}
+			]
+		}
+	},
+	"schemas-data": {
+		"untransformed": {
+			"Page upload/files/0/file": "s-l1600.webp",
+			"Page upload/files/1/file": "s-l1600 (1).webp",
+			"Page upload/files/2/file": "s-l1600 (2).webp",
+			"Page upload/files/3/file": "s-l1600 (3).webp",
+			"Page upload/files/4/file": "cape-cod-evening.jpg",
+			"Page upload/files/5/file": "s-l1600 (5).webp"
+		}
+	},
+	"categories": [
+		"tasks"
+	]
+}
@@ Line 1: / Line 1: @@
-{
+{}
-    "schemas": {
-        "Page upload": {
-            "files": [
-                {
-                    "file": "File:433-PageProperties-MenuTagSearchMultiselect-field.png",
-                    "caption": "cap a"
-                },
-                {
-                    "file": "File:433-default-value-parserfunction.png",
-                    "caption": "cap b"
-                },
-                {
-                    "file": "File:433-Screenshot from 2023-12-10 09-32-38.png",
-                    "caption": "cap c"
-                }
-            ]
-        }
-    },
-    "schemas-data": {
-        "untransformed": {
-            "Page upload/files/0/file": "PageProperties-MenuTagSearchMultiselect-field.png",
-            "Page upload/files/1/file": "default-value-parserfunction.png",
-            "Page upload/files/2/file": "Screenshot from 2023-12-10 09-32-38.png"
-        }
-    }
-}

Latest revision as of 09:52, 3 November 2024

The following form (click the button below) shows the use of VisualData as a multiple file uploader fully customizable.

The form below uses the following features:

wikitext in either title and description of each item and subitem
subitem with multiple items and min-item attribute set to 1 (in order to hold the file and caption fields)
OO.UI.SelectFileWidget for the field "file" with input-config droppable and showDropTarget. Note that both the attributes must be set in order to enable a doppable area
value formula for the file field {{PAGEID}}-<value> in order to upload the file with a filename prefixed with the pageId of the current or created page. This is useful when you don't want to care of uploading files with same name on the wiki.
list of accepted mime-types editable in the file input config (special page Special:ManageSchemas then Page upload schema) accessible from the settings icon besides the dropdown with available inputs (see picture below)

File:Screenshot-VisualData-InputConfig.png

(the caption associated to each file is simply a field besides the file field in the same subitem, other fields could be added as well)

form is loading...

This is the code to display the form-button

{{#visualdataform: Page upload
|title = Page upload
|action = edit
|edit-page = 
|return-page = 
|view = popup
|popup-size = medium
|css-class =
|pagename-formula = 
|edit-freetext = false
|edit-categories = false
|edit-content-model = false
|default-categories = tasks
|default-content-model = 
|layout-align = top
|popup-help = true 
|submit-button-text =
|layout = tabs
|submit-button-text =
|validate-button-text =
}}

Also note that although the Page upload schema is now used inside a form, its typical use would be to add it to whatever page of the wiki through the "Edit semantic" tab, and then adding it to the page. This way there is no need to create a form each time.

Here is a Carousel which displays the files uploaded with the form above.

a

b

c

d

cape cod evening

f

{{#visualdataprint: {{FULLPAGENAME}}
|schema=Page upload
|format=carousel
|slick-adaptiveHeight=true
}}

Page upload: Difference between revisions

Latest revision as of 09:52, 3 November 2024

See also

Navigation menu

Search