Tipps für viele Bilder - Redundanz vermeiden

[Maetzzen]

Hallo zusammen,

ich bräuchte Hilfe bezüglich des Fotoalbums unserer Vereinswebseite. Ich benutze zur Darstellung der Bilder diese "Lightbox", damit diese hübsch aussehen und das Fotoalbum leicht zu bedienen ist.

Die Fotoalben sind auf verschiedene HTML-Seiten verteilt, eben nach Vereinsfesten oder Jahrgängen geordnet. Dazu habe ich mehrere Tabellen erstellt, in denen sich Pro Zeile vier Miniaturbilder befinden, welche dann beim anklicken das größere Bild in der Lightbox anzeigen. Beispielbild

Nur leider wird das alles immer unübersichtlicher, je mehr Fotos ich hinzufüge, was an folgendem Beispiel bestimmt nachvollziehbar ist:

<h1 class="headliner">Ausfahrt Black Forest</h1>
    <table class="albumcover">
    <tr><td><a href="../fotos/alben/ausfahrt/blackforest2016/1.jpg" data-lightbox="roadtrip" title="Ausfahrt 2016"><img src="../fotos/alben/ausfahrt/blackforest2016/1mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/ausfahrt/blackforest2016/2.jpg" data-lightbox="roadtrip" title="Ausfahrt 2016"><img src="../fotos/alben/ausfahrt/blackforest2016/2mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/ausfahrt/blackforest2016/3.jpg" data-lightbox="roadtrip" title="Ausfahrt 2016"><img src="../fotos/alben/ausfahrt/blackforest2016/3mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/ausfahrt/blackforest2016/4.jpg" data-lightbox="roadtrip" title="Ausfahrt 2016"><img src="../fotos/alben/ausfahrt/blackforest2016/4mini.jpg" class="albumcover"/></a></td></tr>
        <tr><td><a href="../fotos/alben/ausfahrt/blackforest2016/5.jpg" data-lightbox="roadtrip" title="Ausfahrt 2016"><img src="../fotos/alben/ausfahrt/blackforest2016/5mini.jpg" class="albumcover"/></a></td>
            <td><a href="../fotos/alben/ausfahrt/blackforest2016/6.jpg" data-lightbox="roadtrip" title="Ausfahrt 2016"><img src="../fotos/alben/ausfahrt/blackforest2016/6mini.jpg" class="albumcover"/></a></td></tr>
    </table>
    
    <h1 class="headliner">Bierprämierung mit Bierkönig</h1>
    <table class="albumcover">
    <tr><td><a href="../fotos/alben/sonstiges/bierprobe2016/1.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/1mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/sonstiges/bierprobe2016/2.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/2mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/sonstiges/bierprobe2016/3.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/3mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/sonstiges/bierprobe2016/4.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/4mini.jpg" class="albumcover"/></a></td></tr>
        <tr><td><a href="../fotos/alben/sonstiges/bierprobe2016/5.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/5mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/sonstiges/bierprobe2016/6.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/6mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/sonstiges/bierprobe2016/7.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/7mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/sonstiges/bierprobe2016/8.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/8mini.jpg" class="albumcover"/></a></td></tr>
        <tr><td><a href="../fotos/alben/sonstiges/bierprobe2016/9.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/9mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/sonstiges/bierprobe2016/10.jpg" data-lightbox="roadtrip" title="Bierprämierung 2016"><img src="../fotos/alben/sonstiges/bierprobe2016/10mini.jpg" class="albumcover"/></a></td>
        </tr>
    </table>
    
    <h1 class="headliner">B-Party</h1>
    <table class="albumcover">
    <tr><td><a href="../fotos/alben/bparty/bparty2016/1.jpg" data-lightbox="roadtrip" title="Buchhau-Party 2016"><img src="../fotos/alben/bparty/bparty2016/1mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/bparty/bparty2016/2.jpg" data-lightbox="roadtrip" title="Buchhau-Party 2016"><img src="../fotos/alben/bparty/bparty2016/2mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/bparty/bparty2016/3.jpg" data-lightbox="roadtrip" title="Buchhau-Party 2016"><img src="../fotos/alben/bparty/bparty2016/3mini.jpg" class="albumcover"/></a></td><td></td></tr>
    </table>
    
    <h1 class="headliner">Motorradweihe</h1>
    <table class="albumcover">
    <tr><td><a href="../fotos/alben/weihe/weihe2016/1.jpg" data-lightbox="roadtrip" title="Motorradweihe 2016"><img src="../fotos/alben/weihe/weihe2016/1mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/weihe/weihe2016/2.jpg" data-lightbox="roadtrip" title="Motorradweihe 2016"><img src="../fotos/alben/weihe/weihe2016/2mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/weihe/weihe2016/3.jpg" data-lightbox="roadtrip" title="Motorradweihe 2016"><img src="../fotos/alben/weihe/weihe2016/3mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/weihe/weihe2016/4.jpg" data-lightbox="roadtrip" title="Motorradweihe 2016"><img src="../fotos/alben/weihe/weihe2016/4mini.jpg" class="albumcover"/></a></td></tr>
        <tr><td><a href="../fotos/alben/weihe/weihe2016/5.jpg" data-lightbox="roadtrip" title="Motorradweihe 2016"><img src="../fotos/alben/weihe/weihe2016/5mini.jpg" class="albumcover"/></a></td>
            <td><a href="../fotos/alben/weihe/weihe2016/6.jpg" data-lightbox="roadtrip" title="Motorradweihe 2016"><img src="../fotos/alben/weihe/weihe2016/6mini.jpg" class="albumcover"/></a></td>
        <td><a href="../fotos/alben/weihe/weihe2016/7.jpg" data-lightbox="roadtrip" title="Motorradweihe 2016"><img src="../fotos/alben/weihe/weihe2016/7mini.jpg" class="albumcover"/></a></td></tr>
    </table>

