Seite 1 von 3

Image Resize

Verfasst: 15.08.2008 14:48
von Dunstkreis
Hallo, alle zusammen.

Ich habe mir einen Mod zur Vorlage genommen und ihn ein wenig weiter entwickelt.
Es handelt sich um diesen Mod: [2.0.18] Simple Mod Resize Images

Im Grunde sind nur wenige Zeilen so wie sie waren.
Desweiteren hab ich eine Datei hinzugefügt, die vorher im Mod nicht vorgesehen war.

Der Grund, warum ich mich hier melde sind einige kleine Fragen die ich noch habe, und gerne geklärt hätte bevor ich ihn als neuen Mod veröffentliche.
Denn ich denke schon, dass der ein oder andere ihn ganz nützlich finden könnte.

Nur kurz zu den Funktionen:
Man kann eine maximale Höhe und eine maximale Breite angeben. Sollte ein gepostetes Bild größer sein als diese Werte, wird es per Javascript verkleinert und ist nachher auf jeden Fall in beiden Dimensionen unterhalb der genannten Grenzen.

Sollte ein Bild verkleinert worden sein, so verfährt man dies durch diese kleine Infomeldung am Mauszeiger, wenn man darüber fährt (title tag) und man kann das Bild dann auch anklicken. (Es verhält sich wie ein Link in Bezug auf das verwendete Mauszeiger Symbol.)
Sollte ein Bild nicht verkleinert worden sein, so merkt man gar nix davon. Es verhält sich weder wie ein Link, noch wird etwas angezeigt.

Wenn man auf das Bild klickt, öffnet sich ein neues Fenster als Popup. Wenn man den Browser nicht im 1-Instanz Betrieb hat, ist es ein echtes neues Fenster im Vordergrund.
Hier wird das Bild komplett dargestellt. Es wird also nicht nur die URL des Bildes aufgerufen, sondern eine Datei, die das gesamte Bild anzeigt, so dass man direkt scrollen kann um das gesamte Bild zu sehen. (Viele Browser verkleinern zu große Bilder ja sonst.)
Klickt man in das Bild, so schließt es sich.
Sollte man ein Popup nicht geschlossen haben, und ein weiteres verkleinertes Bild anklicken, so wird das Fenster wieder in den Vordergrund geholt. (Damit man es im Hintergrund nicht übersieht!)

Ich denke das ist genug Funktionalität um es als eigenständigen Mod zu veröffentlichen, oder?

Soviel zu der Funktion.
Meine noch zu klärenden Fragen sind, wohin mit den Dateien?
Ich habe zum anzeigen des gesamten Bildes eine resizeMod_ImageZoom.php erstellt.
Diese habe ich bei mir jetzt direkt ins root Verzeichniss gelegt.
Dies begünstigt den Aufruf durch das Javascript. Kann ich als Adresse doch einfach direkt die Datei nehmen, da der Betrachter sich ja im Hauptverzeichniss des Boardes befindet beim Betrachten.
Ist das okay, oder sollte die Datei der Ordnunghalber irgendwo anders liegen?
Desweiteren habe ich eine resizeMod.js Datei, mit dem eigentlichem Code.
Ich habe diese bei mir in das template Verzeichniss abgelegt, da ich dort einige andere .js gefunden habe, und habe dann einfach eine entsprechende Zeile im HTML Header verdoppelt und auf meine Datei umgebogen.
Meine Frage hier, ist es sinnvoll, wenn mehrere Styles verwendet werden, diese dort abzulegen? Man müsste dann ja die resizeMod.js in mehrere Verzeichnisse legen. Obwohl dies den Vorteil hätte, dass man ans Style angepasste Größenwerte nehmen kann.
Oder sollte ich diese Datei wo anders ablegen?

Dann eine letzte strukturelle Frage: Ich brauche ein kleines css Stückchen und habe dieses in der common.css abgelegt. Es sind keine Farben darin enthalten. Ist das okay, oder gehört der Code wo anders hin?

Code: Alles auswählen

span.image:hover
{
	cursor:pointer;
}

Zu guter letzt würde ich noch gerne wissen wofür die bbcode Datei in dem template Ordner gut ist? Änderungen da drin haben bei mir nix bewirkt. (recompile an, cache geleert)
Ich habe meine Änderungen also nur an der includes/bbcode.php vorgenommen. Ist das ausreichend?


Falls sich jemand die Mühe machen würde und kurz über die Dateien drüber schauen könnte und mir etwas konstruktive Kritik gibt, wäre ich sehr dankbar.

