Adding an image to an article/de: Difference between revisions

Latest revision as of 05:00, 6 October 2023

Introduction

How best to add images to an article depends on which version of Joomla and which editor are in use. This article has illustrations for Joomla 4, with notes on differences in Joomla 3, and TinyMCE the Joomla default editor. To get started, open an article for editing:

Select Content → Articles in the Administrator menu.
Select the title of the article you wish to edit

After inserting the article text, place the cursor at the location where the image should appear.

Adding a local image

If the image is located in the images folder of your Joomla installation you should insert the image using the CMS Content → Media button In the TinyMCE edit toolbar (In Joomla 3: Select the Image button):

In the popup window, navigate to the image you want to use and click to select it. On selection a form will appear prompting for additional data. In Joomla 4 the form is to the left. In joomla 3 the form is at the bottom (scroll down):

Wähle die gewünschten Bildeinstellungen: Üblicherweise solltest du unbedingt das Feld Bildbeschreibung (Alt Text) ausfüllen. Die anderen Felder werden benutzt um das Aussehen des Bildes mit der eigenen css festzulegen.

"Bild Beschreibung": Dies wird als "alt"-Eigenschaft des Bildes dargestellt, eine wichtige Funktion für Barrierefreiheit und die Erfüllung der Web-Standards. In Joomla 3 wurde es als '"Bildtitel"' bezeichnet.
"Bild Beschreibung": Wenn ein Bild ohne Steuerelemente benutzt wird, können hier einige benutzerdefinierte Klassen eingefügt werden. Z.B. in Joomla 4 "float-end ms-2 mb-1" richtet das Bild rechts aus, umflossen vom Text mit einem Rand links und unten, damit der Text nicht das Bild berührt. In Joomla 3 entspricht das dem Stil "pull-right".
"Figure Class" : wenn ein Steuerelement festgelegt wurde, könnte eine Ausrichtungs Klasse zur Darstellung hinzugefügt werden. Dies ist ein html tag, der den img tag umschließt. Beachte das in Cassiopeia Ränder über das Template Style Sheet geregelt werden.

- Bildbeschriftung: Wird unter dem Bild als Bild Titel angezeigt.

In Joomla 3

- Ausrichtung: Bildausrichtung festlegen. Standartmäßig ist es auf Nicht definiert gesetzt.
- Beschriftung Klasse: Fügt die eingegebene Klasse an das figcaption Element an.

Klick den Einfügen Media Button, um das Bild einzufügen. Das Bild-Einfügefenster wird geschlossen und das Bild erscheint im Editor. Oder klick den "Abbrechen" Button um das Bild-Einfügefenster zu verlassen.

"Tip:" wähle den Umschalt Editor Button um die hinzugefügten Bild- und Beschriftungsstile zu sehen.

Using Drag and Drop for Local images

In both Joomla 4 and Joomla 3 you can drag an image from the desktop or a file browser directly into the article text and the image will be uploaded to the media folder and placed in the article. The only snag is that all such uploaded images will be placed in the same media folder. The location of the Images Directory used for upload and whether this feature is enabled (On by default) are set in the TinyMCE configuration Options.

Adding a remote image

If the image you wish to use is not in the images folder of your Joomla installation a slightly different procedure is needed.

Select Insert → Image from the TinyMCE toolbar to open a dialog box. In Joomla 3, use the Image icon and the same dialog as used for local images.
Insert the image url in the Source field.
Fill out the other fields as required.
Advanced provides some formatting options applied as in-line styles. Experiment with 1rem, 2, groove. (This feature is incomplete)

Using Drag and Drop for Remote images

You can drag and drop an image from a remote web site directly into your article text. But be aware that this may also copy the image container html with class statements not valid for your site.

Bilder einfügen mit dem "Bild-Einfügefenster"

Du kannst zum Hochladen neuer Bilder das Medienfenster benutzen (das Bildfenster in Joomla 3) Öffne zuerst den Media Browser und gehe zu dem Ordner, in dem du die neuen Bilder für den aktuellen Beitrag speichern willst. Im Medien Bildschirm wähle den Hochladen Button oben links (in Joomla 3 scroll runter zum Rand zum Durchsuchen Button), um den Dateibrowser zu öffnen.

Wähle die Bilder aus, die Du hochladen willst. Klicke auf "Öffnen" im Datei-Browser um die Auswahl zu bestätigen. Hinweis: Stil und Layout des Datei-Browsers hängt davon ab, welchen Browser und welches Betriebssystem Du verwendest.

In Joomla 4 wird sofort hochgeladen, in Joomla 3 wähle den Hochladen starten Button.

