Bist du Fotograf oder Grafikdesigner? Dann willst du vielleicht deine besten Arbeiten auf der Website vorstellen.

Normalerweise reicht für Fotografen eine Bildergalerie oder eine Slideshow auf der Homepage. Ein passendes Plugin für die Bildergalerie habe ich ja bereits vorgestellt. Trotzdem möchtest du vielleicht mehr Informationen zu einem einzelnen Projekt zeigen. Beispielsweise, wie das Projekt entstanden ist, oder wie viel Zeit dich die Entwicklung gekostet hat.

Gerade bei Designern kommt häufig dazu, dass im Webdesign ganze Websites gestaltet werden. Da kommt man mit einem einzelnen Bild nicht immer aus, du willst dann gleich eine ganze Serie von Screenshots zeigen, damit sich deine potenziellen Kunden einen Eindruck vom Gesamtwerk deiner Arbeit machen können.

Für solche Zwecke eignet sich ein Portfolio. Es sollte dir erlauben, individuelle Inhalte zu hinterlegen, die der Besucher deiner Website beim Anklicken des Vorschaubildes lesen kann. Außerdem wäre eine eingebaute Bildergalerie ganz nützlich, denn so kannst du weitere Bilder zeigen, die zum Projekt gehören.

Eine gute Lösung war nicht leicht zu finden

Für mein WordPress Buch habe ich mir einmal die Arbeit gemacht, und alle kostenlosen Portfolio-Plugins getestet, die ich finden konnte. Dabei musste ich feststellen, dass viele von diesen Angeboten deutliche Schwächen aufwiesen. Einige waren nur umständlich zu installieren und zu benutzen. Bei anderen fehlten wichtige Elemente in der kostenlosen Version. Beispielsweise fand ich ein Plugin, dass die Verwendung von Kategorien nur in der kostenpflichtigen Version erlaubte.

Waving Portfolio Plugin
Waving Portfolio Plugin

Schließlich ist es mir aber doch gelungen, ein geeignetes Plugin zu finden, dass sowohl kostenlos, als auch leicht zu benutzen ist. Es heißt »Waving Portfolio« und bietet die wichtigsten Optionen für dein Portfolio:

  • Jeder Portfolio-Eintrag kann zusätzlichen Text enthalten, sogar mit eingebundenen Bildern, wie bei einem regulären Blogpost.
  • Jeder Eintrag kann zusätzliche Bilder als Bildergalerie enthalten.
  • Auf Wunsch kann statt der Details auch direkt zu einer anderen URL verlinkt werden.
  • Jeder Eintrag kann einer Kategorie zugeordnet werden, die der Besucher der Website bequem filtern kann.

Ein Beispiel, wie es dann später auf deiner Seite aussehen könnte kannst du dir auf der offiziellen Website des Plugin-Autors ansehen.

Verwendung des Plugins

Nachdem du das Plugin installiert und aktiviert hast, findest du im Dashboard einen neuen Eintrag »Portfolio.« Klickst du hier auf »Add New Item« wird ein neues Porfolio-Element hinzugefügt.

Das Plugin ist leider noch nicht auf Deutsch übersetzt, wer bei der Übersetzung mithelfen will kann das hier tun: https://translate.wordpress.org/locale/de/default/wp-plugins/waving-portfolio

Neuen Eintrag Erstellen
Neuen Eintrag Erstellen

Das neue Element kannst du nun genauso behandeln wie einen Blogpost. Zunächst vergibst du einen Titel. Danach kannst du beliebigen Inhalt in das Eingabefeld eintragen, einschließlich eingebetteter Bilder.

Ganz wichtig: Du musst unbedingt ein Beitragsbild für dein Portfolio-Element vergeben, andernfalls wird es auf deiner Portfolioseite später nicht angezeigt.

Unterhalb des Editors findest du einen Bereich, der mit »Waving Portfolio« bezeichnet ist. Hier kannst du verschiedene Dinge einstellen.

Wenn du zusätzliche Bilder als Galerie anzeigen möchtest, wähle den Button bei »Select gallery images.« Hier fügst du beliebige Bilder ein, die zu dem Portfolioeintrag gehören.

»Title font size« erlaubt dir, die Schriftgröße für den Portfolio-Titel anzupassen, der später auf der Seite für dieses Element angezeigt wird. Normalerweise brauchst du das nicht zu ändern, außer wenn du sehr lange Titel verwendest.

