Miniatur-Avatare erstellen?

[Knowhow-Sauger]

Hallo Freunde,

die Ladezeit der Avatare ist recht lange, da meine User alle so grosse Avatare haben mit 200 Pixel Grösse.
Gibt es einen Mod, wie ich die Avatare auf Miniatur verkleinern kann? Nur wenn man mit der Maus drüber fährt, sollen die Avatare in original Grösse angezeigt werden.
Geht sowas?

Danke im Vorraus!

[D@ve]

Ich bezweifle mal, dass das an den Avataren liegt... 200x200 Pixel ist jetzt nicht sooooo wahnsinnig groß. Unkomprimiert wären das 120kb.
Bei halbwegs normaler JPEG Komprimierung sogar unter 20kB. Das ist selbst im Mobile Bereich stemmbar.

Bei einem 1000er DSL-Anschluss wären das etwas mehr als eine Zehntel Sekunde die ein Bild lädt. Wenn Du eine 16.000er Leitung hast bist Du schon fast im Mikrosekunden Bereich (0,001s pro Bild).

Gruß, Dave

[Knowhow-Sauger]

Hallo Dave,

ich gebe zu: Es geht nicht NUR um die Ladezeit.
Es geht auch um das Scroll-Problem. Denn viele meiner User schreiben oftmals nur einen Satz und wenn daneben dann immer ihr 300 Pixel hohes Avatar steht, dann muss man immer so weit runter scrollen bis zum nächsten Beitrag.
Daher möchte ich, dass die Avatare klein sind und nur in Gross angezeigt werden, wenn man mit der Maus drüber fährt.
Gibt es so einen Mod? Wäre klasse.

[HabNurNeFrage]

Hi,

ohne Einfluss auf Dateigrößen und Ladezeiten könnte folgender CSS-Ansatz helfen:

Code: Alles auswählen

.postprofile dt img {height:28px;width:auto;}

.postprofile dt img:hover {height:auto;width:auto;position:absolute;z-index:4;}

Einfach nach eigenem Gusto angepasst beispielsweise in der colours.css eintragen.

LG

[AYYILDIZLAR]

Hallo,

Gibt es einen Mod, wie ich die Avatare auf Miniatur verkleinern kann?

Ja, die gibt es http://www.allround-phpbb.de/viewtopic.php?f=16&t=394


Grüße

[Knowhow-Sauger]

Hi,

ohne Einfluss auf Dateigrößen und Ladezeiten könnte folgender CSS-Ansatz helfen:

Code: Alles auswählen

.postprofile dt img {height:28px;width:auto;}

.postprofile dt img:hover {height:auto;width:auto;position:absolute;z-index:4;} 

Einfach nach eigenem Gusto angepasst beispielsweise in der colours.css eintragen.

LG

Hey, das ist GENAU das was ich gesucht habe!
SO einfach ist das? Genial!
Vielen, vielen Dank!

Auch an AYYILDIZLAR

[Crizzo]

Hey, das ist GENAU das was ich gesucht habe!
SO einfach ist das? Genial!

Das ändert nur leider an der Dateigröße gar nichts, deshalb passt es nicht zu deinen Anforderungen:

die Ladezeit der Avatare ist recht lange, da meine User alle so grosse Avatare haben mit 200 Pixel Grösse.

Das macht die Avatar im Thema zwar kleiner, aber es lädt die Grafiken erst in voller Größe und skaliert sie dann runter. Das ändert die Dateigröße nicht.

Aber das hat dir HabNurNeFrage auch schon geschrieben.

[HabNurNeFrage]

Hi, so isses.

Allerings hilft die Mod da auch nicht weiter, denn sie ermöglicht nur einen einfachereren Upload, indem sie zu große Bilder auf die erlaubte Größe verkleinert.
Ist sie nicht eingebaut, muss man die Bilder vor dem Upload selbst verkleinern, um nicht die Fehlermeldung zu bekommen.

Um die Dateigrößen zu verkleinern, müsste man höher komprimieren oder kleinere Bilder zulassen und diese hochskalieren.

@ Knowhow-Sauger: Der CSS Code sollte nur das Prinzip erläutern.
Um das richtig schick zu machen, kannst Du hier mal reinschauen: http://www.html-seminar.de/beispiel-css ... -hover.htm
Mit ein bissl probieren, kannst Du es bestimmt so hinbekommen, dass sich der Rest nicht mehr verschiebt, wenn man über die Avas hovert.

LG

[Kirk]

@ Knowhow-Sauger:
Vielleicht ist das hier was für dich: http://www.ongray-design.de/forum/viewt ... f=62&t=606

Allerdings bleibt die Dateigröße wie voher schon erwähnt gleich.

[HabNurNeFrage]

Hi,

hier mein Ansatz in professionalisierter Form für alle Styles geeignet, Anleitung für prosilver-basierte:

Schritt 1)

Öffnen: styles/*/template/viewtopic_body.html

Finden:

Code: Alles auswählen

<!-- IF postrow.POSTER_AVATAR -->
                    <!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
                <!-- ENDIF --> 

Ersetzen durch:

Code: Alles auswählen

<!-- IF postrow.POSTER_AVATAR -->
<ins><ul class="avahover">        
<!-- IF postrow.U_POST_AUTHOR --><li><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><span>{postrow.POSTER_AVATAR}</span></li>
<!-- ELSE --><li>{postrow.POSTER_AVATAR}<span>{postrow.POSTER_AVATAR}</span></li><!-- ENDIF -->
</ul></ins><br /><!-- ENDIF -->

Schritt 2)

Öffnen: styles/*/theme/colours.css

Als neuen Abschnitt einfügen:

Code: Alles auswählen

ul.avahover {list-style-type:none; margin-left:0;}

ul.avahover span {display:none;}

ul.avahover li img {width:auto; max-height:100px;} /* Avatar-Hoehe in der Beitragsansicht skaliert auf maximal 100 Pixel */

ul.avahover li:hover {z-index:4;}

ul.avahover li:hover span {display:inline; position:absolute; border:2px solid gray; padding:4px; background:white; box-shadow: 4px 4px 10px black; border-radius:8px;}

ul.avahover li:hover span {right:222px;} /* Abstand der MouseOver-Ansicht vom rechten Fensterrand */

ul.avahover li:hover span img {width:auto; min-height:300px;} /* Avatar-Hoehe in der MouseOver-Ansicht skaliert auf mindestens 300 Pixel */ 

Cache und Theme refreshen - fertig

So, noch eine HTML-Demo: http://bild4.bplaced.net/vorlagen/avahover.html

LG

Edit/PS: Getestet - funzt: http://bild4.bplaced.net/phpbb/ (bis zur nächsten Cache-Leerung im ACP eingepflegt)