Die ausgewählten Datei(en) erscheinen in alphabetischer Reihenfolge im Medien/Bild Fenster.
- Wenn die Datei fertig hochgeladen ist, erscheint eine grüne Bestätigungsnachricht oben im Fenster.
Du kannst nun das hochgeladene Bild wie zuvor beschrieben auswählen und einfügen.

@@ Line 1: / Line 1: @@
 <noinclude><languages /></noinclude>
-Bilder werden in einem Artikel mit Hilfe des ''Bild'' Button unterhalb des Editorfensters im Beitrag bearbeiten Fenster eingefügt. Beachte: Es ist möglich ein Bild auch mit dem Editor einzufügen. Mit dieser Funktion lassen sich jedenfalls auf einfache Weise Bilder einfügen, die im ''Bilder'' Verzeichnis deiner Joomla Installation gespeichert sind.
+== Introduction ==
-#Für die Bearbeitung von Artikeln gibt es folgende Möglichkeiten:
+How best to add images to an article depends on which version of Joomla and which editor are in use. This article has illustrations for Joomla 4, with notes on differences in Joomla 3, and TinyMCE the Joomla default editor. To get started, open an article for editing:
-#* Klicke '''Inhalt {{rarr}} Beiträge''' im Menü und gehe zum ''Beitragsmanager'', wähle den gewünschten Artikel aus und klicke auf ''Bearbeiten'' in der Symbolleiste.
-#* Klicke den ''Neuer Beitrag'' Button im Kontrollzentrum
-#* Wenn Du im Front-end eingeloggt bist, Du die entsprechenden Rechte hast und den gewünschten zu bearbeitenden Artikel siehst: Klick den ''Bearbeiten'' Button.
-#Setze den Cursor an die gewünschte Stelle, an der Du das Bild anzeigen lassen möchtest und klicke auf den Bild Editor Button am unteren Rand des Bildschirms
-#Das Bild-Einfügefenster öffnet sich über dem Artikel-Bearbeitungsfenster. Wähle ein Bild und klicke auf den Einfüge-Button.
-#*Du kannst auch das Verzeichnis wechseln, indem Du auf die Ordnersymbole klickst.
-#*Verwende das Dropdown-Feld "Verzeichnis", um einen Bildordner auszuwählen. Um auf die nächst höhere Ebene zu wechseln, klicke den Button "Hoch".
-#Wähle die gewünschten Bildeinstellungen:
-#*"Beschreibung": Dies wird als "alt"-Text des Bildes dargestellt, ein wichtiges Merkmal für die Übereinstimmung mit den Web-Standards.
-#*"Bildtitel": Wird als möglicher Beschreibungstext verwendet und als "Title-Tag" im Quelltext ausgegeben.
-#*"Ausrichtung":  Bestimmt die Bildausrichtung. Standardmäßig ist die Ausrichtung "Nicht definiert".
-#*"Bildbeschriftung": Ermöglicht eine Beschreibung, die unter dem Bild angezeigt wird.
-#*"Caption Klasse": Ordnet dem Beschreibungstext eine Klasse zu. Klick den "Einfügen"-Button um das Bild einzufügen. Das "Bild-Einfügefenster wird geschlossen und das Bild wird im Editor angezeigt.
-#*Klicke auf den ''Abbrechen'' Button um im Bildeinfügefenster zu bleiben.
-== Uploading images using the Insert Image screen ==
+*'''Select''' {{rarr|Content,Articles}} in the Administrator menu.
+* '''Select''' the title of the article you wish to edit
-You may also upload new images using the Upload section of the Insert Image screen.
+After inserting the article text, place the cursor at the location where the image should appear.
-#Click the Browse button to open a file browser.
+== Adding a local image ==
-#Select the image files you wish to upload. Click Open in the file browser to confirm the selection. Note: The file browser style and layout depends on the browser and operating system you are using.
-#The selected file(s) appear at the bottom of the Insert Image screen. Click ''Start Upload'' to begin uploading files.
+If the image is located in the images folder of your Joomla installation you should insert the image using the {{rarr|CMS Content, Media}} button In the TinyMCE edit toolbar (In Joomla 3: Select the Image button):
-#*When the upload is complete a green notice will appear at the top of the screen.
+[[File:adding-an-image-to-an-article-cms-content-media.png|800|Adding an image]]
-#You may now select and insert the uploaded image as before.
+In the popup window, navigate to the image you want to use and click to select it. On selection a form will appear prompting for additional data. In Joomla 4 the form is to the left. In joomla 3 the form is at the bottom (scroll down):
+[[File:adding-an-image-to-an-article-selected-image.png|800|Selecting an image]]
+#Wähle die gewünschten Bildeinstellungen: Üblicherweise solltest du unbedingt das Feld Bildbeschreibung (Alt Text) ausfüllen. Die anderen Felder werden benutzt um das Aussehen des Bildes mit der eigenen css festzulegen.
+*"Bild Beschreibung": Dies wird als "alt"-Eigenschaft des Bildes dargestellt, eine wichtige Funktion für Barrierefreiheit und die Erfüllung der Web-Standards. In Joomla 3 wurde es als '"Bildtitel"' bezeichnet.
+*"Bild Beschreibung": Wenn ein Bild ohne Steuerelemente benutzt wird, können hier einige benutzerdefinierte Klassen eingefügt werden. Z.B. in Joomla 4 "float-end ms-2 mb-1" richtet das Bild rechts aus, umflossen vom Text mit einem Rand links und unten, damit der Text nicht das Bild berührt. In Joomla 3 entspricht das dem Stil "pull-right".
+*"Figure Class" : wenn ein Steuerelement festgelegt wurde, könnte eine Ausrichtungs Klasse zur Darstellung hinzugefügt werden. Dies ist ein html tag, der den img tag umschließt. Beachte das in Cassiopeia Ränder über das Template Style Sheet geregelt werden.
+#*'''Bildbeschriftung''': Wird unter dem Bild als Bild Titel angezeigt.
+'''In Joomla 3'''
+#*'''Ausrichtung''': Bildausrichtung festlegen. Standartmäßig ist es auf '''Nicht definiert''' gesetzt.
+#*'''Beschriftung Klasse''': Fügt die eingegebene Klasse an das ''figcaption'' Element an.
+#Klick den ''Einfügen Media'' Button, um das Bild einzufügen. Das Bild-Einfügefenster wird geschlossen und das Bild erscheint im Editor. Oder klick den "Abbrechen" Button um das Bild-Einfügefenster zu verlassen.
+"Tip:" wähle den Umschalt Editor Button um die hinzugefügten Bild- und Beschriftungsstile zu sehen.
+=== Using Drag and Drop for Local images ===
+In both Joomla 4 and Joomla 3 you can drag an image from the desktop or a file browser directly into the article text and the image will be uploaded to the media folder and placed in the article. The only snag is that all such uploaded images will be placed in the same media folder. The location of the Images Directory used for upload and whether this feature is enabled (On by default) are set in the TinyMCE configuration Options.
+== Adding a remote image ==
+If the image you wish to use is not in the images folder of your Joomla installation a slightly different procedure is needed.
+*'''Select''' {{rarr|Insert,Image}} from the TinyMCE toolbar to open a dialog box. In Joomla 3, use the Image icon and the same dialog as used for local images.
+*'''Insert''' the image url in the Source field.
+*'''Fill out''' the other fields as required.
+*'''Advanced''' provides some formatting options applied as in-line styles. Experiment with 1rem, 2, groove. (This feature is incomplete)
+[[File:adding-an-image-to-an-article-insert-edit-image.png|border|Data for a remote image]]
+=== Using Drag and Drop for Remote images ===
+You can drag and drop an image from a remote web site directly into your article text. But be aware that this may also copy the image container html with class statements not valid for your site.
+== Bilder einfügen mit dem "Bild-Einfügefenster" ==
+Du kannst zum Hochladen neuer Bilder das Medienfenster benutzen (das Bildfenster in Joomla 3)
+Öffne zuerst den Media Browser und gehe zu dem Ordner, in dem du die neuen Bilder für den aktuellen Beitrag speichern willst.
+Im Medien Bildschirm wähle den Hochladen Button oben links (in Joomla 3 scroll runter zum Rand zum Durchsuchen Button), um den Dateibrowser zu öffnen.
+#Wähle die Bilder aus, die Du hochladen willst. Klicke auf "Öffnen" im Datei-Browser um die Auswahl zu bestätigen. Hinweis: Stil und Layout des Datei-Browsers hängt davon ab, welchen Browser und welches Betriebssystem Du verwendest.
+In Joomla 4 wird sofort hochgeladen, in Joomla 3 wähle den Hochladen starten Button.
+#Die ausgewählten Datei(en) erscheinen in alphabetischer Reihenfolge im Medien/Bild Fenster.
+#*Wenn die Datei fertig hochgeladen ist, erscheint eine grüne Bestätigungsnachricht oben im Fenster.
+#Du kannst nun das hochgeladene Bild wie zuvor beschrieben auswählen und einfügen.
 <noinclude>
-[[Category:Tutorials]]
+[[Category:Tutorials/de|Tutorials]]
-[[Category:Article Management]]
+[[Category:Article Management/de|Beitragsverwaltung]]
-[[Category:Beginners]]
+[[Category:Beginners/de|Einsteiger]]
 </noinclude>