Das Layout im Kontrollzentrum kann selbst definiert werden - mit Bordmitteln. Module im Kontrollzentrum mit Spalten darstellen
Ich zeige dir, mit Joomla 3.9, wie Du Module des Administrators im Kontrollzentrum, Mehrspaltig erstellen kannst. Somit haben die Module mehr Platz und es können jederzeit auch weitere angezeigt werden. Von Haus aus werden diese immer 1-spaltig dargestellt.
Wenn Du eine gewünschte Position im Modul auswählen möchtest, werden gleich alle Positionen der installierten Templates angezeigt. In der Regel ist das ganz schön lästig bis man die richtige gefunden hat. Auch kommt es vor, dass versehentlich eine falsche Template-Position, da diese oft den gleichen Namen haben, ausgewählt wird. Jetzt wundert man sich warum diese nicht angezeigt wird.
Bis man den kleinen Fehler gefunden hat, vergeht manchmal viel Zeit und fragt sich was falsch läuft… Das muss nicht sein!
Das kleine Problem lässt sich sehr einfach beheben.
Unter Erweiterungen, Verwalten sucht man sich den „Typ – Template“ aus. Jetzt werden uns alle installierten Templates angezeigt.
Die zwei Templates „Hathor“ und „Isis“ sind für das Core-Backend zuständig und interessieren uns nicht.
Es geht uns um die Frontend-Templates (Bereich „Site“) „beez3“ und „Protostar“ und in unserem Beispiel „J51_Scarlett“. Nun werden alle nicht benötigten Templates, also „beez3 und „Protostar“ deaktiviert und das kleine Problem ist schon gelöst!
Wenn man nun ein neues Modul auswählt und die passende Position sucht, werden sofort nur noch die aktuellen Template-Positionen „J51_Scarlett“ angezeigt. Das lästige suchen fällt nun weg!
Du kannst ganz einfach und ohne Erweiterung eine Notiz im Backend erstellen. Die Notiz kann eine wichtige Nachricht, eine Erinnerung für andere Administratoren oder auch eine Information für Dich selber sein. Diese erscheint dann immer im Kontrollzentrum nach dem Login im Backend und ist sofort sichtbar!
Jeder, der sich mit Joomla! befasst, hat sicher schon irgendwann den Begriff „Suffix“ gelesen! Es gibt das „Modul-Klassen-Suffix“ und das „Menü-Klassen-Suffix“. Doch was ist eigentlich ein Suffix und wie wende ich das an?
Was ist ein „Modul-Klassen-Suffix?
Ab und zu möchte man ein bestimmtes Modul anders formatieren, als die anderen Module. Joomla! bietet dazu das Klassensuffix an, welches eine großartige Möglichkeit bietet, um sowohl zusätzliche als auch einmalige Formatierungen zu vergeben.
Als einfaches Beispiel, für das Grundprinzip, nehme ich einen Hinweistext in einem „eigenem Modul“. Wenn der Text ganz normal im Frontend angezeigt wird, kann das z.B. so aussehen:
Damit der Hinweis etwas schöner und auffälliger angezeigt werden kann, benutzt man das „Modul-Klassen-Suffix“. Je nach CSS-Formatierung, z.B. hier mit einem blauen Rahmen, kann das so aussehen:
Wie wende ich das „Modul-Klassen-Suffix“ an?
Um das Modulnach eigenen Wünschen zu formatieren benötigst Du zwei Schritte. Der erste Schritt ist das Modul selber und der zweite ist die CSS-Formatierung. Dazu benötigst du folgende Einstellungen:
Öffne das passende Modul (hier: eigenes Modul) und wähle den Reiter „Erweitert“ aus. Gebe dann in dem Feld „Modulklassensuffix“ einen eindeutigen Klassennamen ein, hier „rahmen“
Klicke anschließend auf „Speichern & Schließen“
Jetzt musst Du noch die CSS-Formatierung für Dein Klassensuffix angeben. Als Beispiel hier, für den „blauen Rahmen“ gibst Du in Deiner „custom.css“ folgenden Code ein:
Viele weitere Informationen zu den diversen CSS-Formatierungen und Einstellungen findest Du auf unserer Webseite!
Das gleiche Vorgehen gilt auch für das „Menü-Klassen-Suffix“…
Damit kann ein einzelner Beitrag oder auch jeder Beitrag individuell formatiert werden (z.B. Schriftgröße). Dafür bietet sich die Seitenklasse an, die bei den Menüs gefunden werden und dann für den einzelnen Beitrag oder den Blog/Liste gelten. Die CSS-Formatierung könnte z.B. so aussehen:
// Kommentar .seitengroesse { font-size: 50px; }
Ergebnis Kontrolle Das ganze kannst Du noch einmal über die Console Deines Browsers kontrollieren.
Hinweis: Wenn Du den Cache aktiviert hast, solltest Du diesen vorher immer leeren, damit Deine CSS-Formatierungen auch dargestellt werden. Solange Du am Testen bist, solltest Du den Cache komplett abstellen, damit das Ganze schneller und einfacher geht!
Weitere ausführliche und umfangreiche Informationen dazu findest Du im Web oder zum Beispiel hier:
Schon mal von „Adaptive Images“ gehört? Nein! Ich auch nicht. Habe mich dann erst einmal darüber Informiert und war sofort hell auf begeistert. Dies ist eine sehr einfache Möglichkeit, Bilder für jedes Endgerät, automatisch erstellen zulassen. Mein erster Test war auch sehr schnell erfolgreich. Diese AI Funktion habe ich dann später auch hier auf der JUG-FN eingebaut!
Nun habe ich mich dazu entschlossen diesen Beitrag für andere User, mit allen wichtigen Informationen, was ich dazu gefunden habe, zusammenzufassen. Also viel Spaß damit.
Responsives Webdesign Dies ist eine tolle Möglichkeit, Layout und Design auf allen mobilen Endgeräten und Bildschirmgrößen anzupassen. Dabei wird aber immer nur eine Größe (z.B. 2.688 x 1.520 Pixel) des Bildes für alle Endgeräte benutzt. Ist dieses nicht optimiert, kann die Datei sehr schnell einige MB groß werden.
Für Desktop Anwender ist das in der Regel, in der heutigen Zeit mit DSL kein großes Problem mehr. Aber was ist mit den mobilenEndgeräten?
Denn auf diesen existiert auch immer das gleiche Bild in voller Auflösung und mit derselben Dateigröße. Dieses wird dann ja nur skaliert.
Vor allem bei Handys spielt das optimierte Bild eine ganz wichtige Rolle. Hier gibt es im allgemeinen ein bestimmtes Datenvolumen (Kosten) und langsamere Internetverbindungen (Geschwindigkeit). Nicht zuletzt darfst du auch die OnPage Optimierung (SEO) nicht außer Acht lassen.
Was heiß das jetzt? Muss ich jetzt immer für jedes Endgerät ein Bild erstellen und optimieren? Das wären ja dann jeweils mindestens vier Bilder pro Bild oder mehr. Eins für Desktop Large, eins für Desktop Normal, eins fürs Tablet und eins für das Handy!
Bei sehr wenigen Bildern würde das ja noch gehen, aber was ist, wenn ich sehr viele Bilder habe? Ist der ganze Aufwand zum Nutzen gerechtfertigt? Es muss ja bestimmter Programmiercode eingefügt werden und die Bilder müssen erstellt und optimiert werden! Das möchte ich nicht und ist mir alles zu aufwendig!
Die Lösung Musst du auch nicht, denn es gibt dafür eine ganz einfache, geniale, kostenlose und automatische Lösung: Adaptive Images.
Meiner Meinung nach ist dies vor allem für Anwender/Autoren, welche immer nur ein Bild ohne Optimierung, z.B. von einem Handy, in ihren Beitrag hochladen. Aber auch für Webmaster welche in der Regel die Bilder optimieren ist das eine einfache, schnelle und gute Lösung.
Adaptive Images Das „Adaptive Images“ arbeitet komplett serverseitig, mit JavaScript und einer kleinen PHP Datei. Das PHP Skript erstellt automatisch jeweils ein extra optimiertes Bild für das Endgerät, in der genauen Pixel-Breite und -Höhe des Bildschirmes. Das Ganze kann zu jeder Zeit, auch nachträglich, noch eingebaut werden!
Hier siehst Du meine Beispiele mit den verschiedenen Formaten und Dateigrößen, welche je nach Viewpoint, immer automatisch angepasst werden:
Somit musst du selber nur ein Bild (jpg, max. 96 DPI, 24 Biettiefe, RGB) einstellen, den Rest macht der Server! Ich finde das genial! Das original Bild ist hier "b001, b002, b003", die weiteren Auflösungen sind "blau" markiert, je nach Viewpoint.
Was möchtest du noch mehr? Eine Anleitung? Hier, bitte schön…
Installation und Anleitung So kannst Du in wenigen Minuten Adaptive Images, auf einem Apache Server, ganz schnell installieren:
1. Die aktuelle „Adaptive-Images“ Version auf der originalen Website herunterladen und entpacken, wir benötigen nur die „adaptive-images.php“ Datei.
2. Die „ .htaccess “ Datei erstellen (den Punkt beachten!) Diese findest Du in Deinem Root Verzeichnis per FTP. Bitte vorher ein Backup der Datei erstellen und NICHT ÜBERSCHREIBEN, auch die Schreibrechte beachten! Anschließend folgenden Code kopieren und am Ende in die Datei einfügen und hochladen:
# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows: # RewriteCond %{REQUEST_URI} !ignore-this-directory # RewriteCond %{REQUEST_URI} !and-ignore-this-directory-too
RewriteCond %{REQUEST_URI} !assets
# don't apply the AI behaviour to images inside AI's cache folder: RewriteCond %{REQUEST_URI} !ai-cache
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories # to adaptive-images.php so we can select appropriately sized versions
# END Adaptive-Images -------------------------------------------------------------------------------
3. "ai-cache" Ordner anlegen Nun legst du in deinem Root Verzeichnis einen leeren Ordner "ai-cache" mit den Rechten 755 an. Hier werden die verkleinerten Bilder abgespeichert.
4. Die „adaptive-images.php“ anpassen Auf der AI Seite unter Customising findest Du eine ausführliche Erklärung dazu (bitte dazu etwas herunter scrollen).
Wichtig sind die „Resolutions“ für die gängigsten Viewpoints, die „JPG Quality“ für die Dateigröße und vielleicht der „Browser Cache“, welcher anzupassen sind. Anschließend die geänderte „adaptive-images.php“ Datei in das Root Verzeichnis Deiner Seite per FTP hochladen.
Weitere Viewpoint-Möglichkeiten, welche Du (unbegrenzt!?) anpassen kannst sind zum Beispiel für
Das kann über ein Override, über Gantry 5 ( unter Erweiterungen > Ganntry 5 Themes > Page Settings > Atoms > Custom CSS / JS) gemacht werden. Plugins findest Du sonst auch im JED.
6. Das war es. Du kannst es jetzt testen.
Mögliche Probleme Es kann sein, das die Bilder nicht immer sofort erstellt werden, je nachdem was deine „.htaccess“ sonst noch alles so beinhaltet.
Wenn der User kein JavaScript aktiviert hat (ohne JS geht es heute kaum noch!), ist das halb so schlimm. Er kann trotzdem ganz normal deine Webseite anschauen, nur sind dann die Bilder für ihn nicht optimiert! Damit die optimierten neuen Bilder auch generiert werden, muss Deine Seiten erst mit dem entsprechendem Endgerät besucht werden. Überprüfen kannst Du das im „ai-cache“ Ordner über FTP. Wird das Bild nicht skaliert, solltest Du die DPI Auflösung des Bildes überprüfen. Diese darf höchstens 96 DPI betragen.
Solltest du vielleicht auch einen Internal Server Error 500 haben, empfehle ich dir die Seite von Luca Hammer. Dort beschreibt er ganz genau, was in deinem Code für die „.htaccess“ dann ein wenig geändert werden muss.
Weitere Infos dazu findest du im Web und auf diversen Webseiten z.B. von Elmastudio, Pixelbarund auf derHauptseite von Adaptive Images.
Erweiterung Es gibt noch eine FREE und PRO Joomla! Erweiterung, welche zusätzlich dann auch noch eine weitere Extension benötigt. Ich finde das alles unnötig und möchte es hier nur kurz erwähnen.
Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.