(Difference between pages)
VisualWikitext
No edit summary
 
No edit summary
 
Line 1: Line 1:
<bookshelf src="Book:User manual" />
<bookshelf src="Book:User manual" />
{{DISPLAYTITLE: Insert images}}
{{DISPLAYTITLE:Insert tables}}
==How to insert an image on a page==
In addition to text, images are probably the most important components of typical content pages. With VisualEditor, the images can be uploaded, inserted and formatted all in one step. Images are inserted via the menu item ''Insert > Media''.
[[File:instert_2.0.0.png|alt=Insert media|center|thumb|309x309px|Insert media]]


==Insert a table==
In VisualEditor, choose "Insert > Tables" to insert a table in a page:


The dialog box ''Media Settings'' opens.
[[File:Instert, Table.png|260x260px]]
[[File:media_settings_1.0.png|alt=Media settings dialog|center|thumb|385x385px|Media settings dialog]]


After entering the rows and columns, an empty table appears with the edit menu:


After uploading, you can edit the image settings: Details, General Settings, and Advanced Settings.
[[File:table 1.0.png|305x305px]]


===Details===
When the mouse rests on a symbol, the respective function is displayed.
[[File:media_settings_2.0.png|alt=Media settings|center|thumb|386x386px|Media settings]]
Here you can assign a namespace and categories to a picture.


*'''Target namespace:''' The picture can be assigned directly to a namespace. The access rights of the namespace are also applied to the image. This means that only users with access to the namespace can view the image on the wiki.
Double-click in the cells to insert text:
*'''Name:''' Choose a name that makes it easy to find the image later during an image search. Or simply leave the current file name.
*'''Description:''' The description is mainly useful for photos or infographics when the image name does not adequately describe the image content.
*'''Categories:''' Here, the picture can be assigned to categories.<br />
{{Filename}}


[[File:weekly.png|280x280px]]
==Merge rows and columns==
When you click in a row, an arrow appears at the left edge of the row and at the top of the column. To connect the cells in a row or a column, click on the respective arrow and then in the edit menu on "Merge":


'''Error message when saving:''' If the image already exists, an error message is displayed. If you want to overwrite the existing file, you can click on the file name and overwrite the file via the image page in the wiki. This is done by clicking the "Upload a new version of this file" link in the "File Versions" section. In VisualEditor itself overwriting an image does not not work.
[[File:table 3.0.png|300x300px]]
[[File:something_went_wrong.png|alt=Upload error|center|thumb|400x400px|Upload error]]
<br />


===General settings===
You can also connect individual cells. Hold down the Shift key and click in two or more adjacent cells. Then connect the cells. The cells must be adjacent in a row or in a column so that they can be connected.
[[File:media_settings_3.0.png|alt=General settings|center|thumb|424x424px]]
<span /><br />
In the general settings, the image descriptions are added.
==Table properties==
In the menu item Properties, there are numerous settings to adjust the functionality and presentation of the table:


