Cookie consent settingsAccept all
  • Skip to header bar
  • Skip to main navigation
  • Skip to page tools
  • Skip to work area
  • New process
  • Overview
    • Files
    • Processes
    • Ratings
    • Recommendations
    • WikiExplorer
    • Workflows
  • Login
Book navigation as tree structure
Main navigation
User manual
PreviousNext
  • 1Introduction
    • 2Working with pages
      • 2.1Create
        • 2.2Visual editing
          • 2.2.1Links
            • 2.2.2Attachments
              • 2.2.3Images
                • 2.2.4Diagrams (drawio)
                  • 2.2.5Business process diagrams (BPMN)
                    • 2.2.6Tabs
                    • 2.3Wikitext editing
                      • 2.4Collaborative editing
                        • 2.5Rename/move
                          • 2.6Delete
                            • 2.7Version history
                              • 2.8Page discussions
                                • 2.9PDF export
                                • 3Content organisation
                                  • 4My tasks
                                    • 5Books
                                      • 6Quality management
                                        • 7Personalization
                                          • 8Search
                                            • 9Social Wiki
                                              • 10Wiki maintenance
                                                • 11Appendix: Magic words
                                                  • 12Appendix: Extension list
                                                    Edit book
                                                    Main navigation contains tabs, main links and MediaWiki sidebar
                                                    To book navigation
                                                    Entrypoints
                                                    • Main Page
                                                    • Pages
                                                    • Books
                                                    • Blogs
                                                    • Recent changes
                                                    Quick Links
                                                    • All topics
                                                    • Video-Tutorials
                                                    • Templates download
                                                    Documentation
                                                    • Security Advisories
                                                    • Installation
                                                    • Releases
                                                    • Software catalog
                                                    • Trust & Safety
                                                    Books
                                                    • User manual
                                                    • Admin manual
                                                    • Semantic MediaWiki basics
                                                    Participate
                                                    • BlueSpice community
                                                    You are viewing an old version of this page. Return to the latest version.
                                                    This is the version of 22 November 2022, 15:14 by Redaktion
                                                    PreviousNext
                                                    • Manual
                                                    • Extension
                                                      • VisualEditor
                                                        • Insert images
                                                        Last edited 3 weeks ago
                                                        by Laetitia Huyghe

                                                        2.2.3 Images

                                                        • English
                                                        • Deutsch
                                                        Revision as of 15:14, 22 November 2022 by Redaktion (talk | contribs)
                                                        (diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

                                                        Contents

                                                        • 1 How to insert an image on a page
                                                          • 1.1 Details
                                                          • 1.2 General settings
                                                          • 1.3 Advanced settings
                                                        • 2 Images and namespaces
                                                        • 3 Changing an embedded image

                                                        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.

                                                        Insert media
                                                        Insert media


                                                        The dialog box Media Settings opens.

                                                        Media settings dialog
                                                        Media settings dialog


                                                        After uploading, you can edit the image settings: Details, General Settings, and Advanced Settings.

                                                        Details

                                                        Media settings
                                                        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.
                                                        • 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.
                                                        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.


                                                        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.

                                                        Upload error
                                                        Upload error


                                                        General settings

                                                        General settings

                                                        In the general settings, the image descriptions are added.

                                                        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.

                                                        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.

                                                        Advanced settings

                                                        Advanced settings
                                                        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): [[File:adult-chair-company-380769.jpg|frameless]]
                                                          • frameless picture without link: [[File:adult-chair-company-380769.jpg|frameless|link=]]
                                                        Image type Output Description
                                                        Thumbnail
                                                        Example of a thumbnail image
                                                        This is the caption
                                                        The preview picture shows the image with a standard width of 300px. The width can be adjusted as required.


                                                        In addition, the caption is displayed below the picture. A preview icon indicates that the image can be viewed in a larger size.

                                                        Frameless
                                                        alternativtext=Bild
                                                        alternativtext=Bild
                                                        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.

                                                        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.

                                                        Frame
                                                        Dies ist die Beschriftung
                                                        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 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.

                                                        • Image size:
                                                          • Standard: sets the image width to 300px (unless the standard width has been changed in the user preferences).
                                                          • Custom: allows setting a custom size.
                                                          • Make full size: resets the size to the actual image size.

                                                        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.



                                                        PDF exclude - start

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

                                                        PDF exclude - end
                                                        Retrieved from "https://en.wiki.bluespice.com/w/index.php?title=Manual:Extension/VisualEditor/Insert_images&oldid=5310"
                                                        • Editing
                                                        • Getting started
                                                        • User
                                                        Edit
                                                        Page actions and tools navigaiton contains tabs, toolbox and actions
                                                        Actions
                                                        • Refresh
                                                        • Copy URL
                                                        • E-Mail
                                                        • QR code
                                                        Details
                                                        • View history
                                                        • Page information
                                                        • Browse properties
                                                        • ... all actions
                                                        • Privacy policy
                                                        • Terms of service
                                                        • Disclaimer
                                                        • Imprint
                                                        • Accessibility
                                                        • About
                                                        • Analysis service
                                                        • Edit preview settings
                                                        • Powered by MediaWiki
                                                        • Powered by BlueSpice
                                                        • Powered by Semantic MediaWiki
                                                        • Creative Commons License