Meryam Sahin (talk | contribs)
No edit summary
Meryam Sahin (talk | contribs)
No edit summary
 
Line 12: Line 12:
When uploading a new image, provide the required information in the '''Media settings''' dialog.
When uploading a new image, provide the required information in the '''Media settings''' dialog.
# Select '''Select a file''' and choose an image from the local file system.
# Select '''Select a file''' and choose an image from the local file system.
# Select '''Upload'''. [[File:media_settings_1.0.png|alt=Media settings for uploading an image to the main namespace without further settings|center|thumb|385x385px|Media settings dialog]]
# Select '''Upload'''. [[File:visualeditor-media-settings-dialog.png|alt=Media settings for uploading an image to the main namespace without further settings|center|thumb|385x385px|Media settings dialog]]
# Enter or change the following information as needed:
# Enter or change the following information as needed:
#*'''Name:''' Defines the file name. Use a descriptive name that makes the image easy to find.
#*'''Name:''' Defines the file name. Use a descriptive name that makes the image easy to find.
Line 28: Line 28:
Image settings are divided into '''General settings''' and '''Advanced settings'''.  
Image settings are divided into '''General settings''' and '''Advanced settings'''.  
====General settings====
====General settings====
[[File:media_settings_3.0.png|alt=General settings with a caption an the alternative text for the image|center|thumb|344x344px|General settings]] <br>
[[File:visualeditor-media-general-settings.png|alt=General settings with a caption and alternative text for the image|center|thumb|344x344px|General settings]]<br>
The general settings define the image caption, alternative text, and other descriptive information.
The general settings define the image caption, alternative text, and other descriptive information.
* '''Caption:''' Displays a caption with framed images and thumbnails. If an image is changed from frameless to framed, enter the caption again.
* '''Caption:''' Displays a caption with framed images and thumbnails. If an image is changed from frameless to framed, enter the caption again.
* '''Alternate text:''' Provides a text alternative for the image. Alternative text is used when the image cannot be displayed and by screen readers. Enter descriptive alternative text that conveys the relevant information provided by the image.
* '''Alternate text:''' Provides a text alternative for the image. Alternative text is used when the image cannot be displayed and by screen readers. Enter descriptive alternative text that conveys the relevant information provided by the image.
====Advanced settings====
====Advanced settings====
The advanced settings define the image position, image type, border, and size.The following settings are possible: [[File:media_settings_4.0.png|alt=Advanced settings example values|center|thumb|309x309px|''Advanced settings: position (image alignment), image type'', ''image width'' and ''image height'']]  
The advanced settings define the image position, image type, border, and size.The following settings are possible: [[File:visualeditor-media-advanced-settings.png|alt=Advanced settings with example values|center|thumb|309x309px|Advanced settings: image position, type, width, and height]]
*'''Position:''' The '''Position''' setting determines how the image is positioned relative to the surrounding text.
*'''Position:''' The '''Position''' setting determines how the image is positioned relative to the surrounding text.
**'''Wrap text around this item:''' Enables text wrapping around the image.
**'''Wrap text around this item:''' Enables text wrapping around the image.
Line 48: Line 48:
|-
|-
| style="" |'''Thumbnail'''
| style="" |'''Thumbnail'''
| style="" |[[File:Bild.jpg|alt=Image type "thumbnail"|centre|thumbnail|This is the caption]]
| style="" |[[File:visualeditor-media-thumbnail.png|alt=Image type "thumbnail"|center|thumb]]
| style="" |Displays the image with a frame and caption. The default width is 300 px. The width can be adjusted. A preview icon indicates that the image can be opened at a larger size.
| style="" |Displays the image with a frame and caption. The default width is 300 px. The width can be adjusted. A preview icon indicates that the image can be opened at a larger size.
|-
|-
| style="" |'''Frameless'''
| style="" |'''Frameless'''
| style="" |[[File:Bild.jpg|centre|frameless|alt=Image type "frameless"]]
| style="" |[[File:visualeditor-media-frameless.png|center|frameless|alt=Image type "frameless"]]
| style="" |Displays the image without a frame. The width can be adjusted. The caption is not displayed below the image.
| style="" |Displays the image without a frame. The width can be adjusted. The caption is not displayed below the image.
|-
|-
| style="" |'''Frame'''
| style="" |'''Frame'''
| style="" |[[File:Bild.jpg|none|enframed|This is the image caption|link=https://de.wiki.bluespice.com/wiki/Datei:Bild.jpg|alt=Image type "frame"]]
| style="" |[[File:visualeditor-media-frame.png|none|enframed|link=https://de.wiki.bluespice.com/wiki/Datei:Bild.jpg|alt=Image type "frame"]]
| style="" |Displays the image with a frame and caption. The image is displayed at its full size. The size cannot be adjusted.
| style="" |Displays the image with a frame and caption. The image is displayed at its full size. The size cannot be adjusted.
|-
|-
| style="" |'''Basic'''
| style="" |'''Basic'''
| style="" |[[File:Bild.jpg|300x300px|alt=Image type "Basic"]]
| style="" |[[File:visualeditor-media-basic.png|300x300px|alt=Image type "Basic"]]
| style="" |Displays the image without a frame. The image is displayed at full width and can be resized.
| style="" |Displays the image without a frame. The image is displayed at full width and can be resized.
|}
|}
Line 77: Line 77:
== Insert an image using drag and drop ==
== Insert an image using drag and drop ==
An image can be uploaded and inserted by dragging the file directly from the local file system onto the page in VisualEditor.
An image can be uploaded and inserted by dragging the file directly from the local file system onto the page in VisualEditor.
[[File:drag and drop.png|alt=Drag and drop screenshot|center|thumb|650x650px|Line indicating the insert position during drag-and-drop]]  
[[File:visualeditor-drag-and-drop.png|alt=Drag-and-drop screenshot|center|thumb|650x650px|Line indicating the insert position during drag-and-drop]]
'''Insert an image using drag and drop''':  
'''Insert an image using drag and drop''':  
#Open the page in VisualEditor.
#Open the page in VisualEditor.

Latest revision as of 14:32, 19 August 2026

done
Images can be uploaded, inserted, and formatted in VisualEditor. Existing images can also be searched and inserted.

Insert an image

Images can be inserted from the Insert (+) menu or by dragging an image file onto the page.
Insert an image:

  1. Select Insert (+) > Images and media.
  2. Search for an existing image or select Upload to upload a new image.
  3. Select the image.
  4. Configure the image settings.
  5. Select Insert.

Upload an image

When uploading a new image, provide the required information in the Media settings dialog.

  1. Select Select a file and choose an image from the local file system.
  2. Select Upload.
    Media settings for uploading an image to the main namespace without further settings
    Media settings dialog
  3. Enter or change the following information as needed:
    • Name: Defines the file name. Use a descriptive name that makes the image easy to find.
    • Description: Describes the image. A description is particularly useful for photos or infographics when the file name does not adequately describe the content.
    • Categories: Assigns categories to the image.
  4. Select Save.

The image is uploaded to the wiki.
If the image already exists: An error message is displayed. Upload a new version of the existing image from its file version page, or use a different file name to upload the image as a separate file.

Note:When uploading a new file, you should check the file/page name for unusual special characters (e.g., ", %, /,< ,>, [ ,], {, }). Change the name to include only standard characters, since the server file system could have problems with them or since some characters have special meanings in MediaWiki.

The special characters (, ), &, + can be used and are translated into their equivalent %-hex notation.


: will be converted to spaces, unless it is part of an existing namespace prefix.

Search for an existing image

Instead of uploading a new image, select an image that is already stored in the wiki.

  • Search: Displays recently uploaded images. Enter a search term to search available files in the current wiki and in the Shared resources wiki. The best matches are displayed first.
  • Advanced search: Provides additional search options and filters for finding images.

Configure image settings

Image settings are divided into General settings and Advanced settings.

General settings

General settings with a caption and alternative text for the image
General settings


The general settings define the image caption, alternative text, and other descriptive information.

  • Caption: Displays a caption with framed images and thumbnails. If an image is changed from frameless to framed, enter the caption again.
  • Alternate text: Provides a text alternative for the image. Alternative text is used when the image cannot be displayed and by screen readers. Enter descriptive alternative text that conveys the relevant information provided by the image.

Advanced settings

The advanced settings define the image position, image type, border, and size.The following settings are possible:

Advanced settings with example values
Advanced settings: image position, type, width, and height
  • Position: The Position setting determines how the image is positioned relative to the surrounding text.
    • Wrap text around this item: Enables text wrapping around the image.
      • Left: Displays the image on the left side of the text.
      • Center: Centers the image between paragraphs.
      • Right: Displays the image on the right side of the text.
    • When Wrap text around this item is disabled, the image is displayed between paragraphs without text wrapping.
  • Image type: The Image type setting determines how the image is displayed.
Image type Output Description
Thumbnail
Image type "thumbnail"
Displays the image with a frame and caption. The default width is 300 px. The width can be adjusted. A preview icon indicates that the image can be opened at a larger size.
Frameless
Image type "frameless"
Displays the image without a frame. The width can be adjusted. The caption is not displayed below the image.
Frame
Image type "frame"
Displays the image with a frame and caption. The image is displayed at its full size. The size cannot be adjusted.
Basic Image type "Basic" Displays the image without a frame. The image is displayed at full width and can be resized.
    • By default, images are inserted without text wrapping and are centered.
    • Images inserted by VisualEditor normally link to the Media Viewer. To remove this link, edit the image tag in source editing mode and add an empty link attribute:
      • frameless picture with link (standard): [[File:adult-chair-company-380769.jpg|frameless]]
      • frameless picture without link: [[File:adult-chair-company-380769.jpg|frameless|link=]]
  • Border: Enable or disable the image border.
  • Image size: The Image size setting provides the following options:
    • Standard: Sets the image width to 300 px unless a different standard width is defined in User preferences.
    • Custom: Sets a custom image width.
    • Make full size: Resets the image to its original dimensions.
    • An image cannot be set to a larger dimension than the actual image dimension.

Insert an image using drag and drop

An image can be uploaded and inserted by dragging the file directly from the local file system onto the page in VisualEditor.

Drag-and-drop screenshot
Line indicating the insert position during drag-and-drop

Insert an image using drag and drop:

  1. Open the page in VisualEditor.
  2. Drag the image file onto the page.
  3. Wait until a horizontal line inidcates the insertion position.
  4. Drop the image.

If the horizontal insertion line is not displayed, the image is not uploaded or inserted.

Configure drag-and-drop settings

The default image settings for images inserted by drag and drop can be configured in the Config Manager.

Store images in a wiki

Images are stored in the wiki where they are uploaded. Images uploaded to a subwiki are available within that wiki according to the applicable access permissions.
Images that should be available across wikis can be stored in the Shared resources wiki. Files stored there are available through the file search.

Change an embedded image

An embedded image can be replaced with a different image or updated with a new version of the same image.

Replace an image

Use Change image to replace an embedded image with another image. Replace an embedded image:

  1. Open the page in edit mode.
  2. Double-click the image.
  3. Select Change image.
  4. Select a different image.
  5. Save the page.

Upload a new version of an image

When an existing image has been updated, upload the new version to the file page. For example, upload a new version when an organization chart changes.
Upload a new version of an image:

  1. Open the file page of the image.
  2. Select Upload a new version of this file. The page Special:Enhanced_upload opens.
  3. Select the updated image file or drag it onto the upload area.
  4. Complete the upload.

The new version replaces the previous version of the image. The version history remains available on the file page. By default, pages that contain the image automatically display the new version.

Images can also be displayed in gallery format on a page. You can find the documentation for this at Mediawiki.org