Manual:Extension/VisualEditor/Insert images and Manual:Extension/ContentDroplets: Difference between pages

(Difference between pages)
VisualWikitext
No edit summary
 
No edit summary
 
Line 1: Line 1:
<bookshelf src="Book:User manual" />
{{BSVersion|bsvFrom=4.3|bsvTo=|bsvFeature=ContentDroplets|text=}}
{{DISPLAYTITLE: Insert images}}
{{TOClimit|limit=1}}
==How to insert an image on a page==
To insert additional functionality in a wiki page, you can use Content droplets. Content droplets include tags that were previously accessed from ''Insert > Magic word'' in the editor toolbar. They also provide access to some templates that are preconfigured in the wiki, such as message boxes.
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]]


== Adding a droplet to a page ==
To add a droplet to a page:


The dialog box ''Media Settings'' opens.
# '''Click''' the Content droplets icon in the editor toolbar.
[[File:media_settings_1.0.png|alt=Media settings dialog|center|thumb|385x385px|Media settings dialog]]
# '''Search''' for a droplet name in the search bar of the droplets menu or browse the droplets by category.[[File:droplet menu.png|none|thumb|550x550px]]
# '''Select''' a droplet
# '''Click''' ''Insert''.
{{Messagebox|boxtype=note|icon=|Note text=Some droplets open an inspector menu which contains another ''Insert'' button. Be sure to confirm that button as well.|bgcolor=}} Based on the type of droplet, you can continue with configuring the droplet as needed.


