Bilder in Tabellen auflisten und nach x Bildern eine neue Zeile?

[schnipp]

Hallöchen,
ich habe ein kleines und wirklich simples Script für eine Galerie geschrieben.

Per scandir werden Bilder aus einem Ordner gelesen und anschließend durch ein array ausgegeben. Soweit, sogut. Nun möchte ich die Bilder nicht mehr nur als Bilder auflisten mit vielen <img src = "">s nebeneinander, sondern in Tabellen.

Also:
<table>tr>
<td>Bild1</td>
<td>Bild2</td>
usw.

Würde ich einfach das Bild zwischen zwei <td>s packen, so würde die Tabelle unendlich lang werden. Nun möchte, dass nach genau 4 Bilder, also nach 4 Zellen, eine neue Zeile aufgemacht wird. D.h., dass dann </tr><tr> eingeschoben werden.

<table>tr>
<td>Bild1</td>
<td>Bild2</td>
<td>Bild3</td>
<td>Bild4</td>

</tr></tr> Hier soll PHP also eine neue Zeile beginnen.

<td>Bild5</td>
<td>Bild6</td>
<td>Bild7</td>
<td>Bild8</td>

Bitte um Lösungsansätze, danke!

[Cheatah]

Hi,

Nun möchte ich die Bilder nicht mehr nur als Bilder auflisten mit vielen <img src = "">s nebeneinander, sondern in Tabellen.

wie lauten die Spaltenüberschriften? Wie lassen sich die Datensätze (also Zeilen) beschriften?

Bitte um Lösungsansätze, danke!

Schritt 1: Überlege Dir zunächst einmal, welche HTML-Struktur angebracht ist. Eine Tabelle ohne tabellarische Daten ist ebenso daneben wie die plumpe Aneinanderreihung von <img>-Elementen.

Schritt 2: Erzeuge den Code statisch, formatiere ihn Deinen Wünschen entsprechend mit CSS.

Schritt 3: Generiere den sich ergebenden Code mittels PHP.

Cheatah

[schnipp]

<?php

$arr = array();
    $files = scandir($dir, 1);
    foreach ($files as $filename)
    {
        if ($filename != '.' && $filename != '..')
        {
//Anzahl Spalten der Tabelle
  $SPALTEN = 4;

echo "<table border="0">\n  </tr>\n";
  for ($num = 0; $num <= 3; $num++)
  {
    if ($num % $SPALTEN == 0 && $num > 0)
    {
    // Neue Zeile beginnen
    echo " </tr>\n  </tr>\n";
    }
    echo "  <td><img src ="$filename"></td>\n";
  }
  //Ganz wichtig: Die Tabelle könnte noch unvollständig sein.
  // D.h.: Wir haben 3 Spalten in der aktuellen zeile aber nur 2
  // Einträge. Das wird hier gefixt.

}
}
 if ($num % $SPALTEN != 0)
  {
    echo "  <td colspan = "". ($num % $SPALTEN) ."">&nbsp;</td>\n";
  }
  echo "  </tr>\n";
  echo "</table>";

?>

So, damit habe ich es zwar geschafft, dass die Bilder in einer Tabelle angezeigt werden und dass die Tabelle immer 4 Zellen pro Reihe besitzt, nur werden leider 4 gleiche Bilder in einerReihe angezeigt, warum? :\

[Steel]

Hi,

So, damit habe ich es zwar geschafft, dass die Bilder in einer Tabelle angezeigt werden und dass die Tabelle immer 4 Zellen pro Reihe besitzt, nur werden leider 4 gleiche Bilder in einerReihe angezeigt, warum? :\

Weil Du das so schreibst:
fuer jedes Bild mach
{
 mach 4x
 {
  Das Bild anzeigen
 }
} naechstes bild

Die ganzen Probleme haettest Du aber nicht, wuerdest Du das komische Tabellenlayout weglassen. Ich nehme mal an, alle Bilder sind gleich gross, oder? Dann weisst Du auch, wie breit 4 Bilder sind. Dann weisst Du auch wie breit ein Element sein muss damit 4 Bilder in eine Reihe passen. Noch Fragen?

[Tom]

Hello,

Weil Du das so schreibst:
fuer jedes Bild mach
{
mach 4x
{
  Das Bild anzeigen
}
} naechstes bild

Die ganzen Probleme haettest Du aber nicht, wuerdest Du das komische Tabellenlayout weglassen. Ich nehme mal an, alle Bilder sind gleich gross, oder? Dann weisst Du auch, wie breit 4 Bilder sind. Dann weisst Du auch wie breit ein Element sein muss damit 4 Bilder in eine Reihe passen. Noch Fragen?

Oder die Logik umdrehen.
Dies einer der wenigen Anwendungsfälle, bei denen foreach() nicht so optimal ist.
Hier würde eine Kombination aus count(), einer geschachtelten for()-Schleife für den Tabellenaufbau und ein array_shift() oder ein array_pop() (für rückwärts) besser sein.

