Vorgehensweise für Image-Thumbnail-Einbindung gesucht

[Konni]

Hallo Forum,

ich möchte in eine Seite, in der der User bisher bereits Infos verschiedenster Art einbinden kann, zusätzlich die Möglichkeit anbieten, eigen Uploads (Images, PDFs, DOCs, XLSs) einzubinden.

Upload, Thumbnailerzugung, usw. sind kein Problem.

Jetzt suche ich nach einer Möglichkeit, die Thumbnails als Grid später in den Vorgang einzubinden. Jedes Thumb hat eine Überschrift und ggf. eine Beschreibung. Alles, was ich im Netz dazu finde, wmpfinde ich ein wenig zu "überladen".

Es müßte doch möglich sein, die Thumbs in ein DIV desgestalt einzubunden, dass sie nett aussehen, sie Title und Beschrreibung enthalten und einigermaßen responsive sind?

Mir fehlen grad' die Ideen hierzu und im Netz war ich leider nicht fündig.

Hat jemand von Euch eine Idee oder das schonmal gut ausschauend in die Tat umgesetzt? Also, "gut aussehend" auf die Thumbs inkl. Title und Text gemeint, nicht auf den Ersteller... ;)

Konni

[Matthias Apsel]

Hallo Konni,

Schau mal in unser Wiki

• figure
• Bilder präsentieren

Bis demnächst
Matthias

[Konni]

Hallo Konni,

Schau mal in unser Wiki

• figure
• Bilder präsentieren

Hallo Mathias,

danke, aber mir geht es noch viel mehr um das Grid als um die Bildunterschrift. Insgesamt finde ich die Beispiele auch sehr verspielt.

Außerdem habe ich mit der Bildbreite ein großes Problem. In Deiner Klasse "figure_einzel" wird eine Bildbreite von 32,8% festgelegt. Das führt bei meinen Thumbnails von 200x200px dazu, dass sie vergrößert werden und nur 3 anstelle von z.b. 6 Thumbs (je nach Viewport) in einer Reihe stehen. Wenn ich die Breite z.b. auf 15% verkleinere, dann stehen zwar mehr Thumbs in einer Reihe, aber die Gridabstände stimmen in Reihe 1 und Reihe 2 nicht mehr übereinander.

Summa Summarum: Das figure und das figurecapture Element kannte ich nicht, aber in Sachen Grid bin ich nicht wirklich weiter gekommen.

Konni

[Matthias Apsel]

Hallo Konni,

Summa Summarum: Das figure und das figurecapture Element kannte ich nicht, aber in Sachen Grid bin ich nicht wirklich weiter gekommen.

gib den figure-elementen display: inline-block; und sie ordnen sich wie gewünscht an, falls ich dich richtig verstanden habe.

Bis demnächst
Matthias

[Konni]

Hi Matthias,

gib den figure-elementen display: inline-block; und sie ordnen sich wie gewünscht an, falls ich dich richtig verstanden habe.

Das haben sie doch bereits...

Konni

[Matthias Apsel]

Hallo Konni,

Dann wäre es an der Zeit für ein online-Beispiel. Zu zeigst, was du hast und was dir nicht gefällt.

Bis demnächst
Matthias

[Konni]

Dann wäre es an der Zeit für ein online-Beispiel. Zu zeigst, was du hast und was dir nicht gefällt.

Hallo Matthias,

einverstanden:

Hier siehst Du Dein Beispiel, das ich als Gerüst genommen habe mit 5 Images.

Das Originalimage ist aber ein 100x100 Thumbnail und es wäre eigentlich schön, wenn es auch nicht vergrößert würde. Das wärs eigentlich schon, der Rest Deines Codes läuft ansonsten bisher auch bei mir sauber durch.

Konni

[MrMurphy1]

Hallo,

Das [Originalimage ]... ist aber ein 100x100 Thumbnail

Es wäre schön wenn du zunächst mal alle Anforderungen offen legen würdest anstatt dir Lösungen erstellen zu lassen, die auf Grund mangelnder Informationen von dir nicht richtig sein können.

Also: Was ist dir sonst noch wichtig?

Gruss

MrMurphy

[Konni]

Hallo,

Das [Originalimage ]... ist aber ein 100x100 Thumbnail