Als nächstes, wenn die genannten Fragen dann geklärt wären, würd ich mich evtl noch an die Erstellung von nem Mod nach den hier vorhandenen Richtlinien machen, mit XML Datei und so Sachen.
Vor erst hab ich aber zur Veranschaulichung grade mal eben fix ne txt Datei als Anleitung geschrieben.
Achtung, da das alles noch nicht geprüft ist, bitte nur zu Testzwecken installieren. Danke.

Hier meine erste Vorabversion vom Mod:
[hier stand mal der Link. Der geht aber nicht mehr, und ich hab die Quelldateien z.Z. leider auch nicht vorliegen.]

Beste Grüße,
Dunstkreis



PS: Ich bekomme grade in meinem Board die Meldung, dass der Mod mit dem IE (noch) nicht läuft. Falls hier jemand weiß woran das liegt, wäre ich für nen Hinweis dankbar.

Verfasst: 15.08.2008 15:03
von Napoli
Hallo,
super, hab schon lange nach einem einfachen Image Resizer fürs phpBB3 gesucht. Schaut bisher ganz gut aus, aber muss die extra .php Datei im /root Ordner wirklich sein?
Fände schön, wenn man das irgendwie umgehen könnte (hab halt gerne Ordnung im Foren-Verzeichnis) und evtl. ins Template einflechten könnte :)

N.

Verfasst: 15.08.2008 15:49
von Dunstkreis
Jo, deswegen ja meine Fragen... :)

Aber klar, nimmste die Datei und legste dahin, wo du sie gerne hättest.

Danach musste lediglich in der resizeMod.js diese Zeile suchen:
fenster = window.open("resizeMod_ImageZoom.php?img="+span.alt,"Full size picture","scrollbars=yes,resizeable=yes");

und so abändern:

fenster = window.open("verzeichnis/pfad/nocheinverzeichniss/resizeMod_ImageZoom.php?img="+span.alt,"Full size picture","scrollbars=yes,resizeable=yes");

wobei die verzeichnisse, ist wohl klar, dem entsprechen, wo du deine Datei dann abgelegt hast.

EDIT: Ich arbeite grad an ner Umänderung für den IE.
Konkret, es scheint sinnvoller zu sein anstelle des spans ein a tag zu nutzen.
Die lässt im IE das größen geänderte Bild dann auch öffnen, zwar leider nicht im extra Fenster, aber immerhin.
Und im <a ein target zu nutzen geht nicht, dann wäre es nicht mehr XHTML Strict!! Worauf ich extra geachtet habe.


Edit²: Danke im übrigen für den Zuspruch. Zeigt es doch, dass diese Funktion bei einigen auf Anklang stößt. :)
Du kannst die Datei wenn du magst natürlich auch komplett weg lassen.

Entferne aus folgender Zeile:
fenster = window.open("resizeMod_ImageZoom.php?img="+span.alt, "Full size picture", "scrollbars=yes,resizeable=yes");

einfach den Teil:
"resizeMod_ImageZoom.php?img="+

das also nur noch das hier da steht:

fenster = window.open(span.alt, "Full size picture", "scrollbars=yes,resizeable=yes");

Dann kannste diese resizeMod_ImageZoom.php auch weglassen.
Allerdings öffnet sich das Bild dann zum einen direkt, also nicht in einer Seite eingebettet, was zur Folge hat dass die meisten aktuellen Browser dieses Bild wieder verkleinern.
Wenn du das gerne möchtest, okay. Mir gefiel dieses Verhalten nicht, und ich wollte beim Klicken auf das Bild, wenn schon von Full Size die Rede ist, das Bild auch gerne Maximal dargestellt haben.
Und b) geht die Funktionalität verloren, einfach zum schließen des Popups in das Bild zu klicken.

Verfasst: 15.08.2008 16:29
von Dr.Death
Noch ein Hinweis:

Versuche alle Dateinamen "klein" zu schreiben... dann gibt es später weniger Probleme ;-)

Auch sollte Dein MOD nicht als RAR Datei verpackt werden, sondern als ZIP.

Schau Dir auch nochmals die Coding Guidelines an: http://area51.phpbb.com/docs/coding-guidelines.html

Eine Verwendung von $_GET ist nicht erwünscht. Benutze anstelle dessen die Funktion request_var();

Auch eine Vermischung von php Code und HTML in einer Datei ist nicht gut.
Schau Dir mal das Template System an: http://code.phpbb.com/devwiki/Template_Syntax

Letzter Punkt: Benutzung von Sprachvariablen. Nicht jeder möchte englische Infos haben...

Verfasst: 15.08.2008 17:51
von Dunstkreis
1: kleine Dateinamen lässt sich machen.

2: hab ich mir fast gedacht, war auch nur erstmal eben kurz, falls jemand reinschauen möchte, (danke dafür) später hätte ich mich weiter mit den Guidelines beschäftigt.

