Dokumentation zum Team-Modul

 Auch die Social-Media-Symbole können geändert werden. Beispiel: Wenn Sie kein Instagram, sondern Digg benötigen, ändern Sie fab fa-instagram zu fab fa-digg

Vergessen Sie nicht, die Links href="#" durch die richtigen zu ersetzen, die den jeweiligen sozialen Netzwerken entsprechen.

Artikel in das Modul laden

Klicken Sie unter „Erweiterungen – Module“ auf das „Team-Modul“. Wählen Sie eine Position aus, die in der Vorlage vorhanden ist, und fügen Sie das Modul in die Menüelemente ein, die Sie anzeigen möchten.

Klicken Sie auf die Registerkarte „Team-Manager“ und wählen Sie unter „Quelle“ die Option „Artikel“ aus.

Wählen Sie unter „Kategorie auswählen“ alle Kategorien aus, die für Teammitglieder erstellt wurden.

Setzen Sie „Unterkategorie-Artikel“ auf „Einbeziehen“.

Wenn in den vorherigen Schritten Social-Media-Profile für Teammitglieder erstellt wurden, setzen Sie „Benutzerdefinierte Felder“ auf „Ja“. Für den Rest wählen Sie die gewünschten Einstellungen aus.

Benutzerdefinierte Elemente

Benutzerdefinierte Elemente werden in das Feld „Wiederholbare Elemente“ eingegeben. Fügen Sie pro Person oder Teameintrag einen Datensatz hinzu, veröffentlichen Sie ihn und ordnen Sie die Datensätze in der Reihenfolge an, in der sie angezeigt werden sollen. Das Unterformular unterstützt bis zu 250 Einträge.

Benutzerdefinierte Elemente verwenden keine Artikelkategorien, Tags, Artikellinks oder die Extraktion von Artikelbildern. Ihr Inhalt stammt aus dem Unterformular. Ein Layout kann einige Felder auslassen; stellen Sie daher sicher, dass der gewählte Stil die Informationen anzeigt, die Sie eingeben möchten.

Benutzerdefinierte Elemente erstellen

Wählen Sie auf der Registerkarte „Team-Manager“ unter „Quelle“ die Option „Benutzerdefinierte Elemente“ aus.

Geben Sie in alle Felder die Informationen zur Person ein, wie z. B. Foto, Name, Haupttitel usw. Verwenden Sie die Schaltfläche „Hinzufügen“, um so viele Teammitglieder hinzuzufügen, wie benötigt werden.

Wenn Social-Media-Profile angezeigt werden sollen, setzen Sie „Soziales Netzwerk“ auf „Ja“. Verwenden Sie auch dort die Schaltfläche „Hinzufügen“, um Social-Media-Profile hinzuzufügen. Wählen Sie unter „Social-Media-Symbol“ eines der vorhandenen Symbole aus und fügen Sie einen gültigen URL-Link hinzu, der diesem Social-Media-Profil entspricht.

Wählen Sie die Ordnerquelle aus

1. Stellen Sie in den Moduleinstellungen die Quelle auf „Ordner“ ein.
2. Wählen Sie ein Verzeichnis unter dem Joomla-Ordner images/ Ordners über das Feld „Ordnerverzeichnis“ aus.
3. Wählen Sie unter „Stil“ einen visuellen Stil aus.
4. Legen Sie bei Bedarf die Anzahl der Elemente fest. Der Wert 0 bedeutet, dass alle unterstützten Dateien berücksichtigt werden.

Der ausgewählte Ordner und seine Unterordner werden rekursiv durchsucht. Unterstützte Dateiendungen sind jpg, jpeg, png, gif, webp, bmpund mp4.

Format des Ordnernamens

Verwenden Sie den Dateinamen ohne Dateiendung, um den Namen, die Berufsbezeichnung und die Beschreibung der Person anzugeben:

01 - Jane Doe | Creative Director || Designs brand systems and campaigns.jpg

Verwenden Sie dieses empfohlene Muster:

ORDER - NAME | TITLE || DESCRIPTION.ext

Numerische Präfixe

Eine führende Ziffer, gefolgt von einem Trennzeichen, wird aus dem angezeigten Namen und Titel entfernt. Diese Beispiele werden wie folgt angezeigt: Jane Doe:

01 - Jane Doe.jpg
02_Jane Doe | Designer.jpg
03. Jane Doe | 02: Lead Developer.jpg

Bindestriche und Unterstriche im restlichen Text werden als Leerzeichen dargestellt. Der ursprüngliche Dateiname und die Bild-URL bleiben unverändert.

Einfache Dateinamen

Jane-Doe | Designer || Short biography.webp

