SVG-Support in Joomla Content Editor auch für CustomField Image und für Einleitungs- und Beitragbild
- Details
Hinweis vorab: Ich nutze in meinen Projekten immer den Joomla-Content-Editor (JCE) statt des Joomla-Standard-Editors. Alle nachfolgenden Ausführungen beziehen sich auf den JCE, der sehr viel mehr Einstellungsparameter hat und viele Joomla-Editor-Einstellungen und Funktionen überschreibt. Wie sich meine Erkenntnisse auf den Joomla-Editor anwenden lassen, habe ich nicht geprüft.
Problembeschreibung SVG-Support
Oft liest man, dass Joomla keine SVG-Dateien unterstützt. Das ist so nicht korrekt. Joomla unterstützt sehr wohl SVG-Images, jedoch ist es auch Sicherheitsgründen standardmäßig nicht aktiviert. SVG können ausführbaren Code enthalten und somit Schadcode in ein Projekt schleusen, wenn Seitenbesuchern erlaubt wird SVG hochzuladen. Da das viele nicht wissen und somit schon böse Erfahrungen machen mussten, ist diese Deaktivierung eine gute Entscheidung.
Wer in seinem Projekt SVG verwenden möchte, was z.B. für die Einbindung von Logos sogar ratsam ist, und den Upload von Dateien in das Projekt sowie nur durch Admins oder geschulte Mitarbeiter zulässt, will den SVG-Upload zulassen. Wie man SVG im Joomla-Projekt zulassen kann, sodass diese über den Media-Manager anzeigbar und auswählbar sind, dazu gibt es diverse Hilfeseiten im Internet, die über die Suchmaschinen leicht auffindbar sind. Deshalb führe ich das hier nicht noch einmal aus.
Was ist nun der Grund für diesen weiteren Beitrag zu diesem Thema? Wenn Sie den SVG-Support entsprechend Anleitung aktiviert haben, dann können Sie mit dem Plugin-Editor-Button "Medien" i.d.R. unterhalb der Editorfenster den Medien-Dialog aufrufen und dort in der Dateiauswahl SVG finden und durch Auswahl in den Beitrag einfügen. Sie können auch über die klickbaren Icon "insert image" in der Editor-Toolbar Dialoge zur Auswahl und zum Einfügen von SVG-Dateien aufrufen - entweder den Dialog "Bilder-Manager" oder den Dialog "Erweiterter Bildermanager". Soweit also alles gut.
SVG-Grafiken direkt inline in Joomla-Beiträge per JCE
- Details
Problembeschreibung SVG-Grafiken in Joomla-Beiträgen
Aus Performance-Gründen geht der Trend beim Bau von Websites dahin, Grafiken nicht mehr als separate Sourcen vom Server zu laden, sondern diese wo möglich direkt in den Code zu schreiben. So reduziert man die Anzahl der Serverrequests. Wenn man z.B. Social-Media-Icons als SVG-Klickbuttons einfügen will, kann man das über sehr unterschiedlche Methoden erreichen, als CSS-image-URLs (base64 codiert), oder noch einfacher aus Awesome-Font-Icons oder man schreibt den SVG-Code direkt in den DOM-Baum der Website. Wie das gemeint ist sieht man in diesem Beispiel für einen Facebook-Button:
<div>
<a href="https://www.2343ec78a04c6ea9d80806345d31fd78-gdprlock/mediadesign.sk/"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48" width="6vW" height="6vW"> <path fill="#3F51B5" d="M42,37c0,2.762-2.238,5-5,5H11c-2.761,0-5-2.238-5-5V11c0-2.762,2.239-5,5-5h26c2.762,0,5,2.238,5,5V37z"></path> <path fill="#FFF" d="M34.368,25H31v13h-5V25h-3v-4h3v-2.41c0.002-3.508,1.459-5.59,5.592-5.59H35v4h-2.287C31.104,17,31,17.6,31,18.723V21h4L34.368,25z"></path> </svg> </a>
</div>
Das Problem hierbei ist, wenn man in den Joomla-Content-Editor (JCE) oder auch in den Joomla-Standard-Editor MCE solchen SVG-Code einfügt, dann wird der HTML-Code i.d.R. bei den Grundeinstelungen beim Speichern bereingt, d.h. unser SVG-Code fliegt komplett raus.
Leider gibt es für SVG-Code im JCE keine prinzipielle Erlaubnis-Option wie z.B. für das Zulassen von Java-Script- (<script>...</script>) oder CSS-Style-Containern (<style>...</style>). Das wird damit zusammenhängen, dass SVG selbst wieder Tags enthalten kann.
Weiterlesen: SVG-Grafiken direkt inline in Joomla-Beiträge per JCE
PDF-Download-Links in Joomla-Beiträge oder Module einfach einbinden
- Details
Problem / Aufgabenstellung: PDF in Jooml-Beiträge einbinden/verlinken
Um PDF als Download in eine Joomla-Beitrag oder in das Custom-Modul einzubinden gibt es verschiedenen Möglichkeiten. Eine oft Verwendete Lösung ist Phoca-Download. Aber diese ist eine komplexe allumfängliche Komponente und zielt vor allem auf Anwender ab, die umfangreiche Download-Repositories bereitstellen wollen. Für viele geringere Ansprüche ist es zu viel Funktionsumfang.
In meinen Kundenprojekten habe ich bis Joomla 3.x für einfache Fälle immer die Erweiterung "Attachments" von Jonathan M. Cameron eingesetzt. Damit war es sehr einfach möglich ein PDF an oder in einen Beitrag anzufügen. Leider wird diese Erweiterung von Jonathan nicht mehr supportet und war eigentlich schon für Joomla 3 code-technisch nicht auf der Höhe der notwendigen Kompatibiltät. Hier ist also nichts für Joomla 4 zu erwarten.
Wie kann man trotzdem einfach PDF-Download-Links einbinden, ohne Kosten für Erweiterungen?
Weiterlesen: PDF-Download-Links in Joomla-Beiträge oder Module einfach einbinden
Indexierung von Subdomain-Website verhindern (robots.txt, meta-Tag)
- Details
Zielsetzung: Indexierung für eine Subdomain-Website verbieten
Für diese Aufgabenstellung könnte es verschiedene Szenarien geben die einen triftigen Grund liefern. Hier gehe ich mal von einer Konstellation aus, bei der Sie z.B. ein Hauptprojekt unter der Domain www.mein-projekt.de betreiben - als LIVE-Projekt. Zu Test und Entwicklungszwecken haben Sie auf einer Subdomain, z.B. dev.mein-projekt.de eine gespiegeltes Projekt laufen. Natürlich würde es zu allererst Sinn machen, das DEV-Projekt per Passwortschutz zu sperren. Aber es kann Gründe geben, warum das gerade mal nicht tun will. Wenn das Projekt also offen ist, will man trotzdem verhindern, dass Suchmaschinen sich die Seite des DEV-Projektes gierig krallen und indexieren. Man hätte dann die Situation, dass Nutzer sich in dieses Projekt "verlaufen", was bei einem Shop-System aber auch normalen Websites große Irritationen erzeugen könnte - oder einfach nur dem LIVE-Projekt Konkurrenz macht (z.B. durch dublicate content). Also wollen wir verhindern, dass Suchmaschinen diese Seiten indexieren.
Lösung für das Verhindern der Indexierung eine Parallelprojektes
Für diese Aufgabe gibt es zunächst zwei übliche von den seriösen Suchmaschinen akzeptierte und berücksichtigte Werkzeuge. Zum einen die robots.txt, zum anderen einen Meta-Tag in den Dateiheadern.
Weiterlesen: Indexierung von Subdomain-Website verhindern (robots.txt, meta-Tag)
JTL Shop 5: Die Breite von Blöcken im Layout anpassen
- Details
Problembeschreibung - Blockbreite im JTL-Shop5 anpassen
Man kann in JTL-Shop 5 eine Menge konfigurieren um das Layout im Frontend nach Wunsch anzupassen, entweder über das Template oder über über globale Parameter. Was aber nicht einfach einstellbar ist, ist die Breite des Shop-Inhaltes. Diese weicht in der Standard-Konfiguration von der Breit des Header- und Footer bereiches ab, was lt. der Entwickler bewusst so voreingestellt ist. Man wollte diesen breiter machen als den Rest und somit den Platz optimaler für die Produktdarstellungen ausnutzen. Meiner Meinung nach ist die Argumentation dazu etwas inkonsequent.
s. dazu: https://forum.jtl-software.de/threads/nova-theme-hintergrund.144766/
oder: https://forum.jtl-software.de/threads/shop5-nova-hintergrund.139665/
oder: https://forum.jtl-software.de/threads/verschiedene-seiten-breiten-im-shop5-nova.150301/
Lösung - Anpassen der Breite für den Shop-Content-Wrapper
Fakt ist, wer hofft den Shop-Inhaltsblock generell über einen Parameter im Backend konfigurieren zu können, wird vergeblich suchen. Das geht leider nur über Modifikationen in den Templates-Scripten. Wie, das soll hier beantwortet werden.
Weiterlesen: JTL Shop 5: Die Breite von Blöcken im Layout anpassen
JTL: Unterschied zwischen Merkmalen, Attributen, Varianten und Variantenkombis, eignene Felder
- Details
JTL-Begriffe für Features und Funktionen
Die Warenwirtschaft JTL bietet diverse Möglichkeiten Produkte mit zusätzlichen Informationen und Funktionen auszustatten. Aber kaum einem JTL-Anfänger ist klar, was wofür verwendet wird, was man womit erreichen kann. Teilweise sind die Begriffe dafür sehr abstrakt oder zumindest nicht selbsterkärend oder assozieren gleichen Bedeutungen. Ein Beispiel ist die Verwendung der Begriffe "Merkmal" und "Attribute". Ein Attribut ist im Grund auch nur ein anderes Wort für Merkmal. Was unterscheidet also diese Funktionen?
Welche Begriffe und damit verbundene Features in JTL wollen wir erklären?
- Merkmale und Ihre Werte
- Attribute und Ihre Werte
- Variantionen vs. Variantenkombinationen
- Kindartikel
- Stücklisten
Bootstrap mediaQueries in JTL-Webshop - Entwicklungstool (DeviceSize-Tool)
- Details
Wie mein Device-Size-DEV-Tool im JTL-Shop-Frontend funktioniert
In diesem kleinen Tutorial zeige ich, wie man sich beim Aufbau oder Anpassen von JTL-Shop-Templates im Frontend eine kleine Infobox mit den aktuellen Bootstrap-MediaQueries (media-breakpoints wie: xs, sm, md, lg, xl, xxl) und Browserfenstergrößen in rem und px anzeigen lassen kann. Das ist sehr nützlich um das Verhalten von Styles Device-abhängig zu beobachten und entsprechende Einstellungen der Styles in den SCSS-Scripten vornehmen zu können. In meinen Joomla-Projekten habe ich diese Scripte als Modul seit vielen Jahren erfolgreich im Einsatz und sie erleichern mir die Frontendentwicklung enorm. Seit dem ich für für JTL-Shop Templates programmiere oder projektbezogen anpasse, habe ich mir dieses kleine Werkzeug auch für den JTL-Shop erstellt.
Weiterlesen: Bootstrap mediaQueries in JTL-Webshop - Entwicklungstool (DeviceSize-Tool)
In Joomla-Beiträgen Links mit dem NO-FOLLOW-Attribute ausstatten
- Details
Es gibt diverse Gründe um Suchmaschinen zu sagen, dass ein Link auf der eigenen Webseite nicht verfolgt werden soll. Z.B: wenn man eine erkennbaren Backlink verhindern will, oder wenn die Verlinkte Seite nur eine andere Darstellung des gleichen Inhaltes ist und man Dublicate-Content vermeiden will.
Dafür gibt es für a-Tag das no-Follow-Attribut.
Mit dem Joomla-Content-Editor lässt sich ein Link sehr einfach mit diesem Attribut ausstatten. Hier ist beschrieben wie man dabei in Joomla vorgeht, egal ob in Beiträgen oder Benutzer-Modulen. Überall wo der Editor eingebunden ist, läßt sich diese Link-Funktion auch so verwenden:
Weiterlesen: In Joomla-Beiträgen Links mit dem NO-FOLLOW-Attribute ausstatten
Ein Gantry5-Particle-Modul in ein Template-Layout-Particle umwandeln
- Details
Zielstellung dieses Beitrages
Dieser Beitrag richtet sich speziell an Nutzer des Gantry5-Template-Frameworks unter Joomla.
Wer mit dem Ganty5-Template unter Joomla arbeitet, weiss, dass man zum einen Inhalte im Template-Layout über Gantry5-Particle einpflegen kann. Andererseits ist es aber auch möglich Particle als Module anzulegen und diese Module auf dem Joomla-üblichen Weg Modulpositionen des Templates zuzuweisen. Ein dritter Weg wäre über eine Paticle-Instanz im Template-Layout sich ein existierendes Modul einzuladen.
Rein theoretische kann man fast ganz ohne Joomla-Module auskommen und Inhalte nur über Particle im Gantry-Layout-Manager einpflegen. Z.B. bei sogenannten One-Pager-Projekten mache ich persönlich das ganz gern so, da sowieso jeder Particle-Inhalt immer nur an einer Position auf nur einer Startseite veröffentlicht wird. Bei komplexeren Webprojekten praktiziere ich meist eine Mischform. Inhalte die ich mehrfach auf Seiten veröffentliche und diverse weitere Einstellmöglichkeiten benötige (z.B. Sprachabhängigkeiten) kreiere ich als Modul-Particle und wirklich statische Inhalte, die immer und überall unverändert angezeigt werden, hänge ich meist sofort fest als Particle in das Gantry5-Layout - entweder schon in das Basic-Outline oder nur in eines der Sub-Layouts.
Weiterlesen: Ein Gantry5-Particle-Modul in ein Template-Layout-Particle umwandeln
Kaskadierte Accordeon-Effekt in Joomla-Beiträgen per Definitionslistenelemente
- Details
Zielstellung Accordion-Feature für Joomla-Inhalte
Die Aufgabenstellung bestand darin mit möglichst einfachen Mitteln Inhalte z.B. FAQ über ein Accordion-Feature in Joomla-Beiträge einzubinden. Es gibt zwar für Joomla fertige Plugins und Module, die das ermöglichen, jedoch haben diese diverse Einschränkungen die für mich eine Nutzung nicht infragen kommen ließen. Dazu gehört, dass ich die Akkordeon-Inhalte an beliebiger Stelle in Custom-Module oder Joomla-Beiträg einfügen wollte und diese auch kaskadierbar aufgebaut werden sollten. Weiterhin wollte ich ohne weitere Scriptbibliotheken auskommen, mich also nur auf das vorhandene jQuery stützen. Alles sollte möglichst schlank sein, so dass auch Authoren recht einfach damit Akkordeon-Inhalte erstellen können.
HTML-Struktur für Akkordeon-Inhalte mit Definitionslistenelementen
Mittels des Joomla-Content-Plugins RegularLabs ContentTemplater lassen sich fertige HTML-Template-Schnippsel in einen Beitrag per Editor-Button einfügen. Damit habe ich eine Vorlageschnipsel mit folgendem Inhalt erstellt:
<dl class="accordion"> <dt>Toggle trigger Headline</dt> <dd>Inhalt</dd> </dl>
Also recht einfach gehalten. Die Texte sind Platzhalter damit das Editieren an der korrekten Stelle einfach erfolgen kann. Damit wird eine Akkordeon mit einem Element erzeugt.
Weiterlesen: Kaskadierte Accordeon-Effekt in Joomla-Beiträgen per Definitionslistenelemente
Startseiten-Produkt-Slider und Boxen in JTL in beliebiger Reihenfolge und Postion
- Details
Problembeschreibung
Immerhin hat der JTL-Shop schon diverse CMS-typische Funktionen, mit denen es auch möglich ist an Seitenpositionen ergänzende Informationen als Blöcke anzuzeigen. Diese Blöcke werden in JTL "Boxen" genannt. Dazu gibt es ein Set an Startseitenboxen die templateabhängig (z.B. wie bei EVO) als Produktslider präsentiert werden. Damit werden z.B. solche Funktionen angezeigt wie: "Neueste Produkte", "Beliebtesten Produkte", "Top-Produkte", "Aktionsprodukte" etc. Weiterhin gibt es viele andere Boxen und u.a. auch frei gestaltbare "Custom-Boxen", die beliebig mit Text oder HTML-Inhalten befüllt werden können.
Leider ist es im Template EVO (4.0.6) so, dass für die Startseitenboxen und Custom-Boxen festgelegte und eingeschränkte Ausgabepositionen und Funktionen gibt. In meinen betreuten Projekten zeigte sich hier eine gewisse Unflexibiliät, was die auftraggeberseitig gewünschte Anordnung der Boxen betraf. Da sollte schon mal die Box X mit ihrem Inhalt oberhalb des Seitenhauptinhaltes, aber zwischen den Top-Produkten und den Neuesten Produkten stehen und eine weitere Box unterhalb des Contents, wo dann auch weitere der o.g. Produktslider erscheinen sollten. Also eine beliebige, vermischte und ober- und unterhalb des Seitenhauptinhaltes angegeordnete Anzeige. Das ist mit EVO von hausaus nicht möglich. Nachfolgend beschreibe ich eine Scriptlösung, mit der man dieses Manko beheben kann.
Weiterlesen: Startseiten-Produkt-Slider und Boxen in JTL in beliebiger Reihenfolge und Postion
Vereinheitlichen der Kollation in Datenbanken
- Details
Problembeschreibung
Wer komplexe CMS nutzt, wie Joomla oder Wordpress, wird, wenn er sich mal seine Datenbanken genauer anschaut, mitunter festellen, dass durchaus nicht alle Tabelle die gleiche Kollation verwenden. Selten stellt das ein Problem da, aber unter bestimmten Bedingungen z.B. "gejointe" SQL-Abfragen kann das dann doch mal zu einer Fehlermeldung führen und eine Seite lahmlegen. Solche Fehlermeldungen könnten folgenden Wortlaut haben:
1267 Illegal mix of collations (utf8mb4_general_ci,COERCIBLE) and (utf8_general_ci,IMPLICIT) for operation 'like'
Was die Kollation bedeutet und welche man wan verwendet, will ich hier nicht ausführen, weil es dazu reichlich Erklärseiten im Internet gibt. Nur kurz: Die Kollation spielt eine Rolle bei der Sortierung von Treffern. Speziell für Sprachen mit Sonderzeichen wird damit eine Regelwerk und eine zugehöriger interner Allgorithmus festgelegt, über den Treffer sortiert werden - z.B. wie ein "ä" zu berücksichtigen ist. Üblicherweise sollte man für CMS die COLLATION utf8_unicode_ci verwenden.
Hier mal ein Link, wo es schön erklärt wird: https://www.pixelfriese.de/unterschied-zwischen-utf8_general_ci-und-utf8_unicode_ci/
Sollten Sie z.B. oben aufgeführte Fehlermeldung erhalten, dann müssen Sie natürlich handeln und z.B. über phpMyAdmin die Kollation von Tabellen ändern und vereinheitlichen. Betrifft es nur wenige Tabellen, ist das mit einzelnen SQL-Befehlen in der Form ALTER TABLE `praefix_action_logs` COLLATE utf8_unicode_ci; schnell erledigt. Sind aber viele Erweiterungen in Ihrem CMS installiert worden oder das Projekt ggf. schon mehrfach migriert worden, werden Sie evtl. sehr viele unterschiedliche Kollationen finden. Das wird dann mühseelig, diese einzeln Tabelle für Tabelle zu ändern.
In GRAV Kontaktformular-Erfolgsseite einen Sprunganker mit smoothScroll nutzen
- Details
Problembeschreibung
Wer im CMS GRAV (Gravity) Formulare nutzt, wird feststellen, dass diese die Feedbackmeldung i.d.R. an gleicher Stelle ausgeben, wo vorher das auszufüllende Formular war. Hierbei passiert aber ein Seiten-Reload. Infolge dessen beginnt die Seitenanzeige ganz oben. Wenn aber das Formular, bzw. dessen Success-Meldung sehr weit unten ist, dann sieht der Seitennutzer diese Meldung erst wenn er auf Verdacht mal nach unten scrollt. Natürlich machen das viele Nutzer nicht, sondern fragen sich etwas hilflos, ob das Formular korrekt gesendet hat. Es wäre also notwendig, dass nach dem Absenden und dem Seitenreload gleich automatisch zur Erfolgsmeldung gesprungen wird.
Umsetzung im Datail
Für oben beschriebene Aktion ist das Script user/plugins/gantry5/engines/nucleus/templates/formdata.html.twig verantwortlich. Damit wir dieses GRAV-Core-Script nicht modifizieren müssen, erstellen wir davon eine Override-Kopie im Pfad: user/themes/g5_helium/templates/.
Weiterlesen: In GRAV Kontaktformular-Erfolgsseite einen Sprunganker mit smoothScroll nutzen
- yaml Formular Framework - Default mit Zeilenumbruch (newline, break)
- Joomla Manifest-XML-Scripte für Module, Komponenten und Plugins - Know-How-Sammlung
- BreezingForms Meldungen in den sichtbaren Bereich bringen
- Wenn der ZIP-Upload im Joomla-MediaManager scheitert
- Virtuemart Anpassung Rechnungsinhalte und Layout
- Joomla-Komponenten erzeugen einen Konflikt zwischen MooTools und jQuery (modal.js / SqueezeBox)
- Für das Joomla Fancy TagCloud-Module eigene Themes erstellen
- Das Formular "Fragen zum Produkt" in Virtuemart um Felder erweitern
- Maßnahmen zur Beschleunigung von Joomla-Projekten
- PHP get_class_methods liefert kein Ergebnis obwohl Methoden in der Klasse vorhanden sind
- Verhindern dass ENTER ein Formular absendet - statt dessen Verhalten wie Tabulator-Taste
- Vorgehensweise beim Umbenennen von Bildern in Virtuemart
- Welche Bedeutung hat der Unterstrich bei SASS-Scripten
- Virtuemart: Sprachabhängige Verfügbarkeitsanzeige, fallabhängiges Stylen und weitere Verfügbarkeitsanzeigen
- Fonts in Gantry 5 einbinden, die nicht vom google-Server geladen werden
- Eigene Gantry 5 Style-Formulare anlegen
- Verwendung von CLi in GRAV-Projekten
- Gantry 5 Layouts anpassen
- Erstellung eines Kontaktformulars im CMS GRAV (gravity)
- Update von MySQL z.B. unter XAMPP und auftretende Probleme und Fehlerquellen
Seite 1 von 14