PC-Achievements dank WordPress

Meine bessere Hälfte (ich lasse nicht unerwähnt: significant other klingt ja so viel schöner) hat für ihre Fotografietätigkeiten eine Webseite auf WordPress-Basis. Sie hat sich für das Theme F8 Lite entschieden, dass ziemlich hübsch aussieht, aber leider einen eklatanten Nachteil hat: Seine zentrale Funktion, die Slideshow, verträgt sich nicht mit Lightbox, einem Plugin, was wiederum fast alle Flickr-Plugins benötigen. Das eine, wofür sie sich entschieden hat, ist eher mau dokumentiert und ich sitze einigen Tagen vergeblich daran, auch die description der jeweiligen Fotografien zu ergattern. Das wird mich wohl noch ein paar Tage beschäftigen.

Ich kann mich ja, obwohl Informatik und ich nicht einmal in einer Großen Koalition miteinander klar kämen, einigermaßen lange damit aufhalten, HTML-, CSS-, JavaScript- und PHP-Spielereien zu betreiben. Ein paar Dinge, die ich am Theme geändert habe, sind auch gar nicht mal so trivial (also, sie waren es zumindest für mich nicht). Dazu gehören die Slideshow-Funktionalität und die Möglichkeit, selbst auf die Thumbnails, die das Theme generiert zuzugreifen.

Die Slideshow-Problematik

Die Konfiguration der Slideshow, also der überblendenden Bilder auf der Startseite, statisch zu gestalten, ist aufgrund der bestenfalls lakonisch zu bezeichnenden Dokumentation von F8-Lite einigermaßen herausfordernd, was auch in Foren zu einiger Verzweiflung führt. Nicht ohne Humor heißt es in der Originaldokumentation einfach:

The slideshow shows the most recent 4 posts in category 1. You could make this slideshow static, showing only those images specified by replacing the code on slideshow.php with something like the following…

Im following Bereich sind dann eckige IMG-Tags und spitzklammerige HTML-Anweisungen, so dass man versucht ist, auch für erste eine Code-Entsprechung zu finden. Währenddessen ist man aber noch damit beschäftigt, sich zu fragen, welchen Teil des PHP-Codes man nun sersetzen sollte.

Die Auflösung ist dann, wie so oft, vergleichsweise banal:

<ul id=”portfolio”>
<li><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/slideshow/image1.jpg” /></li>
<li><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/slideshow/image2.jpg” /></li>
<li><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/slideshow/image3.jpg” /></li>
<li><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/slideshow/image4.jpg” /></li>
</ul>

Das ist der gesamte Inhalt der slideshow.php – wenn man das einmal geschrieben hat und mit der Dokumentation vergleicht, fragt man sich, wieso man damit ernsthaft etliche Stunden mit der so trivial scheinenden Lösung verbracht hat und kann den wortkargen Großdokumentator gut verstehen.

Thumbnails abgreifen

Dass mich das folgende so sehr beschäftigt hat, ist eher darauf zurückzuführen, dass ich in meinen autodidaktischen PHP-Unterricht so oft geschwänzt habe, unter anderem auch, als die foreach-Schleife dran kam. Folgendes: Das benannte Theme greift für seine Vorschauen auf selbst zugeschnitte Miniaturbilder zurück, deren URL als custom value hinterlegt werden muss. Das ist noch einfach. Gleichzeitig benutzt diese Seite aber das Plugin list category posts, um relevante Artikel und Beiträge derselben Kategorie aufzulisten. Was wäre da schöner, als in einer solchen auch das entsprechende Thumbnail dabei zu haben? Eben.

Wieder ist die Lösung (hier leicht gekürzt) vergleichsweise simpel:

foreach($catposts as $single):

$output .= “<li><a href='”.get_permalink($single->ID).”‘>”.$single->post_title;

$values = get_post_custom_values(‘thumbnail’,$single->ID);

$output.=”<img src=””.$values[0].”” alt=””.$single->post_title.””/></a>”;

$output.=”</li>”;

endforeach;

