Demo VisualData 1.0 / Page upload

Page upload: Difference between revisions

From Wikisphere
Jump to navigation Jump to search
← Older edit
VisualWikitext
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
 
(25 intermediate revisions by 2 users not shown)
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:
The form below uses the following features:
* wikitext in either title and description of each item and subitem
* 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)
* 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)
(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
|title = Page upload
|action = edit
|action = edit
Line 40: Line 40:


<pre>
<pre>
{{#pagepropertiesform: Page upload
{{#visualdataform: Page upload
|title = Page upload
|title = Page upload
|action = edit
|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 [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/file
|?files/caption
|?files/caption
Line 78: Line 94:
|format=template
|format=template
}}
}}
<pre>
<pre>
{{#pagepropertiesprint: {{FULLPAGENAME}}
{{#visualdataprint: {{FULLPAGENAME}}
|?files/file
|?files/file
|?files/caption
|?files/caption
Line 91: Line 105:
</pre>
</pre>


 
-->
 
{{#pagepropertiesprint: {{FULLPAGENAME}} 
|?cover
|?title
|?authors/name
|?authors/email
|schema=Book
|template=Book
|template?authors=Book authors
|format=template
}}
 
This is a page with an infobox that demonstrates the use of PageProperties ([https://gerrit.wikimedia.org/r/c/mediawiki/extensions/PageProperties/+/968230 latest version]) used as a [https://en.wikipedia.org/wiki/Create,_read,_update_and_delete CRUD]
 
Click the button below to edit the article's metadata through a popup or the tab "Edit semantic" among the article's actions.
 
 
{{#pagepropertiesform: Book
|title = edit infobox and page
|action = edit
|edit-page = {{FULLPAGENAME}}
|return-page =
|view = popup
|popup-size = medium
|css-class =
|pagename-formula =
|edit-freetext = true
|edit-categories = false
|edit-content-model = false
|default-categories =
|default-content-model = wikitext
|layout-align = top
|popup-help = true
|submit-button-text =
|layout = tabs
|submit-button-text =
|validate-button-text =
}}
 
 
The popup is rendered using the following code
 
<pre>
{{#pagepropertiesform: Book
|title = edit infobox and page
|action = edit
|edit-page = {{FULLPAGENAME}}
|return-page =
|view = popup
|popup-size = medium
|css-class =
|pagename-formula =
|edit-freetext = true
|edit-categories = false
|edit-content-model = false
|default-categories =
|default-content-model = wikitext
|layout-align = top
|popup-help = true
|submit-button-text =
|layout = tabs
|submit-button-text =
|validate-button-text =
}}
 
</pre>
A Pageproperties' form can edit whatever page (through the parameter <code>edit-page</code>, and create new pages with user-defined title or using a pagename formula. It is [https://json-schema.org/ json/schema] compliant<ref>It does not yet support allOf, anyOf, oneOf, and $refs both in the editor and in the viewer</ref>  and can handle subitems, multiple fields and multiple sub items. It is deeply integrated with the Mediawiki's [https://doc.wikimedia.org/oojs-ui/master/demos/ OOUI library] and uses a lot or most of its features.
'''In the latest version can query properties and nested properties, as well as render them using templates and nested templates and does not rely on [https://www.semantic-mediawiki.org/wiki/Semantic_MediaWiki SemanticMediawiki]'''.
 
 
 
The infobox is rendered through the following code:
 
<pre>
{{#pagepropertiesprint: {{FULLPAGENAME}}
|?cover
|?title
|?authors/name
|?authors/email
|schema=Book
|template=Book
|template?authors=Book authors
|format=template
}}
 
</pre>
 
 
This is a SemanticMediawiki-like parser function that can be used as a shorthand to invoke the more complex <code> {{#pagepropertiesquery }} </code> parser function that can handle multi-page results and provides a basic query language. (more about this on the official page of the extension to be updated soon)
 
The results are rendered on the page using 2 templates, [[Template:Book]] and [[Template:Book authors]]. The second is used as a nested template rendered inside the parent template ([[Template:Book]]) entitled to render the properties with path <code>authors</code>. ''' Note that the parent template must include a reference to the name of the child template since both values and template's containers are passed as named parameters.'''
 
 
The form's schema(s) (a form can contain an arbitrary number of schemas, and a schema an arbitrary number of items and subitems) can be edited using this [[Special:ManageSchemas|Special page]] or [https://wikisphere.org/w/index.php?title=Test_pageproperties_2.0&action=editsemantic this interface] (tab Edit semantic, edit icon on the right and then "Manage schemas")
 
The related [[PagePropertiesSchema:Book|schema]] created by the UI contains an hidden property "name" that is filled-in with the compounded value of the fields <code>first_name</code> and <code>last_name</code>.
Also, the cover file name contains a value-formula, that allows the file to be saved with the article-id as prefix (also for new articles) which is useful to easily upload on the wiki files with similar names.
 
 
Have fun with this extension !!
 




jsondata
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"
]
}
pageproperties
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"
                }
            ]
        }
    },
    "schemas-data": {
        "untransformed": {
            "Page upload/files/0/file": "PageProperties-MenuTagSearchMultiselect-field.png",
            "Page upload/files/1/file": "default-value-parserfunction.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
}}


See also


support & questions: support at topway.it

Download the latest version!

Retrieved from "https://wikisphere.org/w/index.php?title=Demo_VisualData/Page_upload&oldid=4704"