Nun zu meiner Frage. Inwiefern ist es schlimm, wenn ein HTML/PHP Dokument aus sehr vielen immer wiederkehrenden Zeilen besteht, außer der Tatsache, dass ich die Übersicht verliere?

Wie kann ich das Problem beseitigen? Die Alben sind ja immer nach dem selben Schema aufgebaut.. Das Album besteht aus Tabellen, diese bestehen aus Links, die kleine Miniaturbilder beinhalten und den Pfad zum eigentlichen Bild. Die Bilder sind immer nach dem selben Schema benannt (Zahlenfolge.jpg / Zahlenfolgemini.jpg).

Wie kann ich also auch mehrere (hundert) Bilder auf einer Website darstellen ohne dass es mit einem riesigen Dokument (was die Anzahl der Zeilen und Zeichen angeht) endet?

Ich bedanke mich schon mal für eure Antworten. Gerne nehme ich wieder verweise auf andere Tutorials an.

Vielen Dank!

Gruß Maetzzen

[Matthias Apsel]

Hallo Maetzzen,

Die Fotoalben sind auf verschiedene HTML-Seiten verteilt, eben nach Vereinsfesten oder Jahrgängen geordnet. Dazu habe ich mehrere Tabellen erstellt, in denen sich Pro Zeile vier Miniaturbilder befinden, welche dann beim anklicken das größere Bild in der Lightbox anzeigen.

Eine Tabelle ist nicht das geeignete Markup.

Nur leider wird das alles immer unübersichtlicher, je mehr Fotos ich hinzufüge, was an folgendem Beispiel bestimmt nachvollziehbar ist:

Ja, das bleibt nicht aus. Alles, was du darstellen möchtest, muss auch in das HTML geschrieben werden. Redundanzen kannst du nur unter Nutzung einer serverseitigen Programmiersprache vermeiden.

Ich schlage folgendes Markup vor:

<h1>Galerien</h1>
<h2>Ausfahrt Black Forest</h2>
<ul>
  <li>
    <a href="..." data-lightbox="..." title="..."><img src="..."></a>
    <!-- ... -->
  </li>
</ul>
<h2> 
   <!-- ... -->

<h1 class="headliner">Ausfahrt Black Forest</h1>
    <table class="albumcover">
    <tr><td><a href="../fotos/alben/ausfahrt/blackforest2016/1.jpg" data-lightbox="roadtrip" title="Ausfahrt 2016"><img src="../fotos/alben/ausfahrt/blackforest2016/1mini.jpg" class="albumcover"/></a></td>

Deine Bilder brauchen noch ein alt-Attribut mit einem aussagekräftigen Alternativtext, ein title-Attribut für die Links ist hingegen nicht unbedingt notwendig.

