podcast

JS FlexSlider in Beitragsposition im Template GK Music Free

Hallo und herzlich willkommen zu diesem Tutorial, welches erklärt, wie ihr in Joomla 2.5 an einer beliebigen Modul-Position den Flexslider für eine Slideshow einsetzt! Ich zeige euch hier zunächst die unbearbeitete Darstellung der Startseite ohne Flexslider!
Zunächst müsst ihr das Modul FlexSlider im Joomla-Administrator-Bereich bekanntermaßen über „Erweiterungen – Erweiterungen“ installieren. Den FlexSlider findet ihr auf der Webseite von „Joomla! Extensions Directory“. In der Video-Beschreibung findet ihr den Link zum Anklicken:
http://extensions.joomla.org/extensions/photos-a-images/slideshow/image-jquery-slideshow/19331

Jetzt öffnet ihr unter „Erweiterungen – Module“ das Modul „JS FlexSlider“. Hier wählt ihr „Titel anzeigen: Verbergen“, „Status: Freigegeben“ und setzt bei „Position“ die gewünschte Position ein! Bei jedem neu installierten oder erstellten Modul steht das Dropdownmenü unter „Modulzuweisung“ auf: „Keine Seiten“. D. h. Dieses Modul erscheint zunächst auf keiner Seite. Zum Testen wählen wir hier „Nur auf der gewählten Seite“ und klicken die Checkbox zu „Home“ an! Anschließend speichert ihr das Modul ab!
Als nächsten Schritt wählt ihr die Bilder aus. Hierbei solltet ihr darauf achten, dass alle Bilde möglichst die gleichen Abmessungen und auch das gleiche Format aufweisen (also entweder alle Bilder im 16:9-Format oder alle Bilder im 4:3-Format und alle Bilder entweder im Quer- oder im Portrait-Format). Ansonsten entstehen zumindest unschöne Springeffekte wie ich euch gleich bewusst zeigen werde!
Sobald ihr natürlich ein Layout oder eine Position einsetzt, bei welcher unterhalb des Sliders kein weiterer Content erscheint tritt dieser Springeffekt mitunter nicht auf.
Der FlexSlider arbeitet im Gegensatz zu vielen anderen Slidern vollständig responsiv. Ich zeige euch hier die verschiedenen automatischen Anpassungen bis herunter zu einer Smartphone-Browserbreite
Ich ziehe das Browserfenster jetzt auf eine Breite von ca.730 Pixel, was ihr auch an der Anzeige unten rechts in der Statusleiste erkennen könnt! Bei dieser Browserbreite seht ihr die größtmögliche Darstellung des FlexSlider-Fensters. Spätestens jetzt sollte euch auffallen, dass zumindest die ersten beiden Bilder recht unscharf dargestellt werden. Das liegt daran, dass die Bildbreite kleiner ist als die Breite des FlexSlider-Fensters. Das könnt ihr anhand der Grafik-Info sehen. Die zu kleinen Bilder werden auf die benötigte Größe aufgezogen, was kontraproduktiv ist, die größeren Bilder werden jedoch auf die passende Größe gestaucht, was zumindest vielen grafisch weniger bewanderten Anwendern eine nützliche Hilfe sein kann. Somit ist es nicht erforderlich, dass alle Bilder exakt die selbe Breite aufweisen müssen.
Als wichtigster Leitsatz gilt somit: Die Mindestbreite des kleinsten Bildes muss mindestens die größtmögliche Breite des FlexSlider-Fensters betragen. Allerdings leidet die Ladezeit natürlich enorm, falls man hier unnötig große Bilder einsetzt. Da heutige Allzweck-Digital-Cameras bereits 16 Mbit und mehr Bild-Auflösung leisten ist ein Einsatz in Originalgröße im Internet zu 99% unzweckmäßig. Lediglich Photographen, Grafiker, Architekten oder ähnliche Berufsgruppen nutzen stellenweiße die Möglichkeit, dem Betrachter das Bild in Originalgröße zu präsentieren. Auch aus SEO-Sicht ist man mit der größtmöglichen Auflösung nicht besser platziert, da auch die Google-Bildersuche nach „Suchoptionen – Bildgröße – Groß“ bereits ein Bild mit einer Auflösung von 1Mbit als „groß“ einstuft und darstellt.
Soviel erst einmal zu den Mindest-Anforderungen dieses Moduls. Für das Finetuning werden in Kürze einige weitere Tutorials erscheinen!
Ich hoffe, dass dieses Tutorial verständlich war und freue mich darauf euch beim nächsten Tutorial wieder begrüßen zu können.

PDF Vorlagen in OSG Seminar Manager bearbeiten

Hallo und herzlich willkommen zu diesem Tutorial, welches erklärt, wie ihr in Joomla 2.5 in der Komponente „OSG Seminar Manager" die PDF-Vorlagen bearbeitet! Dieses Video setzt voraus, dass ihr euch bereits das Video „Kurs in OSG Seminar Manager erstellen" angesehen habt!
Die bereits vorliegende PDF-Vorlage für die Teilnehmerliste weist bereits eine zu breite Tabelle auf! Diese könnt ihr euch ansehen indem ihr einen Haken in die Checkbox vor dem Kurstitel setzt und rechts oben auf „Teilnehmerliste (PDF)" klickt.