»Sliding panel excerpt lenght« gibt an, wie viele Zeichen unter dem Titel als Auszug sichtbar werden, wenn du später mit der Maus über das Vorschaubild gehst. Maximal erlaubt sind 50 Zeichen und der Auszug wird nur angezeigt, wenn du gleichzeitig die Option »Enable description« aktivierst.

Auszug Aktivieren
Auszug Aktivieren

Wenn du willst, dass dein Vorschaubild einfach nur auf eine andere Seite führt, kannst du auch im Feld »Hyperlink« eine URL eintragen. Dann musst du allerdings auch die Option »Redirect to hyperlink« aktivieren. Wenn die Seite in einem eigenen Fenster erscheinen soll, gibt es dazu die Option »Open in a blank page.«

Direktlink zu einer Seite
Direktlink zu einer Seite

Damit deine Besucher die Vorschaubilder nach Kategorien filtern können, solltest du jedem Portfolioeintrag eine Kategorie zuweisen. Diese »Portfolio Categories« sind unabhängig von den Kategorien, die du bereits von den Blog Posts kennst.

Kategorien
Kategorien

Das Portfolio auf der Seite einfügen

Um das Portfolio dann auf der Seite anzuzeigen, legst du einfach eine neue Seite an. Beispielsweise mit dem Titel »Portfolio.« Hier wird nun ein Shortcode eingetragen, der die Anzeige des Portfolios auf dieser Seite übernimmt.

Damit du es etwas leichter hast, diesen Shortcode mit seinen Zusatzangaben zu erzeugen, bietet das Plugin eine spezielle Funktion, die du im Editor anklicken kannst. Sie heißt »Waving Portfolio Builder.«

Waving Portfolio Builder
Waving Portfolio Builder

Zunächst wählst du ein Theme. Hier stehen zwei zur Auswahl »Dark Theme« und »Light Theme.« Der Unterschied ist nur, wie die Zusatzinformationen später auf der Seite angezeigt werden. »Light« zeigt die Daten auf einem weißen Hintergrund während »Dark« einen dunkelgrünen Hintergrund verwendet.

Die Eingabefelder bei »Dimension control« ist etwas missverständlich, denn du solltest nur eines dieser Felder ausfüllen. Du kannst entweder festlegen, wie breit (Width) oder wie hoch (Height) deine Vorschaubilder angezeigt werden. Füllst du beide Felder aus, wird das zweite (Height) einfach ignoriert.

Dialog 1
Dialog 1

Als Nächstes kannst du festlegen, ob deine Besucher die Kategorien als Filter-Buttons zu sehen bekommen, so dass sie nach Kategorie filtern können. Die erste Option enthält den »All« Button, mit dem alle Kategorien angezeigt werden.

Die zweite Option »Show category button« soll nur die Kategorien ohne den »All« Button enthalten. Leider hat sich hier im Plugin wohl ein Fehler eingeschlichen, denn wenn du diese Option wählst, erscheint später im Shortcode der Parameter showCat=“false“ der aber eigentlich showCat=“true“ sein sollte. Das kannst du aber ggf. manuell ändern, indem du den Shortcode einfach entsprechend anpasst. Wahrscheinlich wird der Fehler in der nächsten Version des Plugins behoben sein.

Filtern für das Back-End

Während die Kategorien für die Filterung im Benutzerbereich (auch front-end genannt) zuständig ist, verwendet das Plugin die Tags für die Filterung im back-end. Willst du also nicht alle Portfolio-Elemente auf einer Seite anzeigen, kannst du den Elementen, die du zeigen willst, einen bestimmten Tag zuweisen.

Ich habe beispielsweise meine Arbeiten mit den Tags »project1« und »project2« versehen. Damit kann ich dann alle Arbeiten auf der Portfolioseite zeigen, die dem tag »project1« zugeordnet sind.

Dialog 2
Dialog 2

Auf diese Weise kannst du mehrere Portfolioseiten gestalten, auf denen unterschiedliche Arbeiten von dir präsentiert werden.

Fazit

Das Plugin »Waving Portfolio« ist ein leicht zu benutzendes Hilfsmittel, um deine besten Arbeiten auf der Website zu präsentieren. Es ist nicht mit unnötigen Funktionen überladen und bietet sich daher an, wenn man ein Portfolio schnell und einfach erstellen möchte.

Portfolio gefällig?