3: php.net sagt zu request_var() function not found.
Du meinst wahrscheinlich import_request_variables();
Diese Funktion war mir nicht bekannt. Kurze Frage dazu: Worin liegt der Vorteil dieser Verwendung?

4: Die Mischung lässt sich natürlich beheben. Das aber erst später. Fällt es doch ehr unter die Rubrik "Code - Kosmetik".

5: Da drüber hab ich mir schon so meine Gedanken gemacht, und ich habe nicht die geringste Ahnung, wie ich in die Javascript Datei Sprachvariablen reinbekomme!?
Irgendwelche Vorschläge?


Das IE Problem habe ich im übrigen bereits gelöst.

Zu den anderen Fragen irgendwelche Antworten?
Wohin mit den Dateien? root okay?
template okay?
ist die plazierung im common.css im phpBB3 Sinne?

Verfasst: 15.08.2008 18:04
von Dr.Death
Die request_var() ist eine Funktion, die phpBB3 mitbringt ( Datei includes/functions.php )

http://area51.phpbb.com/docs/coding-gui ... ml#general
Variables:

Make use of the request_var() function for anything except for submit or single checking params.

The request_var function determines the type to set from the second parameter (which determines the default value too). If you need to get a scalar variable type, you need to tell this the request_var function explicitly.

Code: Alles auswählen

/**
* request_var
*
* Used to get passed variable
*/
function request_var($var_name, $default, $multibyte = false, $cookie = false)
Vorteil:
Sicherheit, UTF8 Support... keine Gedanken mehr machen ob die Variable per GET oder POST übergeben wurde.


Im Javascript sollten sich die Sprachvariablen mit:
{LA_DEINE_VARIABLE}
übergeben lassen.
Variables

Auszug aus den Coding Guidelines:
All template variables should be named appropriately (using underscores for spaces), language entries should be prefixed with L_, system data with S_, urls with U_, javascript urls with UA_, language to be put in javascript statements with LA_, all other variables should be presented 'as is'.

Verfasst: 15.08.2008 18:05
von nickvergessen
Dunstkreis hat geschrieben:3: php.net sagt zu request_var() function not found.
Du meinst wahrscheinlich import_request_variables();
Diese Funktion war mir nicht bekannt. Kurze Frage dazu: Worin liegt der Vorteil dieser Verwendung?
phpbb3-funktions-Sammlung sagt: gefunden:
http://area51.phpbb.com/docs/code/phpBB ... equest_var
Dunstkreis hat geschrieben:Zu den anderen Fragen irgendwelche Antworten?
Wohin mit den Dateien? root okay?
template okay?
ist die plazierung im common.css im phpBB3 Sinne?
Was im Paket wohin kommt, steht hier:
http://www.phpbb.de/viewtopic.php?t=172609

Verfasst: 15.08.2008 19:32
von Dunstkreis
Dr.Death hat geschrieben:Im Javascript sollten sich die Sprachvariablen mit:
{LA_DEINE_VARIABLE}
übergeben lassen.
Variables

Auszug aus den Coding Guidelines:
All template variables should be named appropriately (using underscores for spaces), language entries should be prefixed with L_, system data with S_, urls with U_, javascript urls with UA_, language to be put in javascript statements with LA_, all other variables should be presented 'as is'.
Ähm, und das klappt einfach so?
Im Header steht doch nur die Angabe zum Skript drinne, das Skript besorgt sich der Browser doch vom Server, wo is der Schritt, dass da dann so ne Variable ausgetauscht werden sollte?


Okay, werd ich die Tage mal umsetzen...

Verfasst: 15.08.2008 20:28
von Dr.Death
Naja, auf jeder Seite wird doch die common.php der jeweiligen Sprache eingebunden ( language/de/common.php ) und dementsprechent in ein Array gepumpt...

Verfasst: 17.08.2008 11:36
von Dunstkreis
Genau da ist das was ich meine.
die kann ja nur im php code eingebunden werden, und im grunde doch nur das Ergebnis der php Skripte also den XHTML Code beeinflussen.
Dieser gibt dann mit den ganzen Ersetzungen die eigentlich angezeigte Seite.
In dieser Seite steht oben im Header dann der Pfad zur .js Datei drinne.
Diese Datei fordert der Browser meinem Verständniss des http protokolls und der Funktionsweise von Client - Server Modell im Bezug auf Internetseiten dann doch selber wieder vom Server an.
Der Server liefert die .js Datei aus, und dann muss der Browser die direkt fressen können!
Da fehlt mir der Schritt in dem Variablen ersetzt werden würden!?