Vor ein paar Tagen kam ich aus der Mailing-Liste dev.mobi einen interessanten Artikel über das Erstellen mobiler Websites mit Joomla .

Nicht, dass ich Joomla lieben, in der Tat wahrscheinlich einen kritischen Artikel über sie, aber ich denke, es ist sehr interessant, um bestimmte Websites von seiner scheinbaren Einfachheit. Das Problem, das ich hatte, war, dass ich eine Lösung, die mir erlauben, wie ein Web-Portal, erreichbar über das Mobiltelefon an eine angepasste Version gewollt. Vielen Dank an diesem Artikel fand ich dieses Plugin , das Ihnen alles fast fertig.

Es ist etwas, jedoch außer Acht gelassen, dass das Plugin: Bilder. Die Bilder in Ihrem Artikel eingebettet werden in der Regel eine ziemlich große Größe, vor allem, wenn wir über mobile Endgeräte, wo der Durchschnitt liegt bei 174px breiten Bildschirm zu sprechen. Die Lösung ist ein wenig zu basteln Plugin für die Bilder der Produkte durchlaufen eine automatische Resizer schaffen uns. Ich empfehle die Artikel, die ich über die Skalierung der transparente und animierte GIFs (schrieb hier und hier ), um eine Vorstellung davon, wie es zu tun bekommen. Die Lösung kommt in zwei Schritten

1) Das Patchen das Plugin

Das ist die Veränderung, die wir tun sollten pdabot.php die Plugin-Datei. Suchen Sie ganz am Ende und tun onAfterRenderer Funktion ist es so:

  1. onAfterRender function ()
  2. {
  3. ; Globale $ Mainframe;
  4. / / VON HIER
  5. $GLOBALS [ 'ispda' ] == true ) { if ($ GLOBALS ['ispda'] == true) {
  6. ( ) ; $ Body = JResponse :: getBody ();
  7. ( '/<img src="(.*)"(.*)>/i' , '<img src="/redimensionar.phtml?imagen= \\ 1">' , $body ) ; $ Body = preg_replace ('/ <img src="(.*)"(.*)> / i', '<img src="/redimensionar.phtml?imagen= \\ 1">', $ body);
  8. ( '/<img(.*)width="(.*)"(.*)>/i' , '<img \\ 1 \\ 3>' , $body ) ; $ Body = preg_replace ('/ <img(.*)width="(.*)"(.*)> / i', '<img \\ eine \\ 3>', $ body);
  9. ( '/<img(.*)height="(.*)"(.*)>/i' , '<img \\ 1 \\ 3>' , $body ) ; $ Body = preg_replace ('/ <img(.*)height="(.*)"(.*)> / i', '<img \\ eine \\ 3>', $ body);
  10. $body ) ; JResponse :: setBody ($ body);
  11. }
  12. / / HIER

Wie Sie sehen, ersetzen wir das src-Attribut aller Bilder autoscaling unser Skript passieren wir redimensionar.php auf das Originalfoto url. Auch nutzten die Gelegenheit, um die Attribute width und height zu entfernen, weil zu diesem Zeitpunkt wissen wir nicht, was wird das Ergebnis sein, wenn wir Sie seine Größe zu lassen. Wir sind mit dem Plugin getan.

2) Skalieren von Bildern

Wenn Sie den gesamten Prozess hier denken wird, okay, verstehe aber wir brauchen einen Daten:. Welchem ​​Umfang die Bildgröße Tatsächlich wissen wir nicht ... noch nicht.

Und hier kommt W urfl zu Hilfe. Würfl ist eine Datenbank von mobilen Endgeräten, mit denen Sie wissen, wie die Daten Bildschirmbreite nur auf der Durchreise die lassen UserAgent davon. Ich werde erklären, wie Würfl , da es über den Rahmen dieses Artikels sprengen, aber auf ihrer Website haben Sie alles, was Sie brauchen.

Wir werden unsere redimensionar.php dann zu schaffen, wo gerade auf der Suche durch Würfl das Terminal Bildschirmbreite reescalamos Client und das Bild auf die entsprechende Größe. Es ist ratsam, nicht zu tun, es ist 100% zur Prävention einer vertikalen Bildlauf reduzieren den nutzbaren Raum und wir sehen auch die horizontale Scroll (in der Regel geschieht, in dem Nokia). Ich in der Regel die Breite 10px abziehen. Für Bilder von Artikeln können Sie eine prozentuale Skalierung anwenden können nicht sehr große Bilder gut aussehen, lassen 70% zum Beispiel.

Schlussfolgerungen

Schnell und in einem einfachen mobilen Endgeräten haben, um Ihre Joomla Website angepasst, kann man nicht mehr verlangen. Nicht vergessen pda Template-Design nach Ihrem Geschmack und Bedürfnissen.

In mobilen Webseiten ist üblich, ein Bild als Header des Portals nutzen. Auch können Sie eine Resizer sich automatisch an die Bildschirmbreite von Kunden.

Es könnte viel mehr tun, wenn wir die Integration direkt in das Plugin Würfl konnte sogar der generierte Code an die Fähigkeiten des Client-Terminals (xHTML, iMode, WML) Erstellen von Vorlagen für jede andere Sprache angepasst wurden. Trauen Sie tun Ihre ?

Verwandte Beiträge