Es wäre schön wenn du zunächst mal alle Anforderungen offen legen würdest anstatt dir Lösungen erstellen zu lassen, die auf Grund mangelnder Informationen von dir nicht richtig sein können.

Also: Was ist dir sonst noch wichtig?

Nichts.

Konni

[IsyChan]

Das Originalimage ist aber ein 100x100 Thumbnail und es wäre eigentlich schön, wenn es auch nicht vergrößert würde. Das wärs eigentlich schon, der Rest Deines Codes läuft ansonsten bisher auch bei mir sauber durch.

So vielleicht? http://jsfiddle.net/x4pgpxvs/5/

[Konni]

Das Originalimage ist aber ein 100x100 Thumbnail und es wäre eigentlich schön, wenn es auch nicht vergrößert würde. Das wärs eigentlich schon, der Rest Deines Codes läuft ansonsten bisher auch bei mir sauber durch.

So vielleicht? http://jsfiddle.net/x4pgpxvs/5/

Hi,

ja, so hatte ich es auch versucht, aber schau mal, was dann passiert, wenn Du viele Images hast:

Hier...

Konni

[MrMurphy1]

Hallo,

ich würde das folgendermaßen machen:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Bildergalerie 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   /*Grundeinstellungen*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
   }
   /*Spezielle Einstellungen*/
   @media all {
      main {
         display: flex;
         flex-wrap: wrap;
         /* Die unterste der drei folgenden Möglichkeiten ist aktiv.
            Zum Testen einfach mal tauschen. */
         justify-content: space-between;
         justify-content: flex-start;
         justify-content: space-around;
      }
      figure,
      figcaption {
         padding: 0;
         margin: 0;
      }
      figure {
         position: relative;
         max-width: 100px;
         margin: 0.3rem 0.2rem;
      }
      figure img {
         max-width: 100%;
         display: block;
      }
      figcaption {
         text-align: center;
         position: absolute;
         bottom: 0;
         width: 100%;
         color: white;
         background: rgba(0,0,0,0.5);
      }
   }
   </style>
</head>
<body>
   <main>
      <figure>
         <img src="http://www.andre-schuerrle.de/wp-content/themes/andre/library/images/facebook_post_thumbnail_100x100.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
         <figcaption>Nürnberger Tor</figcaption>
      </figure>
      <p>Die restlichen Bilder in figure-Elementen wie das erste (oder dieses bliebig häufig kopieren) und diesen Hinweis löschen.</p>
   </main>
</body>
</html>

Gruss

MrMurphy

[Konni]

Hallo,

ich würde das folgendermaßen machen: ...

Hallo,

danke, das sieht schon viel besser aus. Im Grunde könnte ich damit arbeiten. :-)

Deine Lösung hat einen kleinen Schönheitsfehler. Die Bilder der letzten Zeile des Grids verteilen sich auf die komplette Zeile. Wenn Du jetzt zufällig genau 2 Images in der letzten Zeile hast, sieht das etwas unglücklich aus.

Kann man daran "noch drehen"?

Und:

Kannst Du mir sagen, warum Du die hier importierst? (@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);)

Konni

[MrMurphy1]

Hallo

Kann man daran "noch drehen"?

Wie hättest du es denn gerne? Ich dachte, du hast alle Anforderungen genannt?

Hast du mal durch Tausch in der Reihenfolge die drei genannten "justify-content"-Möglichkeiten ausprobiert?

Ein Kompromiss wird in der letzte Zeile bei einer nicht passenden Anzahl von Bildern immer notwenig sein.

Kannst Du mir sagen, warum Du die hier importierst? (@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);)

Das ist eine Standardeinstellung von mir, da ich häufig mit den Iconfonts arbeite. Das kannst du problemlos löschen.

Gruss

MrMurphy

[Konni]

Hallo,

Kann man daran "noch drehen"?

Wie hättest du es denn gerne? Ich dachte, du hast alle Anforderungen genannt?

Naja... aber da sind doch nicht die Anforderungen enthalten, die erst durch die Lösung entstehen?! ;)

Hast du mal durch Tausch in der Reihenfolge die drei genannten "justify-content"-Möglichkeiten ausprobiert?

Ja. So scheint es zu gehen: justify-content: space-between; justify-content: space-around; justify-content: flex-start;

