Home Navigationspfeil Doku und Anleitung Navigationspfeil Bilder einfügen

Einfügen von Abbildungen

Wie binden Sie eine Abbildung in Ihre Seite ein? Dafür gibt es zwei Methoden! Zum einen gelingt es per Symbolbefehl, ganz ähnlich wie in Mambo oder Joomla. Zum anderen auch per Drag & Drop

Grafik einfügen per Symbolbefehl

Basissyntax

{Grafikname}

Erweiterte Syntax

{Grafikname[,Alternativtext][,Ausrichtung]}

Beispiele

Einbinden einer Grafik mit Alternativtext:

{sunset.jpg,Sonnenuntergang auf Hiddensee}

Folgender Quellcode entsteht:

<p class='image'><img src='images1/sunset.jpg' width="511" height="386" 
alt='Sonnenuntergang auf Hiddensee' title='Sonnenuntergang auf Hiddensee' 
border='0' /></p>

Beachten Sie die spezielle Stilklasse image (<p class="image"></p>). Sie können sie zum Gestalten der Abbildungen verwenden (Rahmen- und Hintergrundeffekte usw.). Dafür benötigen Sie allerdings CSS-Kenntnisse.

Hintergrund: Jede Abbildung muss mit Alternativtext eingebunden werden (hier: alt='Sonnenuntergang auf Hiddensee'), das verlangt der HTML-Standard. Wenn Sie den Alternativtext weglassen, verwendet CMBasic den Dateinamen als Alternativtext. CMBasic setzt außerdem den Titel (Attribut title) und verwendet den gleichen Wert wie für den Alternativtext (hier: title='Sonnenuntergang auf Hiddensee' border='0').

Einbinden einer rechts ausgerichteten Grafik mit Textfluss und Alternativtext:

Die CMS-PuppeKümmern wir uns nun um den letzten Parameter. Er hilft bei der Ausrichtung der Abbildung. Wie wäre es mit einer 1? Sie richtet das Bild rechtsbündig aus. Der Inhalt fließt links daran vorbei. So wie bei diesem Absatz.

{puppe.jpg,Die CMS-Puppe,2}

Folgender Quellcode entsteht:

<img src='images1/puppe.jpg' 
width="150" height="199" alt='Die CMS-Puppe' 
title='Die CMS-Puppe' align='left' border='0' />

Alle Parameter für die Ausrichtung im Überblick

Zahl Ausrichtung
keineals Absatz
1 linksbündig, der Rest des Inhalts fließt rechts vorbei (Stilklasse imageleft)
2rechtsbündig, der Rest des Inhalts fließt links vorbei (Stilklasse imageright)
3wie ein Zeichen, ohne Tags drumherum

Der Parameter 3 ist dann ideal, wenn Sie die Grafik mit eigenen Stilanweisungen ausrichten wollen.

Grafik nicht vorhanden?

Sollten Sie die Grafik versehentlich löschen oder sich beim Bildnamen verschrieben haben, werden Sie gewarnt. Dann schreibt das Skript »Bild xyz nicht vorhanden!« in die Seite.

Grafik einbinden durch Ziehen

Besonders raffiniert ist jedoch das Einbinden per Drag & Drop. Klicken Sie dafür rechts oben auf den Link Bilder. Die Bildverwaltung öffnet sich in einem separaten Fenster. Gehen Sie in den gewünschten Ordner und ziehen Sie die Abbildung per Drag & Drop in den TinyMCE-Editorbereich. Zumindest bei Internet Explorer und ggf. auch bei Firefox wird nun der korrekte Pfad eingefügt. Der Internet Explorer zeigt die Grafik sogar direkt im Formularfeld in einer Vorschau an!

Das Ausrichten der Abbildung und das Zuweisen eines alternativen Texts gelingt nun über die Schaltfläche Insert/edit image aus TinyMCE.

© CMBasic.de