Kompliziert ist das nur für Leute wie mich, in der Array-Behandlung zwar anwesend waren, aber mit ihrem imaginären Tischnachbarn geschwätzt haben. Das Einfügen eines Dropdown-Menüs mit den entsprechenden CSS-Änderungen war im Vergleich geradezu trivial.

Geschafft! Erledigt! Hurra!

Ich habe bis dato nur eine kümmerliche To-Do-Liste (zumeist ein Briefumschlag oder ein Einkaufsbeleg), auf der ich dann einzelne Tätigkeiten im Wortsinne abhaken kann. Und doch: das ist etwas sehr befriedigendes. Auch wenn es mich letztlich in die Laber Geisteswissenschaftlerecke gezogen hat, finde ich das Aufdröseln und Entzwirren von strukturellen Problemen wie den hier genannten sehr faszinierend und belohnend. Und irgendetwas sagt mir, dass ich noch lange ausreichend Nachschub haben werde.

11 thoughts on “PC-Achievements dank WordPress

  1. Hallo Christian,

    ich verzweifel grad an diesem Theme und derselben Herausforderung: die Slideshow statisch zu machen, also nur die Fotos meiner Wahl anzeigen zu lassen.

    Wenn ich deinen Code in die slideshow.php packe, passiert folgendes: alle Fotos werden untereinander angezeigt und nicht als Slideshow.

    Ich kann mir das inzwischen nur noch so erklären, das die Entwickler in der jetzigen Version anscheinend etwas fundamental an den Slideshow-Einstellungen geändert haben.

    Solltest du irgendeine Idee haben, freu ich mich über jeden Hinweis!

    Gruß
    Peter.

    1. Hallo Peter,

      die Verzweiflung kann ich gut nachvollziehen, uns hat das damals auch ein paar Wochen beschäftigt und nicht umsonst haben wir seither auch davon abgesehen, das Theme upzudaten – fragiler als ein Kartenhaus, das. Ich habe jetzt spontan keine Idee, aber zweieinviertel Fragen:

      • Kann man sich den gegenwärtigen Stand der Seite, an der baust, irgendwo (auch mit Dummy-Inhalten) ansehen?
      • Was passiert in der Standardeinstellung des Themes? Wie wird da die Slideshow angezeigt?
      • Was steht in der ursprünglichen slideshow.php?

      Grüße, Christian.

  2. Hi Christian,

    danke für die schnelle Antwort.

    Du kannst das im Grunde schon fertige Projekt unter http://www.spreesprossen.de angucken. Steht soweit alles – nur die Slideshow will halt nicht.

    Eine Standard-Einstellung gibt es in dem Sinne nicht. Man kann jetzt per Auswahlmenü auswählen, ob 1. gar keine Slideshow, 2. nur ein frei definierbares Bild, 3. eine “Minimalist Slideshow” mit den Bildern der letzten Blog-Posts oder 4. eine “Overlay Text on Slideshow” mit den letzten Bildern der Blog-Post plus den Post-Auszug als Text-Overlay angezeigt werden soll.

    Die slideshow.php sieht entsprechend so aus:

    array( ‘slideshow’ ), ‘default_size’ => ‘950×425’, ‘width’ => ‘950’, ‘height’ => ‘425’, ‘image_class’ => ”, ‘default_image’ => ‘wp-content/themes/f8-lite/images/default_header.jpg’ ) ); ?>

    have_posts() && $ithe_post(); $do_not_duplicate = $post->ID; ?>

    array( ‘slideshow’ ), ‘default_size’ => ‘950×425’, ‘width’ => ‘950’, ‘height’ => ‘425’, ‘image_class’ => ”, ‘default_image’ => ‘wp-content/themes/f8-lite/images/default_header.jpg’ ) ); ?>

    <a href="” rel=”bookmark” title=”Permanent Link to “>

    <?php } else { echo '‘; } ?>

    Wenn das hier für die Kommentare zu lang wird (aber vielleicht findet ja mal jemand mit ähnlichen Problemen diesen Post), sag Bescheid.

    Danke nochmal für deine Bereitschaft zu helfen!

    Gruß
    Peter.

    1. Hallo Peter,

      also ich habe mir jetzt mal sowohl eure Seite als auch die neue GraphPressPress zu F8 lite angeschaut (immerhin, thumbnails im Backend zuschneiden und custom menus… da ist schon etwas Leiden von euch genommen). Es scheint (runtergeladen und auf einem Dummy-Blog installiert habe ich es noch nicht), dass die Art, wie slideshows eingebaut werden, tatsächlich eine Andere ist. Vorschlag: In die home.php an geeigneter Stelle einbauen (der fette Teil wurde vorher verschluckt):

      <script language=”text/javascript”>
      $(document).ready(
      function(){
      $(‘ul#portfolio’).innerfade({
      speed: 1000,
      timeout: 5000,
      type: ‘sequence’,
      containerheight: ‘435px’
      });
      });
      </script>

      Die slideshow.php ersetzen durch das Schema, wie es im Post angegeben ist, also

      //BITTE VORHER DAS ‘ORIGINAL’ IRGENDWOHIN ABSPEICHERN//

      <img src="/images/slideshow/image1.jpg” />
      <img src="/images/slideshow/image2.jpg” />
      <img src="/images/slideshow/image3.jpg” />
      <img src="/images/slideshow/image4.jpg” />
      <img src="/images/slideshow/image5.jpg” />
      <img src="/images/slideshow/image6.jpg” />
      <img src="/images/slideshow/image7.jpg” />

      Jens ins entsprechende Verzeichnis genügend Bilder packen (zum Ausprobieren reichen ja auch drei oder so). Wenn es jetzt erst einmal nicht funktioniert, checken, dass das id “portfolio” tatsächlich auf die Startseite gespült wird. Wenn es dennoch nicht funktioniert – mal sicherheitshalber prüfen, ob innerfade noch in das Jquery eingepflanzt ist (einfach Volltextsuche im Download-Verzeichnis des Themes). Und wenn es danach immer noch nicht geht, nochmal kurz hier bescheid geben, dann würde ich mir mal ein lokales Abbild der Seite ziehen und mit etwas Koffein bugfixen 😉

      Und damit alles Gute uns bis demnächst. (Innere Uhr deutet allmähliche Notwendigkeit mehrstündiger horizontaler Lage an.)

      Burtchen.

  3. Hi,

    vielen Dank erstmal!!
    ich probier das in einer ruhigen Minute nochmal detailierter aus. Ein erster Versuch ist grad gescheitert. Gleiches Problem wie bisher.

    Wie prüfe ich, ob das id “portfolio” auf der Startseite ankommt? Sorry, ich bin in diesen Programmiersachen kein Spezialist, hab nur einfach relativ wenig Angst und Geduld bei der Suche in Foren… :):)

  4. Ok – ich merk grad, ich sollte mir mal ein paar Grundlagen zum Thema php, css, html etc. angucken.
    Frage: wie und wo pack ich deinen Code-Schnipsel in die home.php? Egal wo ich es hin packe, es erscheint grad nur als normaler Text auf der Startseite. Also konnte da ja erstmal noch gar nichts funktionieren.

    Sorry, hoffe ich enttäusche dich mit meinem Unwissen nicht 🙂

    Peter.

    1. Hallo Peter,

      nein, gar kein Problem – habe gerade festgestellt, dass ich zwei Tags in der home.php-“Anleitung” vergessen hatte (sind jetzt im vorherigen Kommentar drin und . Vielleicht noch einmal damit probieren? Ich sehe es mir dieses Wochenende definitiv mal genauer ‘offline’ an.

      Beste Grüße, Christian.

    1. Habe eine gute Nachricht: Lokal habe ich es schon – also ohne das Hindernis, in WordPress die Dateien zu suchen – gelöst, da erhältst du gleich Post. (Und sobald es “global” gelöst ist, gibt es einen Post darüber für die Allgemeinheit.)

Leave a Reply

Your email address will not be published. Required fields are marked *