Created page with "{{DISPLAYTITLE: Insert images}} ==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 (+) > Images and media''. You can search for an existing image or upload a new image. === Uploading an image === After selecting your image, click "Upload". The dialog box '..."
Images can be uploaded, inserted, and formatted in VisualEditor. Existing images can also be searched and inserted.
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 (+) > Images and media''.
==Insert an image==
Images can be inserted from the '''Insert''' (+) menu or by dragging an image file onto the page.<br>
You can search for an existing image or upload a new image.
'''Insert an image''':
#Select '''Insert''' (+) > '''Images and media'''.
=== Uploading an image ===
#Search for an existing image or select '''Upload''' to upload a new image.
After selecting your image, click "Upload". The dialog box ''Media Settings'' opens.
#Select the image.
#Configure the image settings.
# '''Select''' an image from your local drive.
#Select '''Insert'''.
# '''Click''' ''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]]
=== Upload an image ===
# '''Provide''' the information in the dialog as needed.
When uploading a new image, provide the required information in the '''Media settings''' dialog.
#* '''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.
# Select '''Select a file''' and choose an image from the local file system.
#*'''Name:''' Choose a name that makes it easy to find the image later during an image search. Or simply leave the current file name.
# 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]]
#*'''Description:''' The description is mainly useful for photos or infographics when the image name does not adequately describe the image content.
# Enter or change the following information as needed:
#*'''Categories:''' Here, the picture can be assigned to categories.
#*'''Name:''' Defines the file name. Use a descriptive name that makes the image easy to find.
# '''Click''' ''Save''. The image is now uploaded to the wiki.
#*'''Description:''' Describes the image. A description is particularly useful for photos or infographics when the file name does not adequately describe the content.
'''Error message when saving''': If the image already exists, an error message is displayed. In this case, you need to upload a new version from the file versioning page of the image or rename the new image if both images should be used in the wiki.{{Filename}}
#*'''Categories:''' Assigns categories to the image.
# Select '''Save'''. <br>
The image is uploaded to the wiki. <br>
=== Image search ===
'''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.
Instead of uploading a new image, you can select an already uploaded image.
{{Filename}}
=== Search for an existing image ===
* '''Search tab:''' The search tab shows the images that were last uploaded by you. Entering a search term searches all uploaded files and displays the best matches for your search term first.
Instead of uploading a new image, select an image that is already stored in the wiki.
* '''Advanced search:''' The advanced search allows to search for images and to filter by some additional image properties.
* '''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.
===General settings===
===Configure image settings===
In the general settings, the image descriptions are added.[[File:media_settings_3.0.png|alt=General settings with a caption an the alternative text for the image|center|thumb|344x344px|General settings]]
Image settings are divided into '''General settings''' and '''Advanced settings'''.
====General settings====
[[File:visualeditor-media-general-settings.png|alt=General settings with a caption and alternative text for the image|center|thumb|344x344px|General settings]]<br>
'''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.
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:''' 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.
* '''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.
<br />
====Advanced settings====
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]]
===Advanced settings===
*'''Position:''' The '''Position''' setting determines how the image is positioned relative to the surrounding text.
In the advanced settings, you can set the position (image alignment), image type, image width and image height.
**'''Wrap text around this item:''' Enables text wrapping around the image.
*** '''Left:''' Displays the image on the left side of the text.
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'']]
*** '''Center:''' Centers the image between paragraphs.
*** '''Right:''' Displays the image on the right side of the text.
*'''Position:'''
** When '''Wrap text around this item''' is disabled, the image is displayed between paragraphs without text wrapping.
**Wrap text around this item: If unchecked, the image is left-aligned between two paragraphs. If checked, one of the following positions can be selected:
*'''Image type''': The '''Image type''' setting determines how the image is displayed.
***''Left:'' The image is displayed on the left side of the text. The content surrounds the image.
***''Center:'' The image is displayed centered between two paragraphs.
***''Right:'' The image is displayed to the right of the text. The content surrounds the image.
*'''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"
{| class="wikitable"
|+
|+
Line 55:
Line 47:
! style="" |Description
! style="" |Description
|-
|-
| 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="" |The preview picture shows the image with a standard width of 300px. The width can be adjusted as required.
| 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.
In addition, the caption is displayed below the picture. A preview icon indicates that the image can be viewed in 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="" |The frameless version shows the picture without a frame. The width can be adjusted as required (here we set the example to 300px).
| style="" |Displays the image without a frame. The width can be adjusted. The caption is not displayed below the image.
The caption does not appear below the picture.
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.
However, the image size and position can be adjusted as needed.
|-
|-
| 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="" |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.
| style="" |Displays the image with a frame and caption. The image is displayed at its full size. The size cannot be adjusted.
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="" |The basic version is like the frameless version.
| style="" |Displays the image without a frame. The image is displayed at full width and can be resized.
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.
|}
|}
**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 <code>link</code> attribute:
***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>
*'''Border:''' To enable or disable the borders on this picture
*'''Border:''' Enable or disable the image border.
*'''Image size:'''
*'''Image size:''' The '''Image size''' setting provides the following options:
**''Standard:'' sets the image width to 300px (unless the standard width has been changed in the [[Manual:Preferences|user preferences]]).
**'''Standard:''' Sets the image width to 300 px unless a different standard width is defined in [[Preferences|User preferences]].
**''Custom:'' allows setting a custom size.
**'''Custom:''' Sets a custom image width.
**''Make full size:'' resets the size to the actual image size. '''Note:''' An image cannot be set to a larger dimension than the actual image dimension.
**'''Make full size:''' Resets the image to its original dimensions.
** An image cannot be set to a larger dimension than the actual image dimension.
== Inserting images with drag-and-drop ==
In visual edit mode, an image can be dragged directly from the file folder into the wiki with the mouse. It is important that the position for inserting the image shows a horizontal line before you drop the image. Otherwise the image will not be uploaded or inserted.
[[File:drag and drop.png|alt=Drag and drop screenshot|center|thumb|650x650px|Line indicating the insert position during drag-and-drop]]
=== Drag-and drop settings ===
The standard image settings that should be applied when placing an image via drag-and-drop can be adjusted in the [[Manual:Extension/BlueSpiceConfigManager#EnhancedUpload v4.3+|Config Manager.]]
==Images and namespaces==
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.
In the upload dialog, the namespace field always suggests the namespace of the current page for the image upload.
==Changing an embedded image==
'''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.
'''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.
== 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.
[[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''':
#Open the page in VisualEditor.
#Drag the image file onto the page.
#Wait until a horizontal line inidcates the insertion position.
#Drop the image. <br>
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 [[Extension/BlueSpiceConfigManager|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. <br>
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''':
#Open the page in edit mode.
#Double-click the image.
#Select '''Change image'''.
#Select a different image.
#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. <br>
'''Upload a new version of an image''':
#Open the file page of the image.
#Select '''Upload a new version of this file'''. The page '''Special:Enhanced_upload''' opens.
#Select the updated image file or drag it onto the upload area.
#Complete the upload. <br>
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.
== Display images as a gallery ==
== Display images as a gallery ==
Images can also be displayed in gallery format on a page. You can find the documentation for this at https://www.mediawiki.org/wiki/Help:Images/en#Rendering_a_gallery_of_images
Images can also be displayed in gallery format on a page. You can find the documentation for this at [https://www.mediawiki.org/wiki/Help:Images/en#Rendering_a_gallery_of_images Mediawiki.org]
[[en:{{FULLPAGENAME}}]]
[[de:Handbuch:Erweiterung/VisualEditor/Bilder]]
[[Category:Editing]]
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.
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.
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.
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:
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.
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.
Wait until a horizontal line inidcates the insertion position.
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:
Open the page in edit mode.
Double-click the image.
Select Change image.
Select a different image.
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:
Open the file page of the image.
Select Upload a new version of this file. The page Special:Enhanced_upload opens.
Select the updated image file or drag it onto the upload area.
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.
Display images as a gallery
Images can also be displayed in gallery format on a page. You can find the documentation for this at Mediawiki.org
