Exzerpt-Bilder in sidebar nebeneinander darstellen

  • Guten Abend,

    die Suche hat mein Problem leider nicht gelöst, weder hier im Forum noch per google. Daher dieser Weg.

    Mein Problem ist folgendes: Für mein Blog http://www.blogpartei.de möchte ich in der Sidebar drei Bilder nebeneinander darstellen. Hier direkt der Link zum Beispiel-Screenshot, man sieht's aber auch auf der Seite schnell.

    Für den Fall, wo ich die Bilder alle paar Wochen händisch in der sidebar.php ändere, ist das auch kein Problem (Punkt "Blogpartei hört..."). Ist zwar nicht das Höchste der Programmierkunst, aber ausreichend für mich.

    PHP
    <h1>Blogpartei hört...</h1>
    <a href="http://www.lastfm.de/music/VETO/Crushing+Digits" target="_blank"><img src="http://www.blogpartei.de/wp-content/uploads/2009/01/ve.jpg" height="50" alt="Meistgehoerte Alben der Woche" title="Veto - Crushing Digits" /> <a href="http://www.lastfm.de/music/The+Phantom+Band/Checkmate+Savage" target="_blank"><img src="http://www.blogpartei.de/wp-content/uploads/2009/01/pb.jpg" height="50" alt="Meistgehoerte Alben der Woche" title="The Phantom Band - Checkmate Savage" /> <a href="http://mostunpleasantmen.bandcamp.mu/" target="_blank"><img src="http://www.blogpartei.de/wp-content/uploads/2009/01/mum.jpg" height="50" alt="Meistgehoerte Alben der Woche" title="Most Unpleasant Men - Nothing Moves Slower" />
    </a>

    Für den aktuellen Fall (Hörenswerte Streams) ist es jedoch etwas komplizierter. Die Bilder holt sich die sidebar aus den exzerpten einer bestimmten Kategorie. Doch auch wenn ich span class nutze (floating), setzt er die Bilder immer untereinander. Wie kann ich das umgehen?

    Der Exzerpt sieht immer folgendermaßen aus:

    PHP
    <a href="link" title="title"><img src="bilderquelle" height="50"/></a>
    PHP
    <h1>Hörenswerte Streams</h1>
      <?php { query_posts('cat=1400&showposts=3'); } ?>
      <?php while (have_posts()) : the_post(); ?>
    <span class="leftdown">
    <?php the_excerpt() ?>
    </span>
    <?php endwhile; ?>
    <?php ?>

    Hier die style.css, hier der wohl wichtigste Auszug, die benutzte Klasse:

    PHP
    .leftdown {
    float: left;
    margin: 0 1px 0 1px;


    Edit: Ich habe gerade gesehen, dass beim Aufruf der page.php bei http://www.blogpartei.de/ueber/ das Ganze für den "schwierigen" Fall funktioniert - dafür bricht er nach diesem Part nicht ab, sondern macht die nächste h1 + Bilder auch hintendran! Woran liegt das denn?

    Page.php

    </strong>

    Ich hoffe, alle relevanten Angaben sind gemacht, wenn nicht bitte nachhaken!

    Und schon mal vielen Dank im Voraus!
    Tom

    Einmal editiert, zuletzt von blogpartei (9. Februar 2009 um 20:47)

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Hallo Tom,

    the_excerpt(); packt die Info die du eingibst in Paragraphen sprich es schaut dann folgendermaßen aus:

    HTML
    <span class="leftdown">
    <p><a href="http://3voor12.vpro.nl/speler/luisterpaal/41420089" title="Grand Duchy - Petits Fours"><img height="50" src="http://www.blogpartei.de/wp-content/uploads/2009/02/gd.jpeg"/></a></p>
    </span>

    Paragraphen tendieren dazu die gesamte Breite eines Containers zu nutzen. Mit float kannst du aber auch einen Paragraphen klein bekommen :-). Von dem mal abgesehen bringt dir der span Tag nichts, ich würde in deiner Stelle einen div Tag verwenden. Dein CSS müsste dann folgendermaßen aussehn: .leftdown p { float:left; }

    Wichtig am Ende musst du den float wieder entfernen: <br style="clear:both;" />

    Schöner ist das ganze natürlich wenn du jedes Bild in einen div Tag stellst. Das kannst du folgendermaßen bewältigen. Anstelle der the_excerpt()-Funktion, die du für solche Spielerein eh nicht verwenden solltest, verwendest du Custom Fields (Benutzerdefinierte Felder od. Spezialfelder genannt).

    Davon legst du 3 Stück an:
    - Link
    - Titel
    - Bild

    Dann kannst du das Ganze folgendermaßen auslesen:

    PHP
    <h1>Hörenswerte Streams</h1>
    <?php query_posts('cat=1400&showposts=3'); ?>
    <?php while (have_posts()) : the_post(); ?>
      <div class="leftdown">
        <a href="<?php echo get_post_meta($post->ID, 'link', true); ?>" title="<?php echo get_post_meta($post->ID, 'title', true); ?>"><img src="<?php echo get_post_meta($post->ID, 'image', true); ?>" height="50"/></a> 
      </div>
    <?php endwhile; ?>
    <br style="clear:both;" />

    So sollte es funktionieren. Ich habe es aber nicht getestet.
    [COLOR=#000000][COLOR=#0000CC]
    [/COLOR][/COLOR]

  • Hej TomSta,

    vielen, vielen Dank für deine Antwort! Ich habe den Tipp mit den custom fields umgesetzt:

    1. Funktioniert es jetzt.
    2. Ist es wesentlich einfacher und besser als mit exzerpt
    3. Vielen Dank für den Tipp mit den custom fields allgemein, sehr mächtig das Ganze!

    Super!
    Danke!

  • Vielen Dank!

    Hallo ihr zwei,
    danke für eure Diskussion. Ich habe nämlich auch nach einer Möglichkeit gesucht, die Spezialfelder in Wordpress zu nutzen.

    Ich wollte ein Bild neben meine Überschrift machen. (s.http://www.zentodone.eu)

    Ich habe ein Spezialfeld namens Ueberschriftbild in meinem Artikel hinterlegt mit dem Link zu dem Bild und habe dann ins coding der index.php direkt vor die Ueberschrift, das folgende Coding kopiert:

    PHP
    <?php echo get_post_meta($post->ID, 'link', true); ?>

    Und es hat einwandfrei funktioniert!

    Danke schön!

    Gruß

    Mac_BetH

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!