Zunächst wählt ihr die zu ändernde PDF-Vorlage unter „Komponenten - Seminar Manager - Einstellungen - PDF-Vorlagen" aus.
In der rechten Spalte findet ihr alle möglichen Parameter für eure PDF-Ausgabe. Wir möchten jetzt beispielsweise im PDF „Teilnehmerliste 1" eine Spalte mit der Kursnummer rechts von der Spalte „E-Mail" ergänzen. Dazu klickt ihr mit der rechten Maustaste in das Tabellenfeld „E-Mail" und wählt „Spalte -- Spalte rechts einfügen"! Sicherlich ist euch aufgefallen, dass im JCE-Editor, welchen ich hier verwende: „Spalte -- Spalte dahinter einfügen" erscheint. Bei allen, welche die englische Version verwenden erscheint hier „Column -- Insert Column after". Diese Funktion erzeugt in jedem Fall eine weitere Spalte in welcher wir jetzt im Spaltenheader „Kursnummer" schreiben. Als nächstes setzt ihr mittels linkem Mausklick den Cursor in das Feld darunter und klickt ebenfalls mittels linkem Mausklick in der rechten Spalte auf „{COURSE_CODE}"! Anschließend speichert ihr die PDF-Vorlage ab!
Jetzt wählt ihr unter „Komponenten - Seminar Manager - Kurse" den gewünschten Kurs durch Setzen eines Hakens in die Checkbox vor dem Kurstitel aus und klickt oben rechts erneut auf „Teilnehmerliste PDF". Hier seht ihr jetzt eure soeben eingefügte zusätzliche Spalte und natürlich die dazu passende Kursnummer! Wie ihr erkennen könnt ist hier natürlich immer noch ein wenig Finetuning an der Tabelle notwendig. Dazu wählt ihr erneut die zu ändernde PDF-Vorlage unter „Komponenten - Seminar Manager - Einstellungen - PDF-Vorlagen" aus und klickt an einer beliebigen Stelle in die Tabelle. Jetzt könnt ihr bei gedrückter linker Maustaste an dem mittleren Anfasser die Tabelle in der Breite ein wenig verkleinern. Während dieses Vorgangs wird euch in einem kleinen Popup-Fenster übrigens die aktuelle Breite der Tabelle angezeigt (in meinem Fall 942 Pixel). Diesen Wert solltet ihr euch ggf. merken, falls ihr mit mehreren Vorlagen arbeitet und immer exakt gleich breite Tabellen wünscht! Anschließend speichert ihr die PDF-Vorlage wieder ab!
Jetzt wählt ihr erneut unter „Komponenten - Seminar Manager - Kurse" den gewünschten Kurs durch Setzen eines Hakens in die Checkbox vor dem Kurstitel aus und klickt oben rechts auf „Teilnehmerliste PDF". Da die Tabelle immer noch zu breit ist müssen wir diese erneut nachbearbeiten! Jetzt sieht die Darstellung, wie auch der nun zu erzeugende Ausdruck, deutlich besser aus!
Ich hoffe, dass dieses Tutorial verständlich war und freue mich darauf euch beim nächsten Tutorial wieder begrüßen zu können.

Kursvorlage in OSG Seminar Manager erstellen

Hallo und herzlich willkommen zu diesem Tutorial, welches erklärt, wie ihr in Joomla 2.5 in der Komponente „OSG Seminar Manager" eine Kursvorlage erstellt! Dieses Video setzt voraus, dass ihr euch bereits das Video „Kurs in OSG Seminar Manager erstellen" angesehen habt!
Zunächst wählt ihr „Neu" unter „Komponenten - Seminar Manager - Kursvorlagen" aus. Hier müsst ihr zumindest die Pflichtfelder „Bezeichnung" und „Titel" ausfüllen und eine „Kategorie" auswählen, um die Kursvorlage speichern zu können.

Öffnet jetzt die Kursvorlage erneut und belegt alle für euch sinnvollen Felder. Dies wären, für mein Dafürhalten, die Felder „Freigegeben auf „Ja" setzen", „Kursnr. nach eigenem Ermessen", „Beginn", „Ende", „Vorlage E-Mail", „Vorlage Rechnung", „Vorlage Teilnliste.", „Preis", „Mwst. Satz", „Preistyp", „Min. Teilnehmerzahl", „Kapazität", „Ort" sowie im Editor-Fenster oben rechts eine Beschreibung des Kurs-Angebotes. Hier solltet ihr in erster Linie die Uhrzeiten sowie die Dauer des Kurses angeben, da diese Vorbelegungsmöglichkeiten in dieser Komponente meiner Meinung nach leider fehlen. Vielleicht holt OSG dies ja mal bei einem späteren Update nach!
Jetzt wählt ihr „Neu" unter „Komponenten - Seminar Manager - Kurse" aus. Unter „Kursvorlage" steht euch jetzt im Dropdownmenü die soeben erstellte Kursvorlage zur Verfügung. Ein Klick auf den Button „Klonen" füllt alle in der Kursvorlage vordefinierten Felder aus und ihr müsst jetzt lediglich die fehlenden, falschen oder veralteten Informationen anpassen.
Mit Kursvorlagen zu arbeiten empfiehlt sich somit zwingend falls ihr ständig oder öfters wiederholende Kurse anbietet, was ja fast immer der Fall sein wird. Natürlich könnt ihr auch erstellte Kursvorlagen bei grundsätzlichen Änderungen (beispielsweise ein Joomla-Versionssprung von v2.5 auf v3.2 oder ähnlich) laufend ergänzen bzw. optimieren.
Ich hoffe, dass dieses Tutorial verständlich war und freue mich darauf euch beim nächsten Tutorial wieder begrüßen zu können.

