Fotos in Essays und Pages einfügen

An english version of this article is available on www.brisoft.de/en.

Fügt man in Koken ein Foto in einem Artikel (Essay) oder einer Seite (Page) mit Hilfe der Funktion insert media ein, so wird das Foto immer in voller Breite angezeigt. In der Regel ist das aber nicht erwünscht. Um eine kleinere Version eines Bildes (Thumbnail) einzufügen, müsste man das Bild manuell im HTML-Editor einfügen.

Um dies zu vereinfachen, habe ich dieses Plugin erstellt. Mit dem Plugin ist es möglich, ein Foto auszuwählen und anschließend detailliert die Darstellung zu konfigurieren.

Installation

Zur Installation des Plugins müssen Sie zunächst das angehängte Archiv (zip-Datei) herunterladen und auf Ihrem Rechner entpacken. Anschließend übertragen Sie den Inhalt des Archivs mit einem ftp-Programm in das Verzeichnis storage/plugins Ihrer Koken-Installation.

In der Koken Console sollte das Plugin anschließend unter Settings/Plugins wie folgt angezeigt werden (die Versionsnummer kann abweichen):

Insert (floating) images

Insert (floating) images

Erscheint das Plugin hier nicht, prüfen Sie bitte zunächst, ob es korrekt übertragen wurde. Evtl. müssen Sie auch noch den Koken Sytem Cache löschen. Dazu wechseln Sie in der Koken Console nach Settings/System und rufen die Funktion Clear system cache auf. Wenn Sie das Plugin von einer älteren Version upgedatet haben, sollten Sie die Plugin-Seite einmal refreshen (Strg+F5) und ggf. ist es auch nötig, das Plugin einmal zu deaktivieren und neu zu aktivieren.

Das Plugin kennt verschiedene globale Einstellungen, die Sie über über die Funktion Setup konfigurieren können:

Global settings

Global settings

Show images in essay index
Diese Option ist standardmäßig aktiviert. Wenn Ihr Theme für die Anzeige der Essay-Liste die Funktion truncate verwendet (z.B. {{ essay.content truncate="450" paragraphs="true"}} so sollten Sie diese Option deaktivieren, da ansonsten die Anzeige fehlerhaft wäre.
Use lazy loading of images
Aktivieren Sie diese Option wenn Sie möchten, dass die Fotos erst geladen werden, wenn Sie in den sichtbaren Bereich gescrollt werden. Sie sollten diese Option nicht aktivieren, wenn das verwendete Theme zur Anzeige von Essays und Pages die Ajax-Funktion verwendet (wie z.B. im Theme Madison 2). Ist die Option aktiviert und werden Fotos nicht korrekt angezeigt, deaktivieren Sie bitte diese Option.
Add link to caption
Wenn diese Option aktiviert ist werden nicht nur die Fotos selber verlinkt, sondern auch die Bildunterschriften (sofern angezeigt).
Default CSS class
Hier können Sie eine (oder mehrere) CSS-Klasse(n) angeben, die für alle mit Hilfe des Plugins eingebetteten Fotos verwendet wird. Diese Option kann für einzelnen Fotos überschrieben werden.

Benutzung

Wenn das Plugin aktiviert ist, erscheint ein neues Icon in der Liste der einfügbaren Medien:

Medium einfügen

Medium einfügen

Wenn Sie das Icon anklicken, erscheint zunächst das Standard Auswahlfenster für Medien, in dem Sie das gewünschte Foto auswählen können.

Nach dem das Foto eingefügt wurde, können Sie die Darstellung konfigurieren, in dem Sie das Icon für die Einstellungen anklicken:

Einstellungen

Einstellungen

Es erscheint ein Fenster, in dem Sie die verschiedenen Optionen für die Anzeige des Fotos detailliert konfigurieren können:

Image settings

Image settings

Die Optionen haben die folgenden Bedeutungen:

Image Caption

Hier können Sie auswählen ob eine Bildunterschrift angezeigt werden soll. Dabei können Sie zwischen diesen Optionen wählen:

  • Do not show: es wird keine Bildunterschrift Text angezeigt,
  • Show title only: der Inhalt des Felds title wird angezeigt,
  • Show caption only: es wird der Inhalt des Feldes caption angezeigt,
  • Show title and caption: es werden sowohl die Inhalte von title als auch caption angezeigt.

Der angezeigt Text wird als figcaption Tag angezeigt.

Floating

Wenn der Text das Foto umfließen soll, können Sie hier auswählen ob das Foto links (Floating: left) oder rechts (Floating: right) vom Text erscheinen soll.

Use preset size

In der Liste können Sie eine von Kokens standardmäßig definierten Größen auswählen. Angeboten werden die Größen von tiny (60px) bis medium-large (960px). Wenn Sie ein Foto in einer dieser Standardgrößen anzeigen sollen, sind keine weiteren Größenangaben nötig.

Width in pixel

Wenn Sie das Foto in einer individuellen Breite anzeigen möchten, so können Sie in diesem Feld die gewünschte Breite (in Pixel) vorgeben. Wenn Sie eine eigene Breite definieren, ist es empfehlenswert ein nächstgrößeres Preset auszuwählen.

Height in pixel

Zur Definition einer bestimmten Größe können Sie in diesem Feld die gewünschte Höhe (in Pixel) eintragen. eine eintragen. Wenn Sie sowohl eine Breite als auch eine Höhe definiert haben, so wird Koken nur einen der beiden Werte exakt verwenden, damit die Anzeige nicht verzerrt wird. Um die exakte gewünschte Größe zu bekommen, müssen Sie zusätzlich noch die Option Crop auf “Yes” setzen.

Aspect ratio

Hier können Sie das gewünschte Größenverhältnis für die Anzeige des Fotos vorgeben, z.B. 3:2. Das Foto wird dann entsprechend beschnitten, um für die vorgegebene Breite das gewünschte Verhältnis zu bekommen.

Crop

Wenn das Foto mit der exakt vorgegebenen Breite und Größe angezeigt werden soll, setzen Sie diese Option auf “Yes” und es wird für die Anzeige entsprechend beschnitten.

Margin

Linke bzw. rechte Margin-Angabe in Pixeln. Tragen Sie hier einen Wert ein, wenn Sie einen anderen Abstand zum Text erreichen möchten. Die Angabe wird in Abhängigkeit von der gewählten Floating-Option gesetzt. Wenn kein Floating ausgewählt wurde, wird diese Option ignoriert.

Additional CSS class(es)

Wenn Sie für die Anzeige des Fotos zusätzliche Style-Optionen (z.B. margins, border, usw.) verwenden möchten, so können Sie hier den Namen der entsprechenden CSS-Klasse (oder auch mehrere) eintragen.

Open link in new window

Setzen Sie diese Option auf “Yes” wenn beim Klick in das Bild ein neues Browser-Fenster geöffnet werden soll.

Link

Hier können Sie auswählen, wohin bei einem Klick in das Bild verzweigt werden soll.

Wenn Sie mehr über die Bedeutung der verschiedenen Optionen erfahren möchten, so finden Sie weitere Informationen in der Dokumentation des koken:img Tags auf der Koken Website.

Fork me on GitHub

Download
Version: 0.96.1 (6.10.2014)

Änderungen

06.10.20140.96.1Das Icon war seit Koken 0.18 fast nicht mehr sichtbar. Etwas modifiziert, so dass es jetzt besser erkennbar ist.
03.08.20140.96
  • Plausibilitätsprüfungen für numerische Eingabefelder
  • Verwendung von Checkboxen anstelle von Auswahllisten mit „true/false“
comments powered by Disqus