Bilder/Fotos

Bilder einzufügen funktioniert recht einfach mit dem installierten Editor.

Ich unterteile dieses Einfügen jedoch in 2 Teile. Warum?

Wenn ein Bild nur in eine Seite eingefügt wird, dann reicht die 1. Art. Soll dann noch Text darüber oder darunter gesetzt werden. reicht dies auch, so wie ich es in Teil 1 beschreibe.

Soll der Text jedoch um das Bild "herumfließen", wird es aufwändiger. Das beschreibe ich dann in Teil 2.

Teil 1:

1) Bild hochladen
2) Einloggen
3a) Bild einfügen
4) Alternativen Text eingeben
5) Speichern

1) Bild hochladen:

Laden sie Bilder und Fotos mit dem entsprechenden FTP-Programm in den entsprechenden Ordner auf ihrem Server. Bei CMSimple_XH ist dies "../images" und bei CMSimple 4 ist dies "./userfiles/images/".

2) Einloggen

Loggen Sie sich als Admin ein. Erstellen Sie eine Seite und beginnen Sie anschließend mit der Bearbeitung (in diesem Falle: Einfügen eines Bildes).

3a) Bild einfügen

Sie sehen den Editor vor sich. Hier klicken Sie auf das jetzt schwarz umrandete Symbol. Wenn Sie mit der Maus darüber verweilen, erscheint der Hinweis "Bild einfügen/verändern" .

Hier ist nun der Filebrowser im "Bild einfügen Dialog": Nach dem Klick auf den Button ("Bild einfügen/verändern") öffnet sich dieses Auswahlfenster. Hier klicken Sie auf das jetzt schwarz umrandete Symbol. Wenn Sie mit der Maus darüber verweilen, erscheint der Hinweis "Durchsuchen". Danach öffnet sich das nächste Auswahlfenster ...

Finden Sie ihr Bild/Foto nun nicht aufgelistet, so wurde es nicht hochgeladen bzw. es wurde in ein anderes Verzeichnis geladen.

Als Beispiel habe ich nun das Foto Berlin ausgewählt und

neben dem Dateinahmen erscheint nun auch ein kleines Vorschaubild.

Die Entwickler haben das extra so gemacht, damit man nicht so viel scrollen muss, wenn da viele Bilder liegen.Aber es gibt auch diese Möglichkeit ...

3b) Ständige Vorschau des Bildes

Es gibt auch die Möglichkeit, dass dieses Vorschaubild ständig angezeigt wird. Das macht dann Sinn, wenn mehrere Redaktionsmitglieder an der Seite arbeiten und sich nicht konsequent an bestimmte "Vereinbarungen" oder "Vorgaben" (z.B. sinnvolle Bezeichnungen) halten.

... Wenn Sie das nicht so haben wollen, muss im Ordner "css" die Datei "core.css" mit einem Editor geöffnet werden. Dann hängen Sie ganz hinten dieses an

und speichern es ab. Anschließend laden Sie die geänderte Datei auf Ihren Server hoch und ersetzen die dort vorhandene. Das muss dann aber nach jedem Update neu gemacht werden, weil die "core.css" im Update (CMSimple 1.5.7 => 1.5.x oder 4.0 => 4.x.x) enthalten ist.

So sieht das Ergebnis aus:

Weitergehende Infos hier

4) Alternativen Text eingeben

Das Bild ist ausgewählt. Sie können noch verschiedene Einstellungen vornehmen (Das können Sie selbst austesten). Aber fürs 1. reicht es so. Bevor Sie nun den Button "Einfügen" drücken (können), ist es sehr sinnvoll, noch einen Alternativ-Text einzugeben [sonst erscheint ein entsprechendes Hinweisfenster].

5) Speichern

Hier klicken Sie auf das jetzt schwarz umrandete Symbol. Wenn Sie mit der Maus darüber verweilen, erscheint der Hinweis "Speichern".

Hinweis: Nach dem Speichern sollten Sie sich zusätzlich auch mal ausloggen. So werden die Dateien "content.php" und "pagedata.php" zusätzlich auf dem Server gesichert und es werden noch Backups angelegt.

Teil 2:

Soll der Text um das Bild "herumfließen", wird es aufwändiger. Das beschreibe ich nun.

1) Bild hochladen

Laden sie Bilder und Fotos mit dem entsprechenden FTP-Programm in den entsprechenden Ordner auf ihrem Server. Bei CMSimple_XH ist dies "../images" und bei CMSimple 4 ist dies "./userfiles/images/".

2) Einloggen

