Flygplats.de

Virtuelles Drehkreuz für Computer und Technik

WordPress: Galerien und Slider einfach mit Shortcodes Ultimate erzeugen

Wenn du das weit verbreitete Plugin Shortcodes Ultimate von Vladimir Anokhin installiert hast, kannst du eine Bildergalerie in deine Beiträge oder Seiten einfügen, ohne dazu ein weiteres Plugin zu bemühen oder dich mit der Galerie-Funktion von WordPress beschäftigen zu müssen.

Vorbereitung

Lade zunächst die Bilder in die Mediathek, die in deiner Galerie erscheinen sollen. Ich empfehle dir, alle Bilder vorab auf dasselbe Verhältnis von Breite zu Höhe zu bringen, damit die Galerievorschau ordentlich aussieht. Meine Demobilder für diesen Beitrag habe ich vor dem Upload auf das Format 16:10 zugeschnitten und dann auf 1200 x 750 Pixel heruntergerechnet.

Vergebe außerdem bei jedem Bild einen verständlichen und zutreffenden Titel, denn dieser wird für die Bildunterschrift verwendet.

Es gibt mehrere Möglichkeiten, die Einbindung der Bilder zu gestalten. Ich stelle dir drei Varianten vor und erkläre Schritt für Schritt, wie du sie in deinem Blog einsetzen kannst.

Variante 1: Galerie

Gehe in die Bearbeitung eines Beitrages oder einer Seite und setze den Cursor an die Stelle, an der deine Galerie erscheinen soll. Klicke auf den Button Insert Shortcode und wähle den Menüpunkt Gallery. Es öffnet sich ein Dialogfeld, in welchem du die folgenden Einstellungen vornimmst:

  1. Bei Source wähle die „Media Library“ als Quelle und klicke auf Add Images, um die vorher hochgeladenen Bilder hinzuzufügen.
  2. Setze den Wert für Links auf „Lightbox“ und den von Links Target auf „Same Window“.
  3. Bestimme  bei Width die Breite des einzelnen Vorschaubildes. Damit kannst steuern, wie viele Bilder nebeneinander angezeigt werden. Berücksichtige, dass bei jedem Bild ca. 10 Pixel für Randabstand und Rahmen eingerechnet werden.
  4. Show Titles habe ich für dieses Beispiel auf „On Mouse Over“ gesetzt.
  5. Die übrigen Parameter müssen nicht verändert werden, was auch für Height gilt. Falls du jedoch Probleme mit der Höhenangabe hast, lies die Anmerkung am Ende des Beitrages.
  6. Verzichte auf die Preview, weil sie die Bilder in falscher Größe anzeigt und klicke zum Abschluss auf Insert Shortcode.

An der Cursorposition befindet sich nun der Code für die Galerie. Die gewählten Parameter lassen sich hier noch einmal überarbeiten. Alternativ löschst du den soeben erzeugten Shortcode und fügst die Galerie noch einmal ein wie oben beschrieben.

Wenn du nach der Veröffentlichung auf eine der Fotografien klickst, öffnen sich die Originalbilder in der bekannten Lightbox-Ansicht.

Variante 2: Carousel

Gehe in die Bearbeitung eines Beitrages oder einer Seite und setze den Cursor an die Stelle, an der deine Diashow erscheinen soll. Klicke auf den Button Insert Shortcode und wähle den Menüpunkt Carousel. Es öffnet sich ein Dialogfeld. Nimm dort die folgende Einstellungen vor:

  1. Bei Source wähle die „Media Library“ als Quelle. Klicke auf Add Images, um die vorher hochgeladenen Bilder hinzuzufügen.
  2. Setze Links auf „Lightbox“ und Links Target auf „Same Window“.
  3. Setze Responsive auf „Yes“. Die Werte unter Width und Height spielen dann keine Rolle mehr.
  4. Die darunter folgenden Parameter bestimmen das Aussehen des Carousels und sind selbsterklärend. Für meine Demo habe ich Show Titles und Pagination auf „No“ gesetzt und die restlichen Parameter nicht verändert.
  5. Verzichte auf die Preview, weil sie die Bilder in falscher Größe anzeigt und klicke zum Abschluss auf Insert Shortcode.

An der Cursorposition befindet sich nun der Code für das Carousel. Die gewählten Parameter lassen sich hier noch einmal überarbeiten. Alternativ löschst du den soeben erzeugten Shortcode und fügst das Crousel noch einmal mit dem Assistenten ein wie oben beschrieben.

Klicke nach der Veröffentlichung auf eine der Fotografien, damit sich die Originalbilder in der Lightbox-Ansicht öffnen.

Variante 3: Slider

Gehe in die Bearbeitung eines Beitrages oder einer Seite und setze den Cursor an die Stelle, an der dein Slider erscheinen soll. Klicke auf den Button Insert Shortcode und wähle den Menüpunkt Slider. Es öffnet sich ein Dialogfeld, in welches du die folgenden Werte eingibst:

  1. Bei Source wähle dort die „Media Library“ als Quelle und klicke auf Add Images, um die vorher hochgeladenen Bilder hinzuzufügen.
  2. Setze Links auf „Lightbox“ und Links Target auf „Same Window“.
  3. Setze Responsive auf „Yes“. Die Werte unter Width und Height spielen dann keine Rolle mehr.
  4. Die darunter folgenden Parameter bestimmen das Aussehen des Carousels und sind selbsterklärend. Für meine Demo habe ich Show Titles und Pagination auf „No“ gesetzt und die restlichen Parameter nicht verändert.
  5. Verzichte auf die Preview, weil sie die Bilder in falscher Größe anzeigt und klicke zum Abschluss auf Insert Shortcode.

An der Cursorposition befindet sich nun der Code für den Slider. Die gewählten Parameter lassen sich hier noch einmal überarbeiten. Alternativ löschst du den soeben erzeugten Shortcode und fügst den Slider noch einmal ein wie oben beschrieben.

Klicke nach der Veröffentlichung auf eine der Fotografien, damit sich die Originalbilder in der Lightbox-Ansicht öffnen.

Anmerkungen

Experimentiere mit den zur Verfügung stehenden Parametern. So wäre es z.B. interessant, den Slider im Großformat auf der Startseite einzubauen. Wenn du genau hinschaust, siehst du, dass der Slider im Gegensatz zu Gallery oder Carousel weder Umrahmung noch Randabstand besitzt und deshalb dafür gut geeignet ist.

Oder verlinke jedes Bild des Sliders zu einer passenden, thematischen Unterseite. Wähle dazu unter Link den Eintrag „Slide Link“ und lege in der Mediathek bei jedem Bild das gewünschte Ziel fest.

Kaputt machen kannst du nichts: Wenn der Shortcode nicht richtig funktioniert, erzeuge einfach einen neuen.

Werden die Galerien und Slider nicht in der richtigen Größe oder verzerrt angezeigt? In meinen Stylesheets befindet sich für die responsive Darstellung von Bildern die Definition

img {max-width: 100%; height: auto;}

Dies wird mit ziemlicher Sicherheit auch in deinem CSS der Fall sein, wenn du ein responsives Design verwendest. Falls du also unerwartete Probleme mit der Darstellung von Höhe und Breite der Bilder hast, solltest du dein Theme in diesem Punkt genauer unter die Lupe nehmen.

Links