Wenn kein Pipe-Zeichen vorhanden ist, wird der vollständige Dateiname zum Namen. Wenn nach dem Pipe-Zeichen kein Titel angegeben ist, bleibt das Titelfeld leer.

Darstellung und Layout

Stil

Das Manifest bietet die Optionen „Standard“, „Anzeigen“, „Wand“, „Folie“ sowie „Stil 1“ bis „Stil 65“ an. Das ergibt insgesamt 69 Layout-Optionen. Nutzen Sie die Miniaturansichten in der Stilauswahl, um diese zu vergleichen; jedes Layout kann Bilder, Titel, Beschreibungen, Links und Social-Media-Steuerelemente unterschiedlich anordnen. Nicht jedes Layout stellt jedes Feld auf die gleiche Weise dar oder reagiert auf jede Darstellungsoption.

Zu den stil-spezifischen Steuerelementen gehören:

• Stil 12: Zeigt die „Foto-Höhe“ an.
• Stil 60: Lässt die Bildbreite von 200 px bis 550 px zu.
• Stil 63: Bietet die Optionen „Heller Stil“ oder „Dunkler Stil“ an.
• Folie: Stellt die Optionen „Paginierung anzeigen“, „Pfeile anzeigen“ und „Pfeilstil“ zur Verfügung.
• „Anzeigen“: Legt die Einstellungen für Hintergrund- und Textfarbe fest.

Version: „Standard“ oder „Slider“

„Slider“ präsentiert das Team als bewegliches Karussell. Es ermöglicht die Einstellungen für automatische Wiedergabe, Endloswiedergabe, Navigation und die Anzahl der Elemente. „Standard“ präsentiert ein responsives Raster und ermöglicht die Isotope-Filteroption. Wählen Sie zuerst die Version aus, da sich dadurch ändert, welche Steuerelemente im Verwaltungsformular angezeigt werden.

Spalten des responsiven Rasters

Wählen Sie im Standardmodus die Anzahl der Spalten separat für Desktop, Tablet (Querformat), Tablet (Hochformat), Mobil (Querformat) und Mobil (Hochformat) aus. Jede Einstellung bietet 1 bis 10 Spalten. Die gespeicherten Werte sind Spaltenprozentsätze; beispielsweise entsprechen 25 % vier gleich großen Spalten und 50 % zwei. Wählen Sie eine größere Spaltenanzahl nur dann, wenn der Modulbereich und der gewählte Stil genügend Platz für jedes Element lassen.

Anzahl der Elemente im responsiven Slider

Im Slider-Modus legt die Einstellung „Elemente“ fest, wie viele Elemente bei jeder der fünf Gerätegrößen sichtbar sind. Für jeden Breakpoint können 1 bis 10 sichtbare Elemente festgelegt werden. Bei schmalen Bildschirmen sind ein oder zwei Elemente in der Regel besser lesbar, als die Desktop-Anzahl auf mobile Geräte zu übertragen.

Verhalten und Steuerelemente des Sliders

Allgemeine Einstellungen

Größenanpassungsmodus

Dies gilt für Bilddateien, die von Artikeln, benutzerdefinierten Elementen und Ordnerelementen verwendet werden. Der allgemeine Bild-Helper des Moduls verarbeitet das Bild, wenn ein Layout die Bild-URL anfordert; daher gilt die Einstellung sowohl für den Standard- als auch für den Slider-Präsentationsmodus sowie für alle Stile, die das Bild des Elements darstellen. Das gewählte Layout kann nach dem Laden des verarbeiteten Bildes weiterhin eigene CSS-Größenanpassungen oder visuelle Ausschnitte anwenden.

Diese Steuerelemente sind unabhängig von den ausschließlich für Artikel geltenden Umschaltern für die Bildquelle und dem Platzhalter. Sie ändern die Art und Weise, wie ein ausgewähltes Bild aufbereitet wird; sie legen nicht fest, woher das Bild stammt. Bei MP4-Dateien in Ordnern verwendet das Modul außerdem den konfigurierten Größenanpassungsmodus und die Abmessungen, wenn es ein browserseitiges Miniaturbild generiert; die MP4-Datei selbst bleibt ein Video.

Wählen Sie beispielsweise „Füllen“ für einheitlich große Hochformat-Miniaturansichten, wenn das Beschneiden der Ränder akzeptabel ist; wählen Sie „Anpassen“, wenn jeder Teil des jeweiligen Quellfotos sichtbar bleiben muss; wählen Sie „Dehnen“ nur, wenn Verzerrungen akzeptabel sind oder die Seitenverhältnisse der Quelle bereits übereinstimmen. „Keine“ ist sinnvoll, wenn die ursprünglichen Abmessungen und das Format beibehalten werden sollen.

Filter und Abstand zwischen Elementen

