Seite 1 von 1
Miniatur-Avatare erstellen?
Verfasst: 13.03.2014 19:25
von 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!
Re: Miniatur-Avatare erstellen?
Verfasst: 13.03.2014 20:01
von 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
Re: Miniatur-Avatare erstellen?
Verfasst: 13.03.2014 21:49
von 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.
Re: Miniatur-Avatare erstellen?
Verfasst: 13.03.2014 22:28
von 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
Re: Miniatur-Avatare erstellen?
Verfasst: 13.03.2014 23:08
von AYYILDIZLAR
Hallo,
Knowhow-Sauger hat geschrieben: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
Re: Miniatur-Avatare erstellen?
Verfasst: 14.03.2014 01:12
von Knowhow-Sauger
HabNurNeFrage hat geschrieben: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
Re: Miniatur-Avatare erstellen?
Verfasst: 14.03.2014 16:50
von Crizzo
Knowhow-Sauger hat geschrieben:
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:
Knowhow-Sauger hat geschrieben: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.
Re: Miniatur-Avatare erstellen?
Verfasst: 14.03.2014 18:06
von 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
Re: Miniatur-Avatare erstellen?
Verfasst: 14.03.2014 18:08
von 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.
Re: Miniatur-Avatare erstellen?
Verfasst: 14.03.2014 23:14
von 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)