Nachrichten-Teaser in 3 Spalten ausgeben?!

[Swiper]

Hallo,

ich würde gerne die Teaser der News nicht untereinander sondern in (3) Spalten ausgeben lassen. DIV#links, DIV#mitte, DIV#rechts. Dementsprechend also Nachricht 1,4,7,10,.... in linker Spalte. Da die Bilder/Teaser immer unterschiedlich hoch sind funktioniert das mit dem Floaten nicht und die neue CSS3 Funktion möchte ich nicht nutzen.

Hat jemand so etwas schon gemacht? bzw. könnte mir einen Tipp geben wie ich es anstellen könnte?

Thx Swiper

[Andreas]

width: 33%; height: 200px; overflow: hidden; float: left; für die einzelnen Teaser.

[Swiper]

@Andreas
Unbrauchbar! Nachricht 1 in "Div-Container 1", Nachricht 2 in "Div-Container 2" usw.usw.
Aussserdem meinte ich, dass die Nachrichten-Div's eine variable Höhe haben. Floaten geht NICHT. Zumindest ohne CSS3 nicht. Das will ich nicht weil meine Besucher teilweise noch mit MSIE 6,7 oder so einem Zeug unterwegs sind.

[Andreas]

Zeig doch mal die Seite, dann kann man dir besser helfen.

Ich würde wahrscheinlich den DIVs 1,4,7,10 usw. mit div:nth-child(3n+1) ein clear: both; mitgeben. Damit kannst du dir die feste Höhe sparen. Die alten Browser müssten auch schon das float verstehen, darfst nur die Breite nicht vergessen.

<cynical>Wenn der User mit IE6|7 unterwegs ist, dann muss es ja nicht genau passen, diese User sind daran gewöhnt, dass die Seiten im Internet schrottig aussehen.</cynical>

Aber du kannst auch die Templates anpassen, so dass du nach jedem 3. DIV einen Trenner bekommst, oder ne extra Class reingenerierst.

[Swiper]

Mag sein das sie MSIE 6 User einiges gewohnt sind. Normalerweise dürfte man sich gar nicht mehr drum kümmern. Aber genau diese besuchen meine Seite
Schau mal auf http://www.pinterest.com. So ähnlich soll es aussehen.

Ich würde gerne im Template zählen, aber das geht leider nicht. Dann würde ich einen Counter mitlaufen lassen und via Modulo die News in die Spalten sortieren.

[Andreas]

Einen Counter kannst du als globale Variable mitlaufen lassen, falls es anders nicht geht.

$GLOBALS['myVar'] ++; 

Die Anordnung wie in deinem Beispiel dürfte schwer zu realisieren sein, da es ja keine Reihen mehr gibt. Jedes Element müsste wahrscheinlich absolut positioniert werden, wobei vorher eine aufwendige Berechnung mit JS stattfinden müsste.

Vielleicht hilft dir das hier http://masonry.desandro.com/ Suche in den Erweiterungen nach masonry.

[webstar]

Was man machen könnte die Ausgabe der einzelnen News-Items im Newslist-Template abzugreifen. Dann bekommt man auch so etwas wie Pinterest hin.

<?php
$columns = array();
$count = 0;

foreach($this->items as $item): 
    $count = ($count == 3 ? 1 : ++$count);
    $columns[$count] = $item;
endforeach;

foreach($columns as $column):
    ?><div class="col">
        <?php echo $column; ?>
    </div>
<?php endforeach;

[Spooky]

Schau mal auf http://www.pinterest.com. So ähnlich soll es aussehen.

Eigentlich willst du es genau nicht wie auf pinterest . Die Elemente auf der Übersichtsseite von pinterest haben eine fixe Höhe, du willst aber eine Variable Höhe der Elemente und eine neue "Zeile" nach jedem 3. Element. Auf Seiten von pinterest, wo die einzelnen Elemente eine variable Höhe haben, gibt es auch kein Konzept von Zeilen. Hier werden einfach alle Elemente gefloated, ohne Rücksicht darauf, wie der Browser diese dann anordnet (aufgrund der variablen Höhe).

[Swiper]

Ich habe es lösen können!

Ins Template habe ich eine globale Var eingefügt.

$GLOBALS['myVar'] ++; 

Dann habe ich 3 Module angelegt die 3 verschiedene Templates aufrufen.
Darin mittels Modulo 0,1,2 die Spalten befüllt.

Ich weiß, dass es nicht der richtige Weg ist... Aber es funzt.

Was besseres ist mir nicht eingefallen.

Thx Swiper

[Andreas]

Im Template mod_newslist steht

  <?php foreach ($this->articles as $article) echo $article; ?>

Du kannst das auch mal so probieren, ohne globale Variable

<?php
  $i = 0;
  foreach ($this->articles as $article)
  {
    echo '<span class="news_'.$i++.'">'.$article.'</span>';
  }
?>

mod_newslist ist ja der Wrapper für z.B. news_short, deswegen kannst du in news_short keinen Counter hochzählen, aber in mod_newslist.

[Spooky]

Ich würde es, bei Benutzung eines Grid Systems (und wenn man es jetzt bspw. nur in #main unterbringen will) zB so machen:

Template mod_newslist

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>

  <?php if ($this->headline): ?>
    <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
  <?php endif; ?>
  
  <?php $i = 0; ?>
  <div class="group">
  <?php foreach ($this->articles as $article): ?>
      <div class="span4<?php if ($i % 3 == 0) echo " cl"; ?>">
          <?php echo $article; ?>
      </div>
      <?php $i++; ?>
  <?php endforeach; ?>
  </div>

  <?php echo $this->pagination; ?>

</div>
<!-- indexer::continue -->

.group wäre hier gleichzusetzen mit .row (wie es in fertigen Grid Systemen oft verwendet wird). .span4 erstreckt sich über 4 Spalten des 12-Grid Systems (also ein Drittel). Und jeder dritte Artikel, beginnend mit dem ersten, bekommt zusätzlich eine .cl class (die einfach clear:left; hat).

Statt foreach kann man natürlich auch gleich for verwenden, damit man den counter nicht extra definieren muss.

[jenda]

Eine Anleitung, wie man es mit der Erweiterung dk_masonry umsetzen kann, findet ihr hier.