Nun zu meiner Frage. Inwiefern ist es schlimm, wenn ein HTML/PHP Dokument aus sehr vielen immer wiederkehrenden Zeilen besteht, außer der Tatsache, dass ich die Übersicht verliere?

Gar nicht.

Wie kann ich das Problem beseitigen?

s.o.

Wie kann ich also auch mehrere (hundert) Bilder auf einer Website darstellen ohne dass es mit einem riesigen Dokument (was die Anzahl der Zeilen und Zeichen angeht) endet?

Das HTML-Dokument muss alles enthalten, was angezeigt werden soll. Im erzeugenden (z.B.) PHP-Dokument kannst du die redundanten Teile in Schleifen verpacken.

Vielleicht sollte man auch nicht alle Galerien in eine Seite packen, sondern die noch nach Jahren gruppieren.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

Ich schlage folgendes Markup vor:

<h1>Galerien</h1>
<h2>Ausfahrt Black Forest</h2>
<ul>
  <li>
    <a href="..." data-lightbox="..." title="..."><img src="..."></a>
    <!-- ... -->
  </li>
</ul>
<h2> 
   <!-- ... -->

Wenn es zu jeder Vorschaugalerie auch noch einen einleitenden Text geben soll, könnte auch alles, was zu einem Ereignis gehört in ein section-Element verpackt werden.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Wenn es zu jeder Vorschaugalerie auch noch einen einleitenden Text geben soll, könnte auch alles, was zu einem Ereignis gehört in ein section-Element verpackt werden.

Und das auch ohne einen solchen Text. Die wiederholten h2 sind ein sicheres Zeichen dafür.

Sinnvollerweise erhält jede section eine ID. Mit den von dir schon angesprochenen Änderungen +alt −title ergibt sich:

<h1>Galerien</h1>
<section id="ausfahrt-black-forest">
  <h2>Ausfahrt Black Forest</h2>
  <ul>
    <li>
      <a href="..." data-lightbox="..."><img src="..." alt="..."></a>
      <!-- ... -->
    </li>
  </ul>
</section>
<section id="...">
  <h2> 
  <!-- ... -->

LLAP 🖖

[Maetzzen]

@@Matthias Apsel

Wenn es zu jeder Vorschaugalerie auch noch einen einleitenden Text geben soll, könnte auch alles, was zu einem Ereignis gehört in ein section-Element verpackt werden.

Und das auch ohne einen solchen Text. Die wiederholten h2 sind ein sicheres Zeichen dafür.

Sinnvollerweise erhält jede section eine ID.

Danke für den Tipp. Das Sectionelement war mir bisher noch nicht bekannt oder besser gesagt, wusste ich nicht in welcher Form ich dieses benutzen könnte.

[Maetzzen]

Eine Tabelle ist nicht das geeignete Markup.

Habe ich mir schon gedacht.

Alles, was du darstellen möchtest, muss auch in das HTML geschrieben werden. Redundanzen kannst du nur unter Nutzung einer serverseitigen Programmiersprache vermeiden.

Ich schlage folgendes Markup vor:

<h1>Galerien</h1>
<h2>Ausfahrt Black Forest</h2>
<ul>
  <li>
    <a href="..." data-lightbox="..." title="..."><img src="..."></a>
    <!-- ... -->
  </li>
</ul>
<h2> 
   <!-- ... -->

Das werde ich auf jedenfall ausprobieren.

Deine Bilder brauchen noch ein alt-Attribut mit einem aussagekräftigen Alternativtext, ein title-Attribut für die Links ist hingegen nicht unbedingt notwendig.

wird ebenfalls ergänzt.

Nun zu meiner Frage. Inwiefern ist es schlimm, wenn ein HTML/PHP Dokument aus sehr vielen immer wiederkehrenden Zeilen besteht, außer der Tatsache, dass ich die Übersicht verliere?

Gar nicht.

Das freut mich :)

Vielleicht sollte man auch nicht alle Galerien in eine Seite packen, sondern die noch nach Jahren gruppieren.

Hierfür erstelle ich einfach verschiedene html Seiten für jedes Album extra sozusagen, auf die ich dann mit Links zugreife? Sobald es mehr Bilder werden habe ich vor, diese nach Jahrgängen zu ordnen, wobei man dann in meiner Navigation unter Bilder aus der Unterliste den jeweiligen Jahrgang als eigene HTML-Seite aufrufen kann. Dann verteilt sich das ganze wiederum auf mehrere verschiedene Seiten. Hast du das in etwa so gemeint?