Kurs in OSG Seminar Manager erstellen

Hallo und herzlich willkommen zu diesem Tutorial, welches erklärt, wie ihr in Joomla 2.5 in der Komponente „OSG Seminar Manager" einen Kurs erstellt!
Zunächst müsst ihr den OSG Seminar Manager im Joomla-Administrator-Bereich bekanntermaßen über „Erweiterungen -- Erweiterungen" installieren. Den OSG Seminar Manager findet ihr auf der Webseite der OSG GmbH. In der Video-Beschreibung findet ihr den Link zum Anklicken:
http://www.osg-gmbh.de/produkte/osg-seminar-manager

Als nächstes installiert ihr das Plugin „plg_user_seminarman"! Dieses ist bereits in eurem Download enthalten, welchen ihr übrigens erst entpacken müsst. Die ebenfalls sich im Paket befindliche LIESMICH.TXT enthält wichtige Informationen zum Thema Datensicherheit in Bezug auf die PDF-Rechnungen, welche auf dem Server gespeichert werden. Das besagte Verzeichnis ist jedoch bereits mit einer .htaccess-Datei gegen direkten Browser-Zugriff, für mein Dafürhalten, ausreichend gesichert!
Vergesst bitte nicht, dass ihr das Plugin noch aktivieren müsst! Fast alle Plugins sind nach der Installation erst einmal deaktiviert und tragen damit sehr oft zur ersten Verwirrung bei der dadurch bedingten nicht oder fehlerhaft funktionierenden Einrichtung bei! Falls ihr Probleme beim Auffinden des Plugins haben sollt, gebt einfach „osg" in das Filterfeld ein. Hier könnt ihr erkennen, dass das Plugin als „Benutzer - OSG Seminar Manager" erscheint.
Als erstes müsst ihr eine Kategorie anlegen. Ansonsten ist es euch später nicht möglich eine sinnvoll benannte Übersichtsseite verschiedener Kurse als Menüpunkt anzulegen, da ansonsten spätestens auf der Unterseite eines einzelnen Kurses als Kategorie-Zugehörigkeit „Default category" angezeigt werden würde, was natürlich alles andere als Professionell aussieht! Je nach Anzahl der Kurse macht eine Kategorie-Verwaltung natürlich ohnehin Sinn um für den Interessenten die Übersicht zu wahren!
Ihr wählt nun „Neu" unter „Komponenten - Seminar Manager - Kategorien" aus. Hier vergebt ihr einen Kategorienamen und im Editorfeld eine zweckmäßige Beschreibung dieser Kategorie. Das ist der Text, welcher später auf eurer Kurs-Übersichtsseite vor den Kursen dieser Kategorie steht!
Jetzt wählt ihr „Neu" unter „Komponenten - Seminar Manager - Trainer" aus. Hier müsst ihr zumindest die Pflichtfelder „Anzeigename", „Vorname", „Nachname" und „Anrede" ausfüllen.
In der rechten Spalte wählt ihr unter „Joomla! Konto" zunächst einmal „Nein" aus. Ihr könnt hier natürlich jederzeit den Trainer mit einem bestehenden Joomla-Konto verknüpfen oder über die Dropdown-Auswahl „einen neuen Joomla! Benutzer erstellen" ein neues Joomla-Benutzerkonto erstellen!
Jetzt wählt ihr „Neu" unter „Komponenten - Seminar Manager - Kurse" aus. Hier müsst ihr zumindest die Pflichtfelder „Titel" ausfüllen und einen „Trainer" sowie eine „Kategorie" auswählen, um den Kurs speichern zu können. Dies macht natürlich nur Sinn um eine Struktur oder eine Vorschau einer Kurs-Übersichtsseite zu erzeugen und zu begutachten.
Öffnet jetzt den Kurs erneut und belegt alle für euch sinnvollen Felder. Dies wären, für mein Dafürhalten, die Felder „Freigegeben auf „Ja" setzen", „Beginn", „Ende", „Vorlage E-Mail", „Vorlage Rechnung", „Vorlage Teilnliste.", „Preis", „Mwst. Satz", „Preistyp", „Min. Teilnehmerzahl", „Kapazität", „Ort" sowie im Editor-Fenster oben rechts eine Beschreibung des Kurs-Angebotes. Hier solltet ihr in erster Linie die Uhrzeiten sowie die Dauer des Kurses angeben, da diese Vorbelegungsmöglichkeiten in dieser Komponente meiner Meinung nach leider fehlen. Vielleicht holt OSG dies ja mal bei einem späteren Update nach! Durch Halten der STRG(Mac: CTRL)-Taste können übrigens mehrere Kategorien ausgewählt werden, so dass der Kurs im Frontend auch in allen relevanten Kategorielisten erscheint!
Um eure Kurs-Übersichtsseite zu erzeugen müsst ihr im nächsten Schritt einen entsprechenden Menüpunkt anlegen. Dazu wählt ihr „Neu" unter „Menüs - Euer Menü". Bei „Menütyp" klickt ihr auf „Auswählen" und wählt im Popup-Fenster den Punkt „OSG Seminar Manager - Kategorie" aus. Als nächstes vergebt ihr einen Titel für diesen Menüpunkt und wählt unter „Status: Freigegeben" aus! Nun klickt ihr in der rechten Spalte unter „Erforderliche Einstellungen - Kategorie auswählen" auf den Button „Kategorie", wählt die zuvor angelegte Kurs-Kategorie aus und speichert das Ganze ab!
Nachdem ihr das Frontend aktualisiert habt seht ihr nun eure fertig eingebundene Kurs-Übersichtsseite mit dem einen bisher angelegten Kurs! Ein Klick darauf lässt den einzelnen Kurs erscheinen.
Ein Klick auf „Diesen Kurs buchen" öffnet ein Layer-Fenster, in welchem sich der Interessent für diesen Kurs anmelden kann.
Möglicherweise sind auch in eurem Layout diverse Farben, Tabellenbreiten oder ähnliches anzupassen. Hierbei wird euch unter Umständen euer Webdesigner/Webentwickler weiter helfen müssen.
Ich hoffe, dass dieses Tutorial verständlich war und freue mich darauf euch beim nächsten Tutorial wieder begrüßen zu können.

Bild Popup aus Beitrag in Lightbox mit JCE Mediabox

Hallo und herzlich willkommen zu diesem Tutorial, welches erklärt, wie ihr in Joomla 2.5 in einem Beitrag euren kleinen Vorschau-Bildern ein Bild-Popup in einer schicken „Lightbox" hinzufügt! Ich zeige euch hier zunächst die unbearbeitete Darstellung eines Beitrags ohne Bilder! Hierzu gilt wieder einmal als erstes zu sagen, dass bei dieser Vorgehensweise 100%ig valider Code entsteht und alle bekannten Browser bei der Darstellung jeweils das exakt gleiche Abbild liefern.

Zunächst müsst ihr den JCE-Editor im Joomla-Administrator-Bereich bekanntermaßen über „Erweiterungen -- Erweiterungen" installieren, da im Standard-Joomla-Editor weder die benötigten Buttons noch die dazu gehörigen Menüs erscheinen. Den JCE-Editor findet ihr auf der Webseite von Joomlacontenteditor.net. In der Video-Beschreibung findet ihr den Link zum Anklicken:
http://www.joomlacontenteditor.net/downloads/editor/joomla-25

Als nächstes installiert ihr das Plugin „JCE-Mediabox"! Dieses findet ihr ebenfalls auf der Webseite von Joomlacontenteditor.net. In der Video-Beschreibung findet ihr den Link zum Anklicken:
http://www.joomlacontenteditor.net/downloads/mediabox/joomla-25
Vergesst bitte nicht, dass ihr das Plugin noch aktivieren müsst! Fast alle Plugins sind nach der Installation erst einmal deaktiviert und tragen damit sehr oft zur ersten Verwirrung bei der dadurch bedingten nicht oder fehlerhaft funktionierenden Einrichtung bei! Falls ihr Probleme beim Auffinden des Plugins haben solllt, gebt einfach „jce" in das Filterfeld ein. Hier findet ihr dann auch den „Editor -- JCE" und könnt erkennen, dass das Plugin „JCE-Mediabox" als „System - JCE Mediabox" erscheint.
Somit ist die Vorarbeit erledigt. Sehen wir uns jetzt zunächst einmal den JCE-Editor an. Dazu müsst ihr im Joomla-Administrator-Bereich unter „Benutzer -- Benutzer" den gewünschten Benutzer auswählen. In der Regel seid ihr das natürlich selbst oder eben euer Publisher! Hier wählt ihr rechts unter „Basiseinstellungen im Dropdownmenü bei „Editor" den neuen „Editor -- JCE" aus und speichert das Profil ab!
Jetzt geht es endlich an die eigentliche Bearbeitung des Beitrags, in welchen wir nun ein Bild mit Bild-Popup in einer „Lightbox" hinzufügen. Ihr öffnet den gewünschten Beitrag im Joomla-Administrator-Bereich und erkennt als erstes den neuen JCE-Editor. Die verschiedenen Standard-Belegungen sind natürlich identisch mit fast allen anderen CMS-Editoren, jedoch gibt es hier eben auch viele nützliche Details, welche ich wohl auch noch in diversen weiteren Tutorials erläutern werde.
Im Idealfall liegen eure beiden Bilder bereits im Medienmanager. Falls ihr euch wundert, warum hier von „beiden Bildern" gesprochen wird, solltet ihr euch an dieser Stelle zunächst mein Tutorial „Bilder hoch laden über Medienmanager" ansehen. In der Video-Beschreibung findet ihr den Link zum Anklicken:
https://www.youtube.com/watch?v=xWCsWXKzpRs

Zunächst setzt ihr den Cursor an die gewünschte Position und klickt auf den Button „Bild" direkt unterhalb des Beitrags! Hier wählt ihr das kleine Beitragsbild aus und klickt oben rechts auf „Einfügen". Wie ihr dieses Bild besser positionieren und optimieren könnt findet ihr in meinem Tutorial „Beitrag mit Bildern im Fließtext ausrichten"! In der Video-Beschreibung findet ihr den Link zum Anklicken:
https://www.youtube.com/watch?v=Rqb06C4agX8

Jetzt ergänzen wir das große Popup-Bild indem wir das Bild im Beitrag einmal anklicken und im JCE-Editor den Button „Insert/Edit Link" anklicken. Hier klickt ihr zunächst auf den Button „Browse" rechts vom Eingabefeld „URL"! Denkt bitte daran, dass ihr jetzt das große Popup-Bild auswählen müsst! Durch einen Klick auf „Insert" übernehmt ihr diese Bild-URL! Anschließend wählt ihr den Reiter „Popups" aus und im Dropdownmenü „Popup Type" das „JCE Mediabox Popup"! Unter „Title" könnt ihr einen Bild-Titel eingeben, sowie unter „Caption" eine Bild-Beschreibung! Zuletzt klickt ihr unten auf „Insert" und speichert anschließend den Beitrag ab!
Nachdem ihr im Frontend den Beitrag aktualisiert habt seht ihr nun euer fertig eingebundenes Bild mit Bild-Popup in einer schicken „Lightbox"! Hier fällt allerdings ein kleiner Schönheitsfehler auf. Wo ist die Bild-Beschreibung? Diese ist natürlich keineswegs verschwunden. Die Entwickler haben bei den CSS-Angaben lediglich etwas gespart. Infolgedessen greift die Beschreibung auf die Body-Color zu. Diese ist in meinem Layout mit der Farbe weiß, wie eben auch der Hintergrund der Lightbox, belegt. Dies seht ihr sobald ihr den Titel markiert und mit der Maus weiter nach unten zieht! Es bleibt nun euch selbst überlassen, ob ihr eure Body-Color im Bedarfsfall anpasst oder direkt eine eigene CSS-Klasse für diesen Tag erstellt.Zweiteres erfordert allerdings etwas Programmieraufwand, da in den Plugincode natürlich eine CSS-Klasse eingefügt werden muss! Falls ihr keine Overrides einsetzen möchtet ist eure Anpassung beim nächsten Plugin-Update natürlich wieder weg!
Wenn ihr euch unter dem Reiter „Popups“ das Dropdownmenü „Media Type“ anseht, könnt ihr erkennen, dass hier nicht nur Bilder in das Popup-Fenster eingebunden werden können. Wählt ihr beispielsweise „Youtube Video“ aus und ersetzt unter dem Reiter „Link“ die Bild-URL durch die gewünschte Youtube-URL seht ihr im Popup zu dem Bild jetzt ein Youtube-Video. Da diese Einbindung prinzipiell ein einfacher Hyperlink ist könnt ihr diesen natürlich statt auf ein Beitragsbild auch auf ein Wort oder einen Satz legen. Ein mögliches Beispiel wäre zur Darstellung eines Youtube-Videos der Satz: Hier geht es zum Video!
Ich hoffe, dass dieses Tutorial verständlich war und freue mich darauf euch beim nächsten Tutorial wieder begrüßen zu können.

Youtube Clip Einbindung in Beitrag mittels AllVideos

Hallo und herzlich willkommen zu diesem Tutorial, welches erklärt, wie ihr in Joomla 2.5 in einem Beitrag einen Youtube-Clip einbindet! Ich zeige euch hier zunächst die Darstellung eines Beitrags ohne Video!
Zunächst besorgt ihr euch das Plugin AllVideos. Ihr findet die aktuelle Version auf der Webseite von Joomlaworks. In der Video-Beschreibung findet ihr den Link zum Anklicken: http://www.joomlaworks.net/extensions/free-premium/allvideos

Nachdem ihr dieses Plugin auf euren PC herunter geladen habt installiert ihr es im Joomla-Administrator-Bereich bekanntermaßen über „Erweiterungen -- Erweiterungen"!
Anschließend müsst ihr das Plugin noch aktivieren. Fast alle Plugins sind nach der Installation erst einmal deaktiviert und tragen damit sehr oft zur ersten Verwirrung bei der dadurch bedingten nicht oder fehlerhaft funktionierenden Einrichtung bei!
Als nächstes sehen wir uns die verschiedenen Möglichkeiten der einzubindenden Syntax an! Dazu klickt ihr in den AllVideos Plugin-Einstellungen auf den Link „AllVideos product page"!
Wie ihr erkennen könnt ist es mittels diesem Plugins nicht nur möglich Youtube-Videos einzubinden. Es deckt darüber hinaus viele andere Anbieter und natürlich auch eure Videos auf eurem Server bzw. in eurem Joomla-System ab! Somit erklärt sich auch der Name des Plugins recht eindeutig!
Die einfachste und schnellste Einbindung erfolgt über diese Syntax! „format/provider" sagt hier folgendes aus: Entweder ihr setzt bei einem externen Video beispielsweise den Provider „youtube" ein oder bei einem internen Video, also einem Video auf eurem Server bzw. in eurem Joomla-System das Format „mp4" oder „flv" oder ähnlich. Die Standard-Einstellung des Plugins sieht übrigens vor, dass die Videos im Unterordner „images/videos" liegen!
Die erweiterte Syntax erlaubt zusätzliche Angaben wie Breite, Höhe und Autoplay. Gerade Letzteres ist nicht immer sinnvoll und sollte wohl überdacht sein. Bei mehr als einem eingebundenen Video auf einer Seite ist es natürlich logisch diese Funktion höchstens bei einem Video auf 1 zu setzen und bei allen anderen Videos auf 0! Weitere ausführliche Erklärungen findet ihr in den AllVideos Plugin-Einstellungen über den Link „AllVideos documentation" sowie in dem Community Forum auf der Webseite von Joomlaworks!
Wir kopieren uns jetzt einfach diese Beispiel-Syntax und fügen sie an der gewünschten Stelle in unserem Beitrag ein! Dazu müsst ihr übrigens nicht die Quelltext-Anzeige wählen bzw. euren Editor ausschalten, sondern könnt die kopierte Beispiel-Syntax direkt in den formatierten Text einfügen!
Nun wählt ihr das Youtube-Video aus, welches ihr implementieren möchtet! Dieses liegt idealerweise in eurem eigenen Youtube-Channel, ist öffentlich und urheberrechtlich euer Eigentum!
Hier müsst ihr lediglich den Teil nach dem „ „v" ist gleich" auswählen und kopieren!
Damit überschreibt ihr jetzt einfach den Youtube-Dateinamen in der eingefügten Beispiel-Syntax und speichert den Beitrag ab.
Nachdem ihr im Frontend den Beitrag aktualisiert habt seht ihr nun euer fertig eingebundenes Video!
Die Video-Experten unter euch haben bestimmt einen kleinen Fehler bei der Einbindung wie auch bei der Darstellung im Frontend erkannt. Da das eingebundene Video im 16:9-Format erstellt wurde passt es natürlich nicht zu der Breite von 600 bei einer Höhe von 450 Pixel, was einem 4:3-Format entspricht.
Infolgedessen ändern wir die Angabe der Breite von 600 auf 800 Pixel um somit das 16:9-Format ordentlich zu bedienen.
Jetzt hat sich wohl ein weiterer Fehler eingeschlichen, oder? Das Plugin funktioniert natürlich auch einwandfrei in einem responsiven Layout! Dazu wählt ihr aus dem Dropdownmenü „Select template" oben rechts in den AllVideos Plugin-Einstellungen den Punkt „Responsive" aus!
Ich werde euch jetzt die weiteren responsive Eigenschaften durch Verändern der Browserbreite live demonstrieren!
Ich hoffe, dass dieses Tutorial verständlich war und freue mich darauf euch beim nächsten Tutorial wieder begrüßen zu können.

Bilder hoch laden über Medienmanager

Hallo und herzlich willkommen zu diesem Tutorial, welches erklärt, wie ihr in Joomla 2.5 Bilder über den Medienmanager hoch laden und verwalten könnt! Dieses Tutorial dient auch zur Vorbereitung bzw. als Vorstufe für die Tutorials „Beitrag mit Bildern im Fließtext ausrichten" und „Bild-Popup aus Beitrag in Lightbox mit JCE-Mediabox"! Ich zeige euch hier zunächst wie ihr den Medienmanager im Joomla-Administrator-Bereich öffnet. Dazu wählt ihr „Inhalt -- Medien" aus!

Hier klickt ihr auf den Button „Durchsuchen" und wählt das gewünschte lokale Bild auf eurer Festplatte aus! Ihr könnt hier durch die bekannten „Explorer-Mehrfach-Auswahl-Funktionen" auch mehrere Bilder auswählen. Haltet euch aber unbedingt an den hinter „Dateien hochladen (Maximale Größe: ..." angegebenen Wert für alle Bilder zusammen. Stellenweise führt ein zu hohes Gesamt-Speichervolumen zu einem Timeout, so dass nach dem Upload öfters Bilder fehlen! Ein separates Tutorial zu den „Explorer-Mehrfach-Auswahl-Funktionen" findet ihr in den nächsten Tagen in meinem Channel!
Falls ihr oft oder viele Bilder hoch laden müsst findet ihr in den nächsten Tagen in meinem Channel auch das separate Tutorial „Einstellungen bzw. Anpassungen in der php.ini bezüglich der Uploadgröße im Joomla-Medienmanager"!
Nun klickt ihr auf den Button „Öffnen", warum auch immer dieser Button so lautet.
Anschließend klickt ihr im Joomla-Medienmanager auf den Button „Hochladen starten"!
Hier könnt ihr, natürlich auch zu einem späteren Zeitpunkt, die hoch geladenen Bilder durch einen Klick auf das Thumbnail in einem Lightshow-Popup-Fenster begutachten!
Durch einen Klick auf das rote Kreuz könnt ihr einzelne Bilder löschen.
Durch eine Auswahl der jeweiligen Checkbox könnt ihr über den Button „Löschen" mehrere Bilder gleichzeitig löschen!
Um einen Unterordner anzulegen gebt ihr einfach einen beliebigen Namen in das Feld links von Button „Verzeichnis erstellen" ein und klickt auf den entsprechenden Button!
Durch einen Klick auf das Ordnersymbol gelangt ihr entsprechend in diesen Ordner.
Durch einen Klick auf den grün-weißen Pfeil gelangt ihr jeweils eine Ebene nach oben!
Hier könnt ihr wieder ein beliebiges Bild oder natürlich auch mehrere Bilder hoch laden.
Falls ihr eure Bilder in einem Beitrag, Modul oder auf einer Galerie-Unterseite in einer kleinen Darstellung präsentieren und mit einem Bild-Popup für die größere Darstellung ausstatten möchtet, solltet ihr unbedingt eine kleine Grafik-Datei erstellen. Ansonsten wird nämlich für die kleine Vorschau die große Grafikdatei unverändert verwendet. D. h. Beim Einsatz von 3 -- 4 Bildern kann die Webseite schon eine Größe von 10 -- 15 MB und mehr erreichen. Wie sich das auf die Ladezeit auswirkt brauche ich wohl nicht zu erklären. Im Übrigen genügt zurzeit bei der „großen Grafikdatei" eine Abmessung von 1.920 x 1.080 Pixel. Das entspricht der Full-HD-Auflösung im Format 16:9 und somit der aktuell physischen Grenze der Grafikkarten und Monitore (die neuesten großen Apple-Monitore einmal ausgenommen)! Falls ihr natürlich professionelle Photographen oder Grafiker seid oder aus sonstigen Gründen eine höhere Auflösung zum direkten Download anbieten möchtet, könnt ihr selbstverständlich auch mit höheren oder gar originalen Auflösungen arbeiten.
Es wirkt sich dann lediglich negativ auf die Ladezeit aus!
Um eine bessere Verzeichnis-Struktur zu erhalten legen wir jetzt den Unterordner „klein" im Unterordner „news" an.
Um hier eine durchstrukturierte Systematik zu erhalten, empfiehlt es sich die Dateinamen zu erhalten und durch sinnvolle Erweiterungen zu ergänzen, beispielsweise Unterstrich und „klein"!
Wie ihr gleich an der Firefox-Grafik-Info erkennen könnt, kommt die kleine Version des Bildes mit wesentlich weniger Speicherplatzbedarf aus!
Ich hoffe, dass dieses Tutorial verständlich war und freue mich darauf euch beim nächsten Tutorial wieder begrüßen zu können.

Modul Positionen im Template darstellen

Hallo und herzlich willkommen zu diesem Tutorial, welches erklärt, wie ihr euch in Joomla 2.5 die Modul-Positionen darstellen lassen könnt! Ich zeige euch hier zunächst die Standard-Darstellung der Layout-Vorschau! Diese könnt Ihr aufrufen, sofern Ihr unter „Erweiterungen -- Templates" auf den Reiter „Templates" klickt und hier bei dem gewünschten Template auf den Textlink „Vorschau" klickt! Es erscheint die Vorschau des jeweiligen Layouts. Sollte bei euch an dieser Stelle ebenfalls der Text „Keine Vorschau verfügbar!" erscheinen müsst Ihr den folgenden Schritt ausführen!

Ihr wählt unter „Erweiterungen -- Templates" den Button „Optionen" aus! Hier aktiviert Ihr unter „Templates" bei „Vorschau Modulpositionen" die Option „Freigegeben"!
Wie Ihr sehen könnt erscheint jetzt anstelle von dem Text „Keine Vorschau verfügbar!" der Textlink „Vorschau" bei den Templates! Sobald ihr den jeweiligen Textlink anklickt erscheint eine Vorschau des jeweiligen Layouts mit allen verfügbaren Modul-Positionen! Nun ist es ein Leichtes eure Module an der von euch vorgesehenen Position darstellen zu lassen!
Für alle, denen diese Thematik noch völlig unbekannt ist folgt jetzt noch kurz die Erklärung wie ihr einem Modul die gewünschte Position zuweist.
Dazu wählt ihr unter „Erweiterungen -- Module" das gewünschte Modul aus!
Anschließend klickt ihr in der Zeile „Position" auf den Button „Position auswählen"!
Falls ihr mehrere Templates installiert habt solltet ihr zunächst die Darstellung der verschiedenen Modul-Positionen etwas einschränken indem ihr in dem Dropdownmenü „Template wählen" euer genutztes Template auswählt!
Hier findet ihr jetzt alle Positionen mit den identischen Namen wie soeben in der Template-Vorschau gesehen!
Ich hoffe, dass dieses Tutorial verständlich war und freue mich darauf euch beim nächsten Tutorial wieder begrüßen zu können.

Zeilen Umbruch mit Shift Return

Hallo und herzlich willkommen zu diesem Tutorial, welches erklärt, wie ihr in Joomla 2.5 in einem Beitrag Zeilenumbrüche und Absätze erzeugt! Ich zeige euch hier zunächst einen Beispiel-Beitrag auf meiner Webseite!
Im Joomla-Admin öffnen wir diesen Beitrag.
Wie ich erkennen könnt wird hier jeder Absatz ordentlich mit dem bekannten HTML-Absatz-Tag p erzeugt!

Zunächst entferne ich den ersten Absatz und speichere den Beitrag ab. Ihr könnt im Frontend das Ergebnis erkennen!
Nun kommen wir zu dem kleinen Kniff: Shift+Return erzeugt nämlich einen einfachen Zeilenumbruch! Im Gegensatz dazu erzeugt ein normaler Return einen neuen Absatz (HTML-Absatz-Tag: p), welcher in der Regel den Eindruck einer Leerzeile erzeugt!
Ich rate euch trotzdem davon ab, den Zeilenumbruch-Tag mehrfach hintereinander zwecks Text-Formatierung einzusetzen, da es sich hierbei zumindest um leicht unsauberen Code handelt.
Das Ganze funktioniert übrigens nicht nur im Joomla-Editor, sondern auch in vielen anderen CM-Systemen sowie auch in zahlreichen Offline-Editoren und auch beispielsweise in Word!
Das ist ein Zeilenumbruch
Das ist ein neuer Absatz
Zweiter Absatz
Ich hoffe, dass dieses Tutorial verständlich war und freue mich darauf euch beim nächsten Tutorial wieder begrüßen zu können.

Beitrag mit Bildern im Fließtext ausrichten

Hallo und herzlich willkommen zu diesem Tutorial, welches erklärt, wie ihr in Joomla 2.5 in einem Beitrag Bilder im Fließtext ausrichtet! Ich zeige euch hier zunächst die unbearbeitete Darstellung eines Beitrags ohne Bilder im Firefox und hier im Safari! Hierzu gilt es als erstes zu sagen, dass bei dieser Vorgehensweise 100%ig valider Code entsteht und alle bekannten Browser bei der Darstellung jeweils das exakt gleiche Abbild liefern.
Zunächst wählt ihr im Joomla-Backend den gewünschten Beitrag aus, setzt den Cursor an die gewünschte Einfügeposition und klickt auf den Button „Bild" unterhalb des Beitragstextes! Es öffnet sich die Medien-Bibliothek. Für alle, die noch nicht wissen wie Sie Ihre Bilder in die Medien-Bibliothek importieren können habe ich ein weiteres Tutorial erstellt: https://www.youtube.com/watch?v=xWCsWXKzpRs - Hier wählt ihr euer Bild aus und klickt anschließend auf „Einfügen"! Anschließend speichert ihr den Beitrag mittels „Speichern" ab!
Hier seht Ihr zunächst die Umsetzung im Firefox und hier im Safari. Die Darstellung selbst ist jedoch gelinde ausgedrückt „unschön"!

Jetzt wählt ihr im Joomla-Backend das Bild aus und klickt auf den Button „Bild einfügen/verändern"! Hier wählt ihr den Reiter „Aussehen" aus. Unter „Ausrichtung" dürfte euch in 99% aller Fälle lediglich „Links" oder „Rechts" interessieren. Hier wählt ihr „Links" aus und beobachtet dabei die Zeile „Format"! Hier wird der CSS-Befehl „float: left;" eingefügt. Für alle Personen, denen CSS völlig fremd ist: Dieser Befehl sagt aus, dass unser Bild „links platziert und vom Text sowie von weiteren Elementen (beispielsweise andere Bilder, Symbole, Videos usw.) umflossen wird"! Wir werden hier später zwar noch etwas in CSS einsteigen, jedoch ist dies für die Umsetzung in diesem Tutorial nur für feine Details notwendig.

Beim Klick auf „Aktualisieren" erscheint eine Fehlermeldung! Diese sagt aus, dass wir eine Bild-Beschreibung (Alt-Tag) eingeben sollen, um behinderten Menschen oder speziellen Endgeräten ohne Bild-Darstellung eine „alternative" Erklärung zu dem Bild liefern können. Diese gebt Ihr unter dem Reiter „Allgemein" bei „Beschreibung" ein.

Wie Ihr seht hat sich die Darstellung bereits enorm verbessert. Was allerdings nach wie vor sehr stört ist die Tatsache, dass unser Text press am Bild anliegt.
Jetzt wählt ihr im Joomla-Backend erneut das Bild aus, klickt wieder auf den Button „Bild einfügen/verändern" und wählt hier wieder den Reiter „Aussehen" aus. Dort gebt ihr nun testweise 15 bei „Vertikaler Abstand" und 10 bei „Horizontaler Abstand" ein. Die Maßeinheit dieser Werte ist übrigens Pixel, also keine Millimeter, Zentimeter, em oder ähnliches! Die CSS-Profis unter euch erkennen hier direkt wieder die Veränderung in der Zeile „Format"! Hier wird jetzt „margin: 15px 10px;" ergänzt. Für alle Nicht-CSS-Profis erklärt sich hier dieser Befehl selbst: Der erste Wert steht für den vertikalen und der zweite Wert für den horizontalen Abstand zwischen Bild und Text! Wir werden später diesen Befehl noch etwas „erweitern"!
So sieht das Ganze schon deutlich besser aus. Um euch das Umfliesen noch etwas näher zu bringen füge ich jetzt noch ein weiteres und kleineres Bild ein.
Zunächst habe ich hier die selben Einstellungen vorgenommen wie bei meinem Passbild.
Wir sollten den Abstand jetzt etwas verkleinern, da natürlich bei einem kleineren Bild ein großer Abstand oft unpassend ist! Ihr könnt übrigens das ausgewählte Bild inklusive aller bereits getätigten Einstellungen einfach mit der Maus neu platzieren! Ein Klick auf „Entfernen" löscht das Bild mitsamt allen Einstellungen! Mit STRG+Z können alle Aktionen rückgängig gemacht werden!
Wie Ihr seht bleiben alle Einstellungen erhalten.
Da hier ein responsives Design eingesetzt wurde, gibt es jetzt natürlich verschiedene Darstellungsmöglichkeiten.

Diesen RSS-Feed abonnieren