Ein Kompromiss wird in der letzte Zeile bei einer nicht passenden Anzahl von Bildern immer notwenig sein.

Möglich. Aber jetzt grad' scheint es zufriedenstellend dargestellt zu werden.

Kannst Du mir sagen, warum Du die hier importierst? (@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);)

Das ist eine Standardeinstellung von mir, da ich häufig mit den Iconfonts arbeite. Das kannst du problemlos löschen.

Hab ich mir schon gedacht und es entsprechend auch schon gelöscht.

Danke für Deine Hilfe,

Konni

[Konni]

Hallo

  * {
     box-sizing: border-box;
  }

bewirkt bei mir, dass ein (früheres) Image-Icon plötzlich winzig klein angezeigt wird. Wenn ich die Anweisung lösche, ist es wieder normal groß und mein Thumbnail-Grid sieht unverändert aus.

Sollte ich die Anweisung dennoch nutzen? Was genau macht die?

Gruß, Konni

[IsyChan]

Hallo,

  * {
     box-sizing: border-box;
  }

bewirkt bei mir, dass ein (früheres) Image-Icon plötzlich winzig klein angezeigt wird. Wenn ich die Anweisung lösche, ist es wieder normal groß und mein Thumbnail-Grid sieht unverändert aus.

Sollte ich die Anweisung dennoch nutzen? Was genau macht die?

hier wird dir alles genau erklärt: http://little-boxes.de/lb1/7.2-das-box-modell-in-der-uebersicht.html. Ich würde es dir empfehlen drin zu lassen. Damit wird es leichter Breiten zu berechnen.

[Auge]

Hallo

kleine Maneuverkritik:

   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->

Googlecode schließt demnächst seine Pforten. HTML5shiv ist mittlerweile zu Github umgezogen.

   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
   /* bla blubb */
   </style>

Braucht man diese Angaben, wenn man HTML5shiv benutzt? Ist das nicht doppelt gemoppelt?

Tschö, Auge

[MrMurphy1]

Hallo

Googlecode schließt demnächst seine Pforten. HTML5shiv ist mittlerweile zu Github umgezogen.

Bis Januar funktioniert Googlecode aber wohl noch. Und zu Github kann meiner Kenntnis nach kein direkter Link gesetzt werden.

Persönlich halte ich diesen Eintrag bereits seit einiger Zeit eh' für überflüssig, aber ohne den Eintrag habe ich in der Regel die IE-Jammerer am Hals. Aber schaden tut er auch nicht. Selbst dann, wenn im Januar Googlecode seine Pforten schließt.

Braucht man diese Angaben, wenn man HTML5shiv benutzt? Ist das nicht doppelt gemoppelt?

Nein, das ist nicht doppelt gemoppelt. Für ältere IE sind die Angaben zusätzlich erforderlich.

Praktisch ist die Angabe nur noch für das main-Element erforderlich, da der IE11 sie benötigt.

Gruss

MrMurphy

[Auge]

Hallo

Braucht man diese Angaben, wenn man HTML5shiv benutzt? Ist das nicht doppelt gemoppelt?

Nein, das ist nicht doppelt gemoppelt. Für ältere IE sind die Angaben zusätzlich erforderlich.

Aha, mir war so, als würde HTML5shiv auch die CSS-Regeln erzeugen.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Braucht man diese Angaben, wenn man HTML5shiv benutzt? Ist das nicht doppelt gemoppelt?

Nein, das ist nicht doppelt gemoppelt. Für ältere IE sind die Angaben zusätzlich erforderlich.

Doch, ist es. Nein, sind sie nicht.

Aha, mir war so, als würde HTML5shiv auch die CSS-Regeln erzeugen.

Da ist dir richtig. Im Code ab Zeile 231.

LLAP 🖖

[Auge]

Hallo

Nur mal so als Tip.

Im Code ab Zeile 231.

Man kann bei Github explizit auf Zeilen linken. In der Codeansicht einer Datei haben die alle einen eigenen Anker (hier #L231). Selbst die Codezeile als solche hat einen eigenen Anker (hier #LC231), wahrscheinlich für JS-Voodoo mit der Kommentarfunktion. Mit einem Klick auf die Zeilennummer passt sich die Adresszeile an, wo man sich dann die vollständige URL rauskopieren kann.

Link auf html5shiv.js #231

Tschö, Auge