[ex³]

Nabend,

Ich habe verschiedene Bildinfos in der Datenbank die ich zusammen mit den Bildern in einer HTML Tabelle auflisten will. Alle 5 Spalten wird eine neue Zeile gemacht werden die sich dann wieder füllt.

Ich denke Modulo geht schon in die richtige Richtung, aber ich bekomm einfach keine saubere Tabelle zustande...

Tst, ich kriegs einfach nicht...Sorry für den komischen Code allerdings befinde ich mich in der View und da siehts etwas anders aus.

PHP-Code:

<table border="1">
<tr>

<?php foreach($this->images as $key => $image) : ?>
<td>
    <img src="">
</td>
<?php if($key % 3 == 0) : ?>
</tr><tr>
<?php else : ?>
<td></td>
<?php endif; ?>

<?php endforeach; ?>
</tr>

</table>

[$traight-$hoota]

also zunächst mal, key is auch immer ne zahl? *g*
Aber ich vermute das problem kommt einmal daher, dass du in der else-Anweisung immer eine weitere Spalte einfügst, die sollte da nicht hin.
Und in der letzten Zeile bleibt ja noch platz übrig, wenn dort nur ein oder zwei bilder drin stehen; also solltest du den rest mit leerzellen ausfüllen (die anzahl bekommst du über einen modulo am ende raus).

[robo47]

wie wäre es, das ganze "fließend" ohne tabelle zu machen ? bin damit selbst aktuell etwas am versuchen, einfach nen div den man floatet mit vielleicht fester größe (kommt auf deine bilder an) und durch das floaten wandern die halt in reihen, wenn dem ganzen mehr platz zur Verfügung steht sind es weniger reihen und ansonsten halt mehr.

Ansonsten ist dein problem dass du das array mit "dummys" füllen musst um auf eine sauber durch die anzahl der elemente pro reihe teilbare menge zu kommen, damit eine reihe nicht auf einmal nur noch ein <td></td> hat sondern selbst wenn nur 1 bild drin ist, auch die weiteren 4 <td></td>.

entweder auf for-schleifen umsteigen und mit ner erkennung und break arbeiten oder weiter mit foreach und dann halt das array mit einer passenden Menge Daten füllen..

[ex³]

So hab im Netz nen Schnipsel aufgabelt und das sieht soweit ganz gut aus.

@Straight
Wie geschrieben muss ich noch die leeren Zeilen ergänzen allerdings steig ich grad nicht durch wie der modulo das hinkriegen soll

PHP-Code:

<table border="1">
<?php foreach($this->images as $key => $image) : ?>
<?php if($key % 5 == 0) : ?>
<?php if($key != 0) : ?>
</tr>
<? endif; ?>
<tr>
<? endif; ?>
<td><img title=""></td>



<?php endforeach; ?>
</table>

[$traight-$hoota]

PHP-Code:

<table>
<tr>
<?php foreach($this->images as $key => $image) : ?>
<td><!--img--></td>
<?php if($key % 3 == 0) : ?>
</tr><tr>
<?php endif; ?>
<?php endforeach; ?>
<?php for($i = 0; $i < count($this->images) % 3; $i++) : ?>
<td></td>
<?php endif; ?>
</tr>
</table>

[Basti]

Hast noch vergessen, beim lezten Bild den Sack wieder zuzumachen, also colspan anzugeben und </tr>.

Letztes Bild hat $key === count($this->images) - 1, was du einmal vor der Schleife ausrechnen solltest und colspan ist $iNumCols + 1 - ($key % $iNumCols), glaub ich.

Hilfreich zum debuggen ist es, den Quellcode (HTML-Ausgabe) einzurücken.

Basti

[Neq']

Wie Benjamin schon geschrieben hat, wär es auch ne interessantere und wahrscheinlich sogar einfachere Lösung eine gefloatete Liste zu erstellen. Der gibst du einfach deine gewünschte Breite (wenn du 5 Bilder hast musst du halt ausrechnen wie die entgültige Breite ist). Wird die Breite überschritten, wandert das in eine neue Zeile. Und basiert nur auf CSS&HTML.

[ex³]

Die Thumbnails haben eine unterschiedliche Breite und Höhe. Unter jedem Thumb soll noch eine Checkbox sein und vielleicht noch 1-2 Icons zum klicken.
Die Dinge unter jedem Thumb sollen dabei in der ganzen Zeile auf der gleichen höhe sein und das ist mit floatenden DIVs nicht ganz einfach.

Oder geht das mit verschachtelten Listen einfacher? etwa so:

<li><img2></li>
<ul>
<li>Edit Bild 2 | Delete Bild 2 | ...</li>
</ul>
<li><img3></li>
 

Ich würd ja lieber PEAR Datagrid einsetzen. Aber ich möchte das nicht so mit ZF verwurschteln.

[ljungi]

Du programmierst nicht zufällig fast das gleiche wie ich?

[dago]

@ex³

Dazu müsstest du einfach einen DIV-Container mit fester Breite und Höhe nehmen. Darin kannst du dann das Thumbnail positionieren (z.B. zentriert) und die weiteren Inhalte wie du möchtest.

Allerdings je nach dem wie das Design der Seite realisiert wurde, musst du mit floaten etwas experimentieren bevor du da eine in allen Browsern einheitliche Darstellung erzeugst.

Hab das schon selbst realisiert gehabt. Auf Tabellen bist du hier auf jeden Fall nicht angewiesen.


EDIT:
Mit Listen-Elementen würde es auch gehen. Einfach eine ungrade Liste nehmen (<ul> ... </ul>) und darin pro Thumbnail ein Listen-Element (<li><img ... /></li>) erzeugen.

[ex³]

Da käme schon das nächste prob. wenn meine thumbs nicht alle die gleich größe haben sondern ungefähr relativ verkleinert wurden dann würde ich sie gern auch VERTIKAL zentrieren und das ist und das ist auch nicht so einfach.

Das ganze ist für ein Admincenter da reicht vorerst der Tabellenkram.

Übrigens. Osthofen...das liegt doch hinter Worms.

[Basti]

Zitat von dago

eine ungrade Liste

[dago]

@ex³
Hast schon recht. Kenne außer ein paar Tricks auch keine saubere Lösung.

Zitat von ex³

Übrigens. Osthofen...das liegt doch hinter Worms.

Jup, genau.


@Basti
Weiß selbst nicht wie ich da auf "ungerade" komme. Gemeint wahr unsortierte Liste.


EDIT:
@ex³
Eben fällt mir doch was ein. Eigentlich müsstest du ja die Breite und die Höhe des Thubnail kennen. Du müsstest hier halt die Thumbnails nicht global in der CSS Datei, sondern direkt jedes Thumbnail einzeln positionieren.

So in etwa könnte es aussehen:

<div class="ThumbBox">
    <img style="position:absolute; top:50%; left; 50%; width:100px; height:80px; margin: -40px 0 0 -50px;" src="..." alt="..." />
</div>

Die richtigen Werte für margin müsstest du dann mit PHP vorher oder im Template berechnen.

[Neq']

Zitat von ex³

Da käme schon das nächste prob. wenn meine thumbs nicht alle die gleich größe haben sondern ungefähr relativ verkleinert wurden dann würde ich sie gern auch VERTIKAL zentrieren und das ist und das ist auch nicht so einfach.

Und wo liegt da das Problem? Du kannst doch jedes Listenelement vertikal zentrieren lassen, oder versteh ich dein Problem gerade nicht?

[dago]

@Neq'
Und wie würdest du da Browser übergreifend vorgehen?