'''Caption:''' The caption is shown with framed images and thumbnails. Note: If you change an image to frameless and then back to "framed", you need to re-enter the caption.
{| class="contenttable-blue content table-blue" style=""
 
!Property
'''Alternate text:''' The alternate text should be entered for each image since it replaces the image in certain contexts. For example, this so-called "alt" text is used by users who work with screen readers. Screen readers are used by users with visual limitations, but search engines can also read this text. In some business areas, the indication of the "alt" text is also required by law. If you are not sure, ask your company accordingly.
<br />
 
===Advanced settings===
[[File:media_settings_4.0.png|alt=Advanced settings|center|thumb|309x309px|Advanced settings]]
In the advanced settings, you can set the position and image size.
 
The following settings are possible:
 
*'''Position:'''
**Wrap text around this item:
***''Left:'' The image is displayed on the left side of the text, starting on the first line of the current paragraph.
***''Center:'' The image is displayed centered over the current paragraph.
***''Right:'' The image is displayed to the right of the text, starting on the first line of the current paragraph.
 
*'''Image type''':  If you insert an image with VisualEditor, the image is usually linked to the Media Viewer. To suppress the link on an image, you must add an empty link attribute to the image tag in the source code:
**frameless picture with link (standard): <code><nowiki>[[File:adult-chair-company-380769.jpg|frameless]]</nowiki></code>
**frameless picture without link: <code><nowiki>[[File:adult-chair-company-380769.jpg|frameless|link=]]</nowiki></code>
 
{| class="wikitable"
|+
!Image type
!Output
!Description
!Description
|-
|-
|Thumbnail
|Caption
|[[File:Bild.jpg|alt=Example of a thumbnail image|centre|thumbnail|This is the caption|link=https://de.wiki.bluespice.com/wiki/Datei:Bild.jpg]]
|Shows a header above the table:
|The preview picture shows the image with a standard width of 300px. The width can be adjusted as required.
[[File:weeklyplan.png|200x200px]]


After disabling the header, it is lost and must be reentered when re-enabled.
|-
|Styed(wikitable)
|enables the default wiki look after table styles were previously selected
|-
|Sortable
|In the first row, a sort function is displayed:
[[File:Weeklyplan 2.0.png|200x200px]]


In addition, the caption is displayed below the picture. A preview icon indicates that the image can be viewed in a larger size.
The current sorting is shown in the title bar. Only one of the two sort arrows will appear in the sorted column.
|-
|Collapsible
|The table can be hidden on the page via a text link.
|-
|Collapsed initially
|If the "Collapsible" property is active, this determines whether the table is visible or hidden when the wiki page is loaded. T
|-
|Exportable
|
|-
|-
|Frameless
|Filterable
|[[File:Bild.jpg|alternativtext=Bild|centre|frameless|link=https://de.wiki.bluespice.com/wiki/Datei:Bild.jpg]]
|The filter function is activated in the title bar and allows the following actions:
|The frameless version shows the picture without a frame. The width can be adjusted as required (here we set the example to 300px).


The caption does not appear below the picture.
*Sort table (ascending or descending values of the active column)
*Hide table columns
*Filter column (only values from the current column are considered here)


By default, the image is inserted without text wrapping. It will break up a sentence exactly where it is inserted. By default, the image is centered.
[[File:table 4.0.png|550x550px]]


However, the image size and position can be adjusted as needed.
<span><br /></span>
If the filter is activated, the table styles are ignored and the table is displayed in "Filter Style". After deactivating this function, the selected table style is displayed again.
|-
|-
|Frame
|Table style
|[[File:Bild.jpg|alternativtext=Beispiel: Bildtyp frame|none|enframed|300x300px|Dies ist die Beschriftung|link=https://de.wiki.bluespice.com/wiki/Datei:Bild.jpg]]
|Here you can load different style sheets for the table.
|The framed version is similar to the preview picture. Compared to the preview, the magnifying glass symbol is not displayed and the image is inserted on the page full-size.
 
The size cannot be adjusted.
|-
|-
|Basic
|Use full width for table
|[[File:Bild.jpg|300x300px|link=https://de.wiki.bluespice.com/wiki/Datei:Bild.jpg]]
|The table uses the full width of the wiki page, regardless of the table contents.
|The basic version is like the frameless version.
|}
 
By default, text does not wrap, but the text is separated at the point where the image was inserted.


The image is inserted in full width, while the frameless image is inserted in miniature image width (300px). The size can be adjusted.
==Table styles==
|}


*'''Image size:'''
<span><br /></span>
**''Standard:'' sets the image width to 300px (unless the standard width has been changed in the [[Manual:Preferences|user preferences]]).
The following style sheets can be selected in the Table Style menu. Click on a picture to start the gallery:
**''Custom:'' allows setting a custom size.
**''Make full size:'' resets the size to the actual image size.


==Images and namespaces==
<span /><br /><gallery>
You can save pictures and files in the general namespace ''(pages)''. If pictures should be accessible by all users, you can save these pictures in the main namespace if other namespaces have access restrictions. If you have created additional namespaces, you can also save images in these namespaces if you have the necessary access rights. Images are then only shown to users who have the necessary read permissions in these namespaces.  
File:Gallery 1.0.png|Standard
File:Gallery 2.0.png|Content
File:Gallery 3.0.png|Content (black)
File:Gallery 4.0.png|Content (blue)
File:Gallery 5.0.png|Content (darkblue)
File:Gallery 6.0.png|Cusco Sky
File:Gallery 7.0.png|Casablanca
File:Gallery 8.0.png|Greyscale
File:Gallery 9.0.png|Greyscale (narrow)
</gallery>


In the upload dialog, the namespace field always suggests the namespace of the current page for the image upload.
<span><br /></span>
<section begin="training-tabellen" /><div class="training anwender">
The visual editor makes it easy to format content as a table. The following alternatives for creating tables exist:


==Changing an embedded image==
* Tables can also be inserted as a csv file on a page (just drag the CSV file onto the page in edit mode)
'''Different image:''' In the editing mode of the page, it is possible to edit the image with a double-click. Use the "Change image" button to exchange the image with a different image.
* Complex tables can alternatively be attached to the page as an xlsx file.


'''Same image with different version:''' If you want to use a new version of the same image, open the "Special:Upload file" page in a new browser tab (so that you don't  lose any changes on your wiki page). There, you can save already existing pictures with  the same name again. The original image is kept as a version.
{{Box Links-en|Topic1=[[Manual:Extension/BlueSpiceFilterableTables|Filterable tables]]}}</div><section end="training-tabellen" />


<span><br /></span>
[[en:{{FULLPAGENAME}}]]
[[en:{{FULLPAGENAME}}]]
[[de:VisualEditor/Bilder]]
[[de:VisualEditor/Tabellen]]
 
[[Category:Editing]]
[[Category:User]]
[[Category:Getting started]]

Revision as of 17:14, 22 November 2022


Insert a table

In VisualEditor, choose "Insert > Tables" to insert a table in a page:

Instert, Table.png

After entering the rows and columns, an empty table appears with the edit menu:

table 1.0.png

When the mouse rests on a symbol, the respective function is displayed.

Double-click in the cells to insert text:

weekly.png

Merge rows and columns

When you click in a row, an arrow appears at the left edge of the row and at the top of the column. To connect the cells in a row or a column, click on the respective arrow and then in the edit menu on "Merge":

table 3.0.png

You can also connect individual cells. Hold down the Shift key and click in two or more adjacent cells. Then connect the cells. The cells must be adjacent in a row or in a column so that they can be connected.

Table properties

In the menu item Properties, there are numerous settings to adjust the functionality and presentation of the table:

Property Description
Caption Shows a header above the table:

weeklyplan.png

After disabling the header, it is lost and must be reentered when re-enabled.

Styed(wikitable) enables the default wiki look after table styles were previously selected
Sortable In the first row, a sort function is displayed:

Weeklyplan 2.0.png

The current sorting is shown in the title bar. Only one of the two sort arrows will appear in the sorted column.

Collapsible The table can be hidden on the page via a text link.
Collapsed initially If the "Collapsible" property is active, this determines whether the table is visible or hidden when the wiki page is loaded. T
Exportable
Filterable The filter function is activated in the title bar and allows the following actions:
  • Sort table (ascending or descending values of the active column)
  • Hide table columns
  • Filter column (only values from the current column are considered here)

table 4.0.png


If the filter is activated, the table styles are ignored and the table is displayed in "Filter Style". After deactivating this function, the selected table style is displayed again.

Table style Here you can load different style sheets for the table.
Use full width for table The table uses the full width of the wiki page, regardless of the table contents.

Table styles


 The following style sheets can be selected in the Table Style menu. Click on a picture to start the gallery:


  • Standard

    Standard

  • Content

    Content

  • Content (black)

    Content (black)

  • Content (blue)

    Content (blue)

  • Content (darkblue)

    Content (darkblue)

  • Cusco Sky

    Cusco Sky

  • Casablanca

    Casablanca

  • Greyscale

    Greyscale

  • Greyscale (narrow)

    Greyscale (narrow)


The visual editor makes it easy to format content as a table. The following alternatives for creating tables exist:

  • Tables can also be inserted as a csv file on a page (just drag the CSV file onto the page in edit mode)
  • Complex tables can alternatively be attached to the page as an xlsx file.

Related info



To submit feedback about this documentation, visit our community forum.

Retrieved from "https://en.wiki.bluespice.com/w/index.php?title=Manual:Extension/VisualEditor/Insert_images&oldid=5311"
No categories assignedEdit

Discussions