Dann wäre auch die Tabelle immer HTML-konform

http://de2.php.net/manual/de/function.array-shift.php

Ein harzliches Glückauf

Tom vom Berg

[Steel]

Hoi!

Ich wuerde dann wohl trotzdem mit foreach arbeiten, einen Zaehler mitlaufen lassen und mit Modulo 4 spielen. Das ist aber alles ja gar nicht noetig. Jedenfalls, wenn die Aufgabenstellung nicht komplexer wird.

[Tom]

Hello,

Ich wuerde dann wohl trotzdem mit foreach arbeiten, einen Zaehler mitlaufen lassen und mit Modulo 4 spielen. Das ist aber alles ja gar nicht noetig. Jedenfalls, wenn die Aufgabenstellung nicht komplexer wird.

Das Problem dabei ist dann aber immer noch, dass Du die Zeile fertig stellen musst, wenn der Vorat an Bildern zu früh verbraucht wurde. Dafür benötigst Du auf jeden Fall noch eine for()-Schleife. Also warum nicht gleich die Struktur durch eine dedizierte Schleife aufbauen lassen.

ein array_shift() aus einem leeren Array liefert nur ein NULL und keinen Fehler, ist also geeignet dafür, die dedizierte Schleife einfach weiter laufen zu lassen und darauf zugreifen zu lassen.

Mein Vorschlag benötigt also nur ein count() für die Ermittlung der Gesamtzahl des Bildervorrats, eine  kurze Berechnung der beiden Schleifenparamter für Zeilen und Spalten (Zeile liegt ja hier sogar schon fest als Vorgabe) und dann kann es sofort losgehen mit der geschachtelten Schleife.

Der Code bleibt übersichtlich, kompakt und "html-sicher"

Außerdem würde ich glob() benutzen und dann als nächstes alle "Nicht-Bilder" aus dem Array "rausschießen". Anschließend erst die obigen Statements ausführen...

Ein harzliches Glückauf

Tom vom Berg

[schnipp]

Die ganzen Probleme haettest Du aber nicht, wuerdest Du das komische Tabellenlayout weglassen. Ich nehme mal an, alle Bilder sind gleich gross, oder? Dann weisst Du auch, wie breit 4 Bilder sind. Dann weisst Du auch wie breit ein Element sein muss damit 4 Bilder in eine Reihe passen. Noch Fragen?

So weit war ich auch schon und nein, anders kann ich das nicht lösen, weil die Bilder nun mal NICHT gleich groß sind, sonst hätte ich das schon längst mit Divs realisiert, was eh besser ist als Tabellen.

Ich poste hier mal den Link:
http://uchiki.net/images/nanatsuiro-drops

So soll es aussehen:
http://gallery.digik.net/gallery/119

Leider schaffe ich es mit Divs aber nicht die Bilder vertikal zu mitteln, sondern nur horizontal, weshalb ich auch auf Tabellen zurückgreifen musste.
Naja, und da ich mit PHP längst noch nicht so weit bin, versuche ich mal einen andere Lösung zu finden.
Danke trotzdem, falls das hier überhaupt noch jemand liest.

[at]

Hallo.

So weit war ich auch schon und nein, anders kann ich das nicht lösen, weil die Bilder nun mal NICHT gleich groß sind

Das ist nicht so wichtig, wenn wenigstens die Höhen bekannt sind.

sonst hätte ich das schon längst mit Divs realisiert, was eh besser ist als Tabellen.

Sinnlose Elemente sind nicht besser als unsinnige.

Ich poste hier mal den Link:
http://uchiki.net/images/nanatsuiro-drops

So soll es aussehen:
http://gallery.digik.net/gallery/119

Du willst also Listen aus Bildern generieren.

Leider schaffe ich es mit Divs aber nicht die Bilder vertikal zu mitteln, sondern nur horizontal, weshalb ich auch auf Tabellen zurückgreifen musste.

Es geht also nur noch darum, die Bilder vertikal zu zentrieren?

Naja, und da ich mit PHP längst noch nicht so weit bin, versuche ich mal einen andere Lösung zu finden.

Naja, die Maße der Bilder server-seitig auslesen zu können, wäre natürlich sehr vorteilhaft. Wenn du aber nur zwischen Hoch- und Querformat mit jeweils festen Höhen unterscheidest, könntest du mit Klassen arbeiten.
Andere Lösungen wären nicht mit allen gängigen Browsern kompatibel.

Danke trotzdem, falls das hier überhaupt noch jemand liest.

Gern geschehen. Bist du denn noch da?
MfG, at

[Cheatah]

Hi,

So, damit habe ich es zwar geschafft,

... bei einem Ergebnis zu bleiben, das zu erreichen *nicht* erstrebenswert ist - ganz gleich, ob darüber hinaus noch Fehler existieren oder nicht.