== List of droplets ==
{| class="wikitable" style="width: 100%;"
! style="background-color:rgb(234, 236, 240);text-align:center;width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);padding:8px;" class="" |'''Droplet'''
! style="background-color:rgb(234, 236, 240);text-align:center;width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);padding:8px;" class="" |'''Description'''
!Inserts the following in the page source:
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Attachments]] {{PopImg|file=attachments.png|alt=Screenshot of the attachments area|caption=Attachments output|width=600}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Area for organising attachments
|<code><nowiki><attachments title="Attachments area"></nowiki></code>


After uploading, you can edit the image settings: Details, General Settings, and Advanced Settings.
<code>* <nowiki>[[Media:Financial_Sample.xlsx]]</nowiki></code>


===Details===
<code><nowiki></attachments></nowiki></code>
[[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.
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Booklist
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |List of books based on a filter value
|<code><nowiki><bs:booklist filter="Author:WikiSysop" /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[mediawikiwiki:Extension:Cognitive_Process_Designer|BPMN diagram]] {{PopImg|file=Manual:bpmn-UserFeedback.svg|alt=Screenshot of a BPMN diagram|caption=BPMN diagram|width=600}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Editable BPMN diagram
|<code><nowiki><bpmn name="Test:Erm31642" /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Templates download/ButtonLink|Button]]{{PopImg|file=HW-ButtonLink.png|alt=Screenshot of three colored button links|caption=Links styled as buttons|width=400}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Link that is styled as a button
|<code><nowiki>{{ButtonLink|target=Main Page|label=click me!|format=blue}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[mediawikiwiki:Extension:CategoryTree|Categorytree]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Selected categories are shown in a tree structure
|<code><nowiki><categorytree>TestCat</categorytree></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceChecklist#Creating a checkbox|Checkbox]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Checkbox that can be checked in view mode
|<code><bs:checkbox checked="true" /></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceChecklist#Creating a checkbox|Checklist]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |List that allows to set a value in view mode
|<code><nowiki><bs:checklist type="list" checked="true" list="Template:Status" value="Select status" /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[wikipedia:Help:Displaying_a_formula#Chemistry|Chemical formula]]  {{PopImg|file=chem.png|alt=screenshot of the chemical formula|caption=Chemical formula|width=300}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Display of chemical formulas
|<code><nowiki><chem>H2O</chem></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Circled number
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Number in a circle with customizable color
|<code><nowiki>{{CircledNumber|bgColor=black|fgColor=yellow|number=180}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Reference:SyntaxHighlight|Code]]{{PopImg|file=syntaxhighlight.png|alt=Screenshot of a code area with css syntax|caption=Code area for a css example}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Highlighted section for code examples
|<code><nowiki><syntaxhighlight lang="css"></nowiki></code>


*'''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.
<code>.hi {background:blue;}</code>
*'''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}}


<code><nowiki></syntaxhighlight></nowiki></code>
|-
| style="width:190px;" |[[Manual:Extension/InputBox|Create page]]
| style="width:380px;" |Form field for predefined page creation
|<code><nowiki>{{CreateInput|alignment=left|buttonlabel=Create}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[SMW queries#Content droplet .22Data query.22 v4.3.2B|Data query]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Enables queries on content in the wiki
|<code><nowiki>{{SMWReport|count=10}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Decision {{PopImg|file=droplet decision.png|alt=Example of a decision|caption=Decision output|width=600}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Highlights a decision as a page property
|<code><nowiki>{{Decision|decision=Eat more veggies}}{{Decision|decision=Buy new car}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/DrawioEditor|Diagram]] {{PopImg|file=BlueSpice_system_architecture_high_level.drawio.png|alt=Example of a server structure diagram|caption=Drawio diagram|width=600}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Editable draw.io diagram
|<code><nowiki><drawio filename="Mydiagram"></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[mediawikiwiki:Help:Images#Gallery_syntax|Gallery]] {{PopImg|file=droplet gallery.png|alt=Example of a gallery with three fish|caption=Gallery|width=}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Displays an image gallery
|<code><nowiki><gallery></nowiki></code>


'''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.
<code>File:test1.png</code>
[[File:something_went_wrong.png|alt=Upload error|center|thumb|400x400px|Upload error]]
<br />


===General settings===
<code>File:test.pdf</code>
[[File:media_settings_3.0.png|alt=General settings|center|thumb|424x424px]]
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.
<code><nowiki></gallery></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Templates download/Icon|Icon]]{{PopImg|file=Icon-template.png|alt=Examples of bootstrap icons|caption=Icons template}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Inserts an icon
|<code><nowiki>{{Icon|bi bi-arrow-left-circle}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Templates download/Messagebox|Important Message]]{{PopImg|file=message-important.png|alt=Screenshot of important message|caption=Message of type "important"}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Adds colored panel for a important note
|<code><nowiki>{{Textbox|boxtype=important|header=OMG|text=Important|icon=yes}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceSmartList|Links to this page]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |List of pages that link to this page
|<code><nowiki>{{Whatlinkshere|count=5|sort=time|order=DESC}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Reference:BlueSpiceWhoIsOnline|List of users logged in]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Pop-up with a list of all users that are currently logged in
|<code><nowiki><bs:whoisonlinepopup /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[https://maps.extension.wiki/wiki/Displaying_Leaflet_maps Map]{{PopImg|file=map.png|alt=Screenshot of the map output|caption=Map output with text marker}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Locations can be marked on the map
|<code><nowiki>{{Map|Munich ~ Hello there!|Munich, Germany}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[mediawikiwiki:Help:VisualEditor/User_guide#Editing_mathematical_formulae|Mathematical formula]]{{PopImg|file=math.png|alt=Math formula|caption=Screenshot of a math formula}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Display of mathematical formulas
|<code><nowiki><math>\tfrac{2}{4}</math></nowiki></code>
|-
| style="width:190px;" |Member list
|List of members of a wiki group
|<code><bs:userlist groups="sysop" count="6" /></code>
|-
| style="background-color:rgb(248, 249, 250);text-align:start;width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;color:rgb(32, 33, 34);font-family:Lato, &quot;sans-serif&quot;;font-size:13.9995px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-weight:400;letter-spacing:normal;orphans:2;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px;-webkit-text-stroke-width:0px;text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial;" class="" |[[Templates download/Messagebox|Message]]{{PopImg|file=message.png|alt=Screenshot of a plain message|caption=A plain message}}
| style="background-color:rgb(248, 249, 250);text-align:start;width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;color:rgb(32, 33, 34);font-family:Lato, &quot;sans-serif&quot;;font-size:13.9995px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-weight:400;letter-spacing:normal;orphans:2;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px;-webkit-text-stroke-width:0px;text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial;" class="" |Adds text panel
|<code><nowiki>{{Textbox|boxtype=neutral|header=|text=SDadad|icon=no}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Modal button
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Configurable button which opens a customizable modal dialogue
|<code><nowiki>{{ModalDialog|title=I am a dialog|btnLabel=click me!|body=This is the text|footer=hello world}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceSmartList#Toplist|Most visited pages]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |List of the most visited wiki pages
|<code><nowiki><bs:toplist count="3" period="-" /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceSmartList|New users]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |List of new users in the wiki
|<code><nowiki><bs:newbies count="4" /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Templates download/Messagebox|Note Message]]{{PopImg|file=message-note.png|alt=Screenshot of a note message|caption=Message of type "Note"}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Adds colored panel for a note
|<code><nowiki>{{Textbox|boxtype=note|header=|text=sfsadfasfdsdaf|icon=yes}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceCountThings|Number of characters]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Shows the number of characters or words in a wiki page
|<code><nowiki><bs:countcharacters /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceCountThings|Number of files]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Shows the number of all uploaded files
|<code><nowiki><bs:countfiles /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceCountThings|Number of  pages]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Shows the number of  pages
|<code><nowiki><bs:countarticles /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceCountThings|Number of users]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Shows the number of all users
|<code><nowiki><bs:countusers /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Reference:BlueSpiceWhoIsOnline|Number of users logged in]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Number of currently logged in users
|<code><nowiki><bs:whoisonlinecount /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Reference:BlueSpicePageAccess|Page access]]{{PopImg|file=pageaccess.png|alt=Screenshot of the page access notification banner|caption=Page access notification banner}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Restricts access to the page to the specified groups
|<code><nowiki><bs:pageaccess groups="sysop" /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |PDF page break
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Forces a page break at the set position during PDF export
|<code><nowiki><bs:uepagebreak /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |PDF link
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Link that downloads another wiki page as PDF
|<code><nowiki>{{PDFLink|page=Main Page|template=BlueSpice|label=PDF Link}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |PDF no export
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Content within this section is excluded from the  PDF export
|<code><nowiki><bs:uenoexport>Don't export this text</bs:uenoexport></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Progress
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Visualizes progress against given measurement variables
|<code><nowiki><bs:statistics:progress basecount="2" progressitem="OK" width="150" baseitem="Status:" /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Pros and cons{{PopImg|file=pros and cons.png|alt=Screenshot of the pros and cons template|caption=Pros and cons}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Table for comparing pros and cons
|<code><nowiki>{{ProConList|title-advantages=Advantages|title-disadvantages=Disadvantages|advantages=* It is cheap|disadvantages=* It is sold out}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceSmartList|Recent changes]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |List of recently changed pages
|<code><nowiki>{{RecentChanges|count=5}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceSignHere|Signature]]{{PopImg|file=signatures.png|alt=Screenshot of the signatures button with a signature already added|caption=Signatures button}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |A button to add signatures in view mode
|<code><nowiki><bs:signhere /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceTagSearch|Search field]] {{PopImg|file=Suchfeld standard.png|alt=Screenshot of a search field with suggested results|caption=Search field|width=}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Adds a search field to the page content
|<code><nowiki><bs:tagsearch type="wikipage"  namespace="QM" /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Templates download/Subpages|Subpages]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |List of the subpages of a wiki page
|<code><nowiki>{{Subpages|parentpage=Mypage}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Templates download/Messagebox|Success Message]]{{PopImg|file=message-success.png|alt=Screenshot of a success message|caption=Message of type "success"}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Adds colored panel for a success note
|<code><nowiki>{{Textbox|boxtype=success|header=OMG|text=It works|icon=yes}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceTagCloud|Tag cloud]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Tag cloud based on categories or search queries
|<code><nowiki><bs:tagcloud renderer="list" store="category" /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Templates download/Messagebox|Tip Message]]{{PopImg|file=message-tip.png|alt=Screenshot of a tip message|caption=Message of type "tip"}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Adds colored panel for a tip
|<code><nowiki>{{Textbox|boxtype=tip|header=Tip|text=sfsadf|icon=yes}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceAvatars#Using the .3Cprofileimage.3E tag|User profile]] {{PopImg|file=userprofile.png|alt=Screenshot of the user profile|caption=User profile of type "Short"|width=300}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |A user profile will be included on this page
|<code><nowiki><bs:socialentityprofile username="WikiSysop" rendertype="Short" /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/EmbedVideo|Video]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Embeds video from different platforms
|<code><nowiki><embedvideo service="youtube">JILEkPu61Ao</embedvideo></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpicePagesVisited|Visited pages]]
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |List with visited pages
|<code><nowiki><bs:pagesvisited count="7" maxtitlelength="40" order="time" /></nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Templates download/Messagebox|Warning Message]]{{PopImg|file=message-warning.png|alt=Screenshot of a warning message|caption=Message of type "warning"}}
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Adds colored panel for a warning note
|<code><nowiki>{{Textbox|boxtype=warning|header=Hello|text=|icon=yes}}</nowiki></code>
|-
| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Watchlist
| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Latest changes to pages included in the watch list
|<code><nowiki><bs:watchlist count="5" maxtitlelength="20" order="time" /></nowiki></code>
|}
 
== Example outputs ==
 
=== Attachments ===
<attachments title="Related documents">
 
</attachments>
 
=== Booklist ===
 
=== BPMN diagram ===
<bpmn name="ExampleDiagram" />
 
=== Button ===
{{ButtonLink|external=no|target=Main Page|label=My page|format=blue}}
 
=== Categorytree ===
 
=== Checkbox ===
 
=== Checklist ===
 
=== Chemical formula ===
 
=== Circled number ===
 
=== Code ===
 
=== Create page ===
 
=== Data query ===
 
=== Decision ===
 
=== Diagram ===
 
=== Gallery ===


'''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.
=== Icon ===
<br />


===Advanced settings===
=== Important Message ===
[[File:media_settings_4.0.png|alt=Advanced settings|center|thumb|309x309px|''Advanced settings: position (image alignment), image type'', ''image width'' and ''image height'']]
In the advanced settings, you can set the position (image alignment), image type, image width and image height.


The following settings are possible:
=== Links to this page ===


*'''Position:'''
=== List of users logged in ===
**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:
***''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:
=== Map ===
**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"
=== Mathematical formula ===
|+
 
!Image type
=== Member list ===
!Output
 
!Description
=== Message ===
|-
 
|Thumbnail
=== Modal button ===
|[[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]]
 
|The preview picture shows the image with a standard width of 300px. The width can be adjusted as required.
=== Most visited pages ===
 
=== New users ===
 
=== Note Message ===
 
=== Number of characters ===
 
=== Number of files ===
 
=== Number of pages ===
 
=== Number of users ===
 
=== Number of users logged in ===
 
=== Page access ===


=== PDF page break ===


In addition, the caption is displayed below the picture. A preview icon indicates that the image can be viewed in a larger size.
=== PDF link ===
|-
|Frameless
|[[File:Bild.jpg|alternativtext=Bild|centre|frameless|link=https://de.wiki.bluespice.com/wiki/Datei:Bild.jpg]]
|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.
=== PDF no export ===


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.
=== Progress ===


However, the image size and position can be adjusted as needed.
=== Pros and cons ===
|-
|Frame
|[[File:Bild.jpg|alternativtext=Beispiel: Bildtyp frame|none|enframed|300x300px|Dies ist die Beschriftung|link=https://de.wiki.bluespice.com/wiki/Datei:Bild.jpg]]
|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.
=== Recent changes ===
|-
|Basic
|[[File:Bild.jpg|300x300px|link=https://de.wiki.bluespice.com/wiki/Datei:Bild.jpg]]
|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.
=== Signature ===


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


*'''Image size:'''
=== Subpages ===
**''Standard:'' sets the image width to 300px (unless the standard width has been changed in the [[Manual:Preferences|user preferences]]).
**''Custom:'' allows setting a custom size.
**''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.


== <span class="mw-headline" style="box-sizing: border-box; -webkit-print-color-adjust: exact !important;" id="Drag-and-drop_Einbindung">Inserting images with drag-and-drop</span> ==
=== Success Message ===
In visual edit mode, an image can be dragged directly from the file folder into the wiki with the mouse.


=== Drag-and drop settings {{Bsvs|bsvFrom=4.3|bsvTo=|bsvFeature=}} ===
=== Tag cloud ===
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|Config Manager.]]
<bs:tagcloud renderer="list" store="category" width="100%" showcount="true" minsize="5" maxsize="30" />


==Images and namespaces==
=== Tip Message ===
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.  
{{Textbox|boxtype=tip|header=|text=This is a tip message.|icon=yes}}


In the upload dialog, the namespace field always suggests the namespace of the current page for the image upload.
=== User profile ===


==Changing an embedded image==
=== Video ===
'''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.
=== Visited pages ===


[[en:{{FULLPAGENAME}}]]
=== Warning Message ===
[[de:VisualEditor/Bilder]]


[[Category:Editing]]
=== Watchlist ===
[[Category:User]]
{{translation}}
[[Category:Getting started]]

Revision as of 13:17, 21 June 2023

ContentDroplets is available from BlueSpice 4.3.

To insert additional functionality in a wiki page, you can use Content droplets. Content droplets include tags that were previously accessed from Insert > Magic word in the editor toolbar. They also provide access to some templates that are preconfigured in the wiki, such as message boxes.

Adding a droplet to a page

To add a droplet to a page:

  1. Click the Content droplets icon in the editor toolbar.
  2. Search for a droplet name in the search bar of the droplets menu or browse the droplets by category.
    droplet menu.png
  3. Select a droplet
  4. Click Insert.
Note:Some droplets open an inspector menu which contains another Insert button. Be sure to confirm that button as well.
Based on the type of droplet, you can continue with configuring the droplet as needed.

List of droplets

Droplet Description Inserts the following in the page source:
Attachments
Attachments output
 		Area for organising attachments <attachments title="Attachments area">

* [[Media:Financial_Sample.xlsx]]

</attachments>

Booklist List of books based on a filter value <bs:booklist filter="Author:WikiSysop" />
BPMN diagram
BPMN diagram
 		Editable BPMN diagram <bpmn name="Test:Erm31642" />
Button
Links styled as buttons
 		Link that is styled as a button {{ButtonLink|target=Main Page|label=click me!|format=blue}}
Categorytree Selected categories are shown in a tree structure <categorytree>TestCat</categorytree>
Checkbox Checkbox that can be checked in view mode
Checklist List that allows to set a value in view mode <bs:checklist type="list" checked="true" list="Template:Status" value="Select status" />
Chemical formula
Chemical formula
 		Display of chemical formulas <chem>H2O</chem>
Circled number Number in a circle with customizable color {{CircledNumber|bgColor=black|fgColor=yellow|number=180}}
Code
Code area for a css example
 		Highlighted section for code examples <syntaxhighlight lang="css">

.hi {background:blue;}

</syntaxhighlight>

Create page Form field for predefined page creation {{CreateInput|alignment=left|buttonlabel=Create}}
Data query Enables queries on content in the wiki {{SMWReport|count=10}}
Decision
Decision output
 		Highlights a decision as a page property {{Decision|decision=Eat more veggies}}{{Decision|decision=Buy new car}}
Diagram
Drawio diagram
 		Editable draw.io diagram <drawio filename="Mydiagram">
Gallery
Gallery
 		Displays an image gallery <gallery>

File:test1.png

File:test.pdf

</gallery>

Icon
Icons template
 		Inserts an icon {{Icon|bi bi-arrow-left-circle}}
Important Message
Message of type "important"
 		Adds colored panel for a important note {{Textbox|boxtype=important|header=OMG|text=Important|icon=yes}}
Links to this page List of pages that link to this page {{Whatlinkshere|count=5|sort=time|order=DESC}}
List of users logged in Pop-up with a list of all users that are currently logged in <bs:whoisonlinepopup />
Map
Map output with text marker
 		Locations can be marked on the map {{Map|Munich ~ Hello there!|Munich, Germany}}
Mathematical formula
Screenshot of a math formula
 		Display of mathematical formulas <math>\tfrac{2}{4}</math>
Member list List of members of a wiki group
Message
A plain message
 		Adds text panel {{Textbox|boxtype=neutral|header=|text=SDadad|icon=no}}
Modal button Configurable button which opens a customizable modal dialogue {{ModalDialog|title=I am a dialog|btnLabel=click me!|body=This is the text|footer=hello world}}
Most visited pages List of the most visited wiki pages <bs:toplist count="3" period="-" />
New users List of new users in the wiki <bs:newbies count="4" />
Note Message
Message of type "Note"
 		Adds colored panel for a note {{Textbox|boxtype=note|header=|text=sfsadfasfdsdaf|icon=yes}}
Number of characters Shows the number of characters or words in a wiki page <bs:countcharacters />
Number of files Shows the number of all uploaded files <bs:countfiles />
Number of pages Shows the number of pages <bs:countarticles />
Number of users Shows the number of all users <bs:countusers />
Number of users logged in Number of currently logged in users <bs:whoisonlinecount />
Page access
Page access notification banner
 		Restricts access to the page to the specified groups <bs:pageaccess groups="sysop" />
PDF page break Forces a page break at the set position during PDF export <bs:uepagebreak />
PDF link Link that downloads another wiki page as PDF {{PDFLink|page=Main Page|template=BlueSpice|label=PDF Link}}
PDF no export Content within this section is excluded from the PDF export <bs:uenoexport>Don't export this text</bs:uenoexport>
Progress Visualizes progress against given measurement variables <bs:statistics:progress basecount="2" progressitem="OK" width="150" baseitem="Status:" />
Pros and cons
Pros and cons
 		Table for comparing pros and cons {{ProConList|title-advantages=Advantages|title-disadvantages=Disadvantages|advantages=* It is cheap|disadvantages=* It is sold out}}
Recent changes List of recently changed pages {{RecentChanges|count=5}}
Signature
Signatures button
 		A button to add signatures in view mode <bs:signhere />
Search field
Search field
 		Adds a search field to the page content <bs:tagsearch type="wikipage" namespace="QM" />
Subpages List of the subpages of a wiki page {{Subpages|parentpage=Mypage}}
Success Message
Message of type "success"
 		Adds colored panel for a success note {{Textbox|boxtype=success|header=OMG|text=It works|icon=yes}}
Tag cloud Tag cloud based on categories or search queries <bs:tagcloud renderer="list" store="category" />
Tip Message
Message of type "tip"
 		Adds colored panel for a tip {{Textbox|boxtype=tip|header=Tip|text=sfsadf|icon=yes}}
User profile
User profile of type "Short"
 		A user profile will be included on this page <bs:socialentityprofile username="WikiSysop" rendertype="Short" />
Video Embeds video from different platforms <embedvideo service="youtube">JILEkPu61Ao</embedvideo>
Visited pages List with visited pages <bs:pagesvisited count="7" maxtitlelength="40" order="time" />
Warning Message
Message of type "warning"
 		Adds colored panel for a warning note {{Textbox|boxtype=warning|header=Hello|text=|icon=yes}}
Watchlist Latest changes to pages included in the watch list <bs:watchlist count="5" maxtitlelength="20" order="time" />

Example outputs

Attachments


Booklist

BPMN diagram

ExampleDiagram
empty bpmn diagram

Button

My page


Categorytree

Checkbox

Checklist

Chemical formula

Circled number

Code

Create page

Data query

Decision

Diagram

Gallery

Icon

Important Message

Links to this page

List of users logged in

Map

Mathematical formula

Member list

Message

Modal button

Most visited pages

New users

Note Message

Number of characters

Number of files

Number of pages

Number of users

Number of users logged in

Page access

PDF page break

PDF link

PDF no export

Progress

Pros and cons

Recent changes

Signature

Search field

Subpages

Success Message

Tag cloud

Tip Message

This is a tip message.


User profile

Video

Visited pages

Warning Message

Watchlist



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=6344"
No categories assignedEdit

Discussions