Der Filter zeigt eine Reihe von Schaltflächen über den Teamelementen an. Besucher können „Alle“ oder eine Bezeichnung auswählen, um nur passende Elemente anzuzeigen, ohne die Seite zu verlassen. Die Ausrichtung des Filters kann „Rechts“ (Standard), „Zentriert“ oder „Links“ sein.

Wichtig: Bei der Slider-Anordnung werden keine Filter angezeigt. Stellen Sie „Version“ auf „Standard“ ein. Der Filter benötigt außerdem mindestens eine nicht leere Bezeichnung in der ausgewählten Quelle.

01 - Jane Doe | Creative Director.jpg
02 - John Smith | Engineering.jpg

images/team/
├── 01 - Jane Doe | Creative Director || Brand and campaign systems.jpg
├── 02 - John Smith | Engineering Lead || Platform and infrastructure.mp4
└── 03 - Alex Lee | Product Designer || Product experience and research.webp

Der „Elementabstand“ passt den Abstand zwischen Teamelementen an, sofern das aktive Layout dies unterstützt. Der „Element-Fokus-Effekt“ steuert die Darstellung bei Fokus oder Mauszeiger in Layouts, die diese Funktion implementieren. Da diese Effekte layoutabhängig sind, sollten Sie sie mit dem tatsächlich ausgewählten Stil in der Vorschau anzeigen.

9. Bildeffekte

Bildform

Die Bildform steuert den sichtbaren Umriss jedes Bildes und ist unabhängig von dessen visueller Darstellung. Wählen Sie „Rechteck“, „Kreis“, „Ellipse“, „Raute“, „Sechseck“, „Spritzer“, „Form 1“ bis „Form 6“ oder „Zufällig“ (Formen 1–6). Bei „Rechteck“ wird das Bild nicht durch eine Form beschnitten. „Zufällig“ wählt für einzelne Bilder aus den sechs mitgelieferten Formmasken aus.

„Kreis“, „Ellipse“, „Raute“, „Sechseck“ und „Spritzer“ nutzen das Browser-Clipping. „Form 1–6“ verwenden transparente WebP-Masken, die im Modul enthalten sind. Die Formauswahl kann mit „Original“, „Zeichnung“ oder „Aquarell“ kombiniert werden. Einige Layouts rendern Fotos als CSS-Hintergründe statt als Bildelemente; diese Layouts unterstützen möglicherweise weder die Formmaske noch den Canvas-Effekt.

Bild-Effekt „Zeichnung“

Der Bild-Effekt „Zeichnung“ legt fest, wie das Quellfoto dargestellt wird. Wählen Sie einen Modus aus:

• Effektstärke: Erscheint bei „Zeichnung“ und „Aquarell“. Wählen Sie 1 (Weich), 2 (Leicht), 3 (Normal), 4 (Stark) oder 5 (Sehr stark); die Standardeinstellung ist 3. Im Zeichnungsmodus verstärken höhere Stufen die Linienführung und die Papierstruktur. Im Aquarell-Modus vertiefen höhere Stufen die Pigmentierung, verstärken die Farbtrennung und die Ansammlung an den Rändern und machen die Papierstruktur deutlicher sichtbar.
• Mauszeiger über Bilder: Wählen Sie „Original“, um das Quellfoto anzuzeigen, wenn sich der Mauszeiger über dem Element befindet, oder „Zeichnung“, um das ausgewählte bearbeitete Bild sichtbar zu lassen. Diese Einstellung ist sowohl für „Zeichnung“ als auch für „Aquarell“ verfügbar.

Cache für generierte Bilder

Bearbeitete Bilder werden im Browser generiert und können als WebP-Dateien gespeichert werden, /cache/mod_mx_team/drawing-effects , um spätere Seitenaufrufe zu beschleunigen. Wenn Sie ein Foto, eine Form, einen Effektmodus oder eine Stufe ändern, verwendet das Modul ein anderes zwischengespeichertes Ergebnis. Um alle generierten Kopien zu entfernen, öffnen Sie das Modul im Administratorbereich und verwenden Sie „Cache leeren“ in den Einstellungen. Bestätigen Sie die Aktion; der Cache-Ordner bleibt bestehen und die Bilder werden neu generiert, sobald Besucher die Seite laden.

Wenn Effekte nicht angezeigt werden

• Verwenden Sie ein Layout, das das Mitgliederfoto als ausgibt; CSS-Hintergrundbilder werden möglicherweise nicht verarbeitet.
• Bilder von einer anderen Domain müssen den Zugriff auf die Canvas-Area über CORS zulassen. Andernfalls kann der Browser ihre Pixel nicht lesen und das Originalbild wird stattdessen angezeigt.
• Sehr große Bilder werden vor der Verarbeitung auf eine maximale Arbeitsgröße verkleinert, sodass feine Details vereinfacht werden können.
• Überprüfen Sie die Browserkonsole auf Lade- oder Canvas-Fehler. Wenn ein zwischengespeichertes Ergebnis veraltet erscheint, leeren Sie den Cache für Zeicheneffekte und laden Sie die Seite neu.