Loggen Sie sich als Admin ein. Erstellen Sie eine Seite und beginnen Sie anschließend mit der Bearbeitung (in diesem Falle: Einfügen einer Tabelle).

3) Tabelle einfügen

Nun muss zunächst eine Tabelle erstellt werden. Wenn Sie dies nicht tun, so wird nur eine Zeile unten neben das Bild geschrieben, alle weiteren werden unter das Bild eingefügt. Damit dies jedoch durchgängig geschehen soll, also Text neben Bilder muss eine sogenannte blinde Tabelle erstellt werden. (Blind bedeutet in diesem Fall, dass kein Rahmen zu sehen ist.)

Um eine Tabelle zu erstellen, klicken Sie mit der Maus auf eine leere Zeile; also dorthin, wo diese Tabelle eingefügt werden soll. Dann suchen Sie diesen Button und klicken darauf. Es erscheint ein neues Fenster.

Dies sind die voreingestellten Werte. Wenn Sie nun auf "Einfügen" klicken, wird eine Tabelle erstellt. In diese können Sie Texte und Bilder einfügen. Dann ist es jedoch so, dass bei 2 Bildern nebeneinander scheinbar kein Rand dazwischen ist. Sie kleben also nebeneinander. Um einen Rand zu erhalten, müssen Sie weitere Werte eingeben. Außerdem sollten Sie auch die Breite in % festlegen. (Probieren Sie es bitte aus.)

So wie ich hier auf der seite die Bilder und den Text angordnete, gebe ich nun im nächsten Bild die Werte wieder.

Dies sind die von mir geänderten Werte. Nach dem Klick auf "Einfügen" sehen Sie an der Stelle eine blinde Tabelle mit etwas breiterem Rand. Der Cursor blinkt in der ersten Spalte. Wenn Sie Tabelle beschriften möchten, setzen Sie bitte einen Haken hinter "Beschriftung der Tabelle". Dann wird eine leere Zeile über der Tabelle erzeugt. in der der Cursor mittig auf Eingabe wartet.

So sieht eine "Blinde Tabelle" aus:

Eine Sache müssen Sie nun noch tun. Sie müssen die Schriftart und Schriftgröße einstellen, bevor sie anfangen zu schreiben. Ich schreibe hier alle Texte mit Arial und 14 px und muss bei jeder neuen Tabelle dies vor dem Tippen tun.

4) Bild einfügen

Wenn Sie ein Bild in die Tabelle einfügen möchten, klicken Sie in die entsprechende Spalte, so dass Sie den Cursor dort blinken sehen. Dann folgt nun dies:

Sie sehen den Editor vor sich. Hier klicken Sie auf das jetzt schwarz umrandete Symbol. Wenn Sie mit der Maus darüber verweilen, erscheint der Hinweis "Bild einfügen/verändern" .

Nach dem Klick auf den Button ("Bild einfügen/verändern") öffnet sich dieses Auswahlfenster. Hier klicken Sie auf das jetzt schwarz umrandete Symbol. Wenn Sie mit der Maus darüber verweilen, erscheint der Hinweis "Durchsuchen". Danach öffnet sich das nächste Auswahlfenster ...

Finden Sie ihr Bild/Foto nun nicht aufgelistet, so wurde es nicht hochgeladen bzw. es wurde in ein anderes Verzeichnis geladen. Als Beispiel habe ich nun das Foto Berlin ausgewählt und

neben dem Dateinahmen erscheint nun auch ein kleines Vorschaubild.

5) Alternativen Text eingeben

Das Bild ist ausgewählt. Sie können noch verschiedene Einstellungen vornehmen (das können Sie selbst austesten). Aber fürs 1. reicht es so. Bevor Sie nun den Button "Einfügen" drücken (können), ist es sehr sinnvoll, noch einen Alternativ-Text einzugeben [sonst erscheint ein entsprechendes Hinweisfenster].

6) Speichern

Hier klicken Sie auf das jetzt schwarz umrandete Symbol. Wenn Sie mit der Maus darüber verweilen, erscheint der Hinweis "Speichern".

Danach gehen Sie in den Vorschaumodus und kontrollieren, wie es auschaut, Text und Bild. Elegant finde ich es, wenn der Text nicht übermäßig lang über das Bild hinausragt, sondern mit dem Ende des Bildes auch die Tabelle verlässt und unter der Tabelle weitergeht.

Hinweis: Nach dem Speichern sollten Sie sich zusätzlich auch mal ausloggen. So werden die Dateien "content.php" und "pagedata.php" zusätzlich auf dem Server gesichert und es werden noch Backups angelegt.