Trennung nach jeweils 2 Artikeln

irenehofer

Auf einer Übersichtsseite von Team-Mitgliedern sollen jeweils 2 Mitarbeiter nebeneinander dargestellt werden mit dem Namen und einem Bild (als Artikelbild definiert).
Für jede 2. solche Reihe soll eine Hintergrundfarbe und ein Bild definiert werden, dies für die gesamte Breite des Browsers, über den "wrap" hinaus. Die Hintergrundfarbe und das Bild bleiben aber überall das selbe. Hier eine rudimentäre Darstellung:
http://imgur.com/TGqq2gw

Hier der bisherige Code:

HTML

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
     <div class="half">
          <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
          <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
          <?php
               if ( has_post_thumbnail() ) {
                    the_post_thumbnail();
               }
               endif; ?>
          </a>
     </div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

Alles anzeigen

Danke für eure Hilfe

Werbepost

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

SirEctor

Wo liegt denn das Problem? Wo kommst du nicht weiter?

irenehofer

Also ich habe mir überlegt, einen Hintergrund mittels nth-child[] zu setzen. Dann habe ich aber nur eine Hintergrundfarbe für meinen wrap (zb 80% des Browserfensters). Ich möchte die Hintergrundfarbe aber über die gesamte Breite ziehen. Ausserdem soll noch ein Bild als Hintergrund gesetzt werden, welches ebenfalls das gesamte Browserfenster umgibt und nicht nur den Rahmen eines einzelnen Artikels.
Idealerweise würde es im HTML dann irgendwie so aussehen:

HTML

<div class="ohne-hintergrund">
    <div class="wrap">
        <div class="half">
            THUMBNAIL UND BILD
        </div>
    </div>
</div>


<div class="mit-hintergrund">
    <div class="wrap">
        <div class="half">
            THUMBNAIL UND BILD
        </div>
    </div>
</div>


<div class="ohne-hintergrund">
    <div class="wrap">
        <div class="half">
            THUMBNAIL UND BILD
        </div>
    </div>
</div>

Alles anzeigen

usw. Ev. geht es sogar noch einfacher.

pixselig

Kein ganz leichtes Unterfangen.
Das größte Problem dürfte sein, das du den wrapper nicht so einfach aufteilen kannst.
Eine Möglichkeit aber wäre eventuell, dass du zwei Thumbnail Ausgaben immer in ein Div setzt und selbigem mit den Pseudoklassen :before und :after jeweils zwei individuell gestalltbare Elemente zur Seite stellst. Dann musst du diese Elemente nur noch absolut positionieren und über den kompletten Rand setzten und fertig.

irenehofer

Danke für den Tipp, pixselig. Das klingt schonmal plausibel :) Die Frage ist dann nur, wie kriege ich jeweils ein Div um 2 Thumbnail-Ausgaben...? Mit zuerst genanntem Code habe ich ja jeweils ein 'half' um einen einzelnen Eintrag.

pixselig

Das ist gar nicht so schwer.
Du verwendest einfach einen Index und überprüfst in jeder Schleife, ob dieser Index gerade oder ungerade ist, und je nachdem, passt du die Ausgabe an.
Ein Beispiel dafür wäre:

PHP

<?php $i = 1; // Index setzen ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php if ($i % 2 == 1 ) {   // wenn der Index ungerade ist
        echo '<div class="row">';
    }
          <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
          <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
          <?php
               if ( has_post_thumbnail() ) {
                    the_post_thumbnail();
               }
            ?>
          </a>
    <?php if ($i % 2 == 0 ) {   // wenn der Index gerade ist
        echo '</div>';
    }
    $i++; // Index um 1 erhoehen
    ?>
<?php endwhile; ?>
<?php endif; ?>

Alles anzeigen

ist allerdings ungetestet.

irenehofer

Danke, so hat es geklappt!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Trennung nach jeweils 2 Artikeln

Jetzt mitmachen!