Vielen Dank!

[Matthias Apsel]

Hallo Maetzzen,

Hierfür erstelle ich einfach verschiedene html Seiten für jedes Album extra sozusagen, auf die ich dann mit Links zugreife? Sobald es mehr Bilder werden habe ich vor, diese nach Jahrgängen zu ordnen, wobei man dann in meiner Navigation unter Bilder aus der Unterliste den jeweiligen Jahrgang als eigene HTML-Seite aufrufen kann. Dann verteilt sich das ganze wiederum auf mehrere verschiedene Seiten. Hast du das in etwa so gemeint?

Ja.

Bis demnächst
Matthias

[Rolf b]

...da geht man zwischendurch Kaffee holen und schon sind 3 andere Antworten da :)

Von der table wollte ich auch abraten, einerseits weil es keine tabellarischen Daten sind, und andererseits weil es gerade hier ungünstig ist. Es skaliert schlecht mit der Größe des Browserfensters. Warum soll ein Vollbild auf einem Full-HD Monitor nur 4 Bilder nebeneinander anzeigen?

Für die vorgeschlagene Lösung mit ul und li empfehle ich Dir noch, dem ul Element eine class="albumsegment" oder so zu geben und dann ul und li entsprechend zu stylen:

ul.albumsegment {
   padding: 0; margin: 0;
   display: block;
   list-style:none;
}

ul.albumsegment li {
   padding: 0; margin: 0;     /* Nach Geschmack setzen! */
   display: inline-block;
   width: 200px;              /* Ändern gemäß deiner Vorschaugröße */
   list-style:none;
}

Wenn Du UNBEDINGT eine Maximalzahl von Vorschaubildern nebeneinander haben willst, dann gib dem ul eine max-width.

Wie Du mit width und height der li umgehst, ist Deine Sache und hängt von deinen Vorschaubildern ab. Möglicherweise mischt sich hier auch noch das Lightroom-Skript ein. Musst Du ausprobieren.

Um ein Dekor der Vorschaubilder brauchst Du Dich wohl nicht zu kümmern, das macht Lightroom offenbar für Dich.

Rolf

[Maetzzen]

Von der table wollte ich auch abraten einerseits weil es keine tabellarischen Daten sind, und andererseits weil es gerade hier ungünstig ist. Es skaliert schlecht mit der Größe des Browserfensters. Warum soll ein Vollbild auf einem Full-HD Monitor nur 4 Bilder nebeneinander anzeigen?

ich habe meine ganze Seite mit fixen Pixelwerten aufgebaut. Ich weiß, dass es schönere Lösungen dafür gibt, aber als ich angefangen habe war das für mich die am leichtesten zu verstehenden Vorgehensweise.

Für die vorgeschlagene Lösung mit ul und li empfehle ich Dir noch, dem ul Element eine class="albumsegment" oder so zu geben und dann ul und li entsprechend zu stylen.

Werde ich ausprobieren, sobald ich die Änderungen vornehme.

Ich beschäftige mich nun seit etwa einem Jahr mit dem Thema html und css, sofern man das "beschäftigen" nennen kann. Die Webseite habe ich mehr oder weniger durch ausprobieren zusammengestellt. Ebenso habe ich mehrmals die ganze Struktur der Seite komplett überarbeitet, da mir Fehler aufgefallen sind, die man viel einfacher lösen könnte. Wenn ich Zeit habe möchte ich mich auch von diesen festen Pixelangaben trennen und mehr zu einer responsiven Webseite gehen, was mir aber derzeit zu viel Zeit in Anspruch nehmen würde.

Ich finde es schön, dass es so ist. Immer wenn ich neue Sachen auf der Seite ergänze und diese dann an der Menge drastisch zunehmen kommen wieder neue Herausforderungen, die mich zu einem Umdenken der Struktur zwingen, damit nicht alles in einem Codesalat endet.

Dabei möchte ich mich noch einmal an alle die mir bisher auf meine Beiträge geantwortet haben bedanken, dass man hier trotz Unwissenheit und fatalen Fehlern, die beim Anblick bestimmt einigen von euch die Haare raufen lassen, stets mit hilfreichen Antworten rechnen kann.

Gruß Maetzzen