warum? :\

Das ist genau die Frage, die ich mir auch stelle. Warum gehst Du nicht auf die Ratschläge ein, die Dir gegeben werden?

Cheatah

[Texter mit x]

Bitte um Lösungsansätze, danke!

php kann zählen, auch bis vier. php kann auch fragen, ob vier erreicht wurde und dann </td></tr></tr><td> statt </td><td> ausgeben. php kann erneut zählen, auch bis vier ...

Bei der Aufgabe wäre mehr Lösungsansatz schon die Lösung.

[Tom]

Hello,

http://forum.de.selfhtml.org/archiv/2007/3/t148943/#m966732

Du musst nur dafür sorgen, dass alle Zeilen genausoviele Zellen haben (wenn nicht colspan oder rowspan benutzt wird), damit die Tabelle nachher valides HTML ist

Ein harzliches Glückauf

Tom vom Berg

[Thomas Luethi]

Hallo Tom,

Du musst nur dafür sorgen, dass alle Zeilen genausoviele Zellen haben (wenn nicht colspan oder rowspan benutzt wird), damit die Tabelle nachher valides HTML ist

Wie kommst Du darauf, dass eine Tabelle in allen Zeilen gleichviele
Zellen haben muss, um _valide_ zu sein?
(Dass es nicht "hübsch" ist, ist eine andere Sache...)

Folgendes ist valide, auch in XHTML 1.0 strict und 1.1 strict:

<table border="1">
        <tr>
          <td>Zelle 1</td>
          <td>Zelle 2</td>
          <td>Zelle 3</td>
          <td>Zelle 4</td>
        </tr>
        <tr>
          <td>Zelle 1</td>
          <td>Zelle 2</td>
        </tr>
      </table>

http://www.tiptom.ch/tests/mix/tabelle42.html
http://www.tiptom.ch/tests/mix/tabelle42a.html

Freundlicher Gruss,
Thomas

[Tom]

Hello,

Wie kommst Du darauf, dass eine Tabelle in allen Zeilen gleichviele
Zellen haben muss, um _valide_ zu sein?
(Dass es nicht "hübsch" ist, ist eine andere Sache...)

Ach!
Das habe ich mir aus einer etwas länglicheren Diskussion hier gemerkt, die vor bestimmt zwei Jahren oder länger her gelaufen ist und deshalb alle meine Tabellengeneratorscripte umgeschrieben.

Ist das (außer durch Nutzung des Validators) auch irgendwie abgesichert?

Ein harzliches Glückauf

Tom vom Berg

[ChrisB]

Hi,

Wie kommst Du darauf, dass eine Tabelle in allen Zeilen gleichviele
Zellen haben muss, um _valide_ zu sein?
(Dass es nicht "hübsch" ist, ist eine andere Sache...)

Ach!
Das habe ich mir aus einer etwas länglicheren Diskussion hier gemerkt, die vor bestimmt zwei Jahren oder länger her gelaufen ist und deshalb alle meine Tabellengeneratorscripte umgeschrieben.

Ist das (außer durch Nutzung des Validators) auch irgendwie abgesichert?

Dem Validator duerfte es herzlich egal sein, wie viele (>1) Zellen eine Tabellenzeile hat, und auch um col-/rowspan-Attribute kuemmert der sich hoechstens so weit, dass er ihren Inhalt gegen das Content Model (NUMBER) prueft. Anfangen "Nachzurechnen", ob "sich das auch aufgeht", wird der ganz sicher nicht :-)

Was die jeweiligen Browser mit "unvollstaendigen" Tabellen anfangen koennen/wollen, steht dann wieder auf einem anderen Blatt - jedenfalls nicht auf dem, welches mit "Validitaet" ueberschrieben ist.
Wenn allerdings hoechstens in der letzten Zeile ein paar Zellen fehlen, wuerde ich da auch keine allzu grossen Probleme erwarten.

Allerdings ist es ja auch kein sonderlich grosses Problem, da fuer eine "passende" Anzahl (leerer) Zellen zu sorgen, bspw. wie du schon vorschlugst mit einer for-Schleife, oder in dem man anderweitig einen Zaehler mitlaufen laesst, ...

MfG ChrisB

[Tom]

Hello,

Allerdings ist es ja auch kein sonderlich grosses Problem, da fuer eine "passende" Anzahl (leerer) Zellen zu sorgen, bspw. wie du schon vorschlugst mit einer for-Schleife, oder in dem man anderweitig einen Zaehler mitlaufen laesst, ...

Klar. Aber wenn es denn nun doch nicht nötig ist?
Ich würde meine Modulchen gerne alle valide halten
und im nächsten Moment natürlich bekannte Browserfallen vermeiden, wenn es ohne Stress möglich ist.

Aber nutzlosen Code mag ich nicht konservieren.

Ein harzliches Glückauf

Tom vom Berg