Beim Scrollen anzeigen

Der „Reveal“-Effekt ermöglicht eine durch Scrollen ausgelöste Einblendanimation in Layouts, die „Reveal“-Markup enthalten. Unter „Animation“ wird festgelegt, ob die Animation einmalig („Once“) oder fortlaufend („Always“) ausgeführt wird. Unter „Effekt“ wird eine Richtung sowie eine Einblendart wie „Fade“, „Zoom“, „Shake“, „Blink“ oder eine ähnliche Wirkung ausgewählt. Die Verfügbarkeit eines Feldes im Modulformular garantiert nicht, dass es von jedem Stil verwendet wird.

Korrekturen an Social-Icons in der Vorlage

Fügen Sie in einer der CSS-Dateien der Vorlage den folgenden Code ein

ul.social {
    display: inline
}

ul.social li {
    display: inline-block
}
ul.social li a {
    color: #7b7b7b;
    font-size: 16px;
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50px; 
    background-color: #f1f1f1;
    color: #333;
    border: 1px solid transparent;
    transition: background-color .4s ease-in-out
}

Mit diesem Code ist es möglich, die Social-Media-Symbole für Teammitglieder in den Artikeln inline und in ansprechender Optik darzustellen.

Fehlerbehebung

Das Modul ist nicht sichtbar

• Stellen Sie sicher, dass das Modul veröffentlicht ist, eine Vorlagenposition zugewiesen wurde und dem aktuellen Menüpunkt zugeordnet ist.
• Überprüfen Sie die Zugriffsebene des Moduls, die Start- und Enddaten der Veröffentlichung sowie die Darstellung der Vorlagenposition.

Es werden keine Mitglieder oder Artikel angezeigt

• Überprüfen Sie bei Artikeln, ob diese veröffentlicht und zugänglich sind, und überprüfen Sie anschließend die ausgewählten Kategorien, die Tiefe der Unterkategorien, die Tags und den Modus „Ausgewählte Artikel“.
• Bei benutzerdefinierten Elementen: Vergewissern Sie sich, dass ein oder mehrere Einträge auf „Veröffentlichen“ gesetzt sind.
• Bei Ordnern: Vergewissern Sie sich, dass sich der ausgewählte Ordner innerhalb images und Dateien mit unterstützten Dateiendungen enthält.
• Leeren Sie den Modul-Cache von Joomla, nachdem Sie die Quelle oder deren Inhalt geändert haben.

Bilder fehlen oder sind unverändert

• Aktivieren Sie bei Artikeln die richtigen Bildquellen-Schalter, überprüfen Sie die Reihenfolge und kontrollieren Sie den Platzhalterpfad.
• Bei benutzerdefinierten Einträgen wählen Sie unter „Nach Bild suchen“ ein Bild aus und stellen Sie sicher, dass der ausgewählte Stil das Bildfeld verwendet.
• Bei „Ordner“ überprüfen Sie die Dateinamenerweiterung und den Dateisystempfad unter images.
• Die Bildgrößenanpassung erfordert eine funktionierende PHP-Bildunterstützung und einen beschreibbaren Cache-Speicherort.
• Zeicheneffekte können bei der Verarbeitung von Bildern aus anderen Domänen fehlschlagen; überprüfen Sie die Browserkonsole und testen Sie mit einem Bild derselben Website.

Probleme mit dem Quellordner

Schieberegler oder Filtersteuerelemente werden nicht angezeigt

• Für Filter müssen der Standardmodus und die Option „Filter anzeigen“ aktiviert sein.
• Die Anzahl der responsiven Elemente und die Steuerelemente für die automatische Wiedergabe erfordern den Schieberegler-Modus.
• Die für den „Slide“-Stil angezeigten Einstellungen für Paginierung und Pfeile gelten nicht für jedes Layout.
• Überprüfen Sie, ob der ausgewählte Stil die Steuerung unterstützt und ob eine andere Erweiterung keinen JavaScript-Fehler verursacht hat.

Social-Media-Symbole fehlen

Aktivieren Sie „Soziales Netzwerk“ für das Element, fügen Sie mindestens ein Social-Media-Symbol und eine URL hinzu und prüfen Sie, ob die Vorlage bereits eine kompatible Font-Awesome-Bibliothek lädt. Verwenden Sie die Option „Font Awesome“ des Moduls nur, wenn die Symbolschriftart fehlt.