Fragen zum Schreiben von Joomla4-Templates?

JoomlaWunder · 18. Oktober 2020

Hallo,

kennt ihr Seiten, die sich mit dem Schreiben von Joomla4-Templates beschäftigen?

Meine Frage soll sich aber nicht auf grundlegende Dinge wie die templateDetails.xml, Modulpositionen, Felder/Parameter usw. beziehen.

Konkret geht es mir darum, wie man in der Template-Stil-Ansicht eines Templates zusätzlich zum Tab "Advanced" (Erweitert) weitere Tabs ergänzen kann, um dem Anwender bestimmte Optionen zur Verfügung zu stellen (z.B. Farbvarianten u.s.w). Das Ergänzen der templateDetails.xml ist schon klar.

Bei J3 wird ja oft ein php- oder auch inc-Verzeichnis innerhalb des Template-Verzeichnisses angelegt, in welchem sich die Dateien für die verschiedenen Tabs befinden.

Im atum wird da wohl die /Service/html/atum.php verwendet. Cassiopeia hat keine zusätzlichen Tabs. Welche Datei baut da eigentlich den Tab auf?

Gibt es in J4 eine bestimmte Vorgehensweise, die sich anbietet, oder kann man das händeln wie man möchte?

christine2 · 18. Oktober 2020

Hallo,

Zitat von JoomlaWunder

Konkret geht es mir darum, wie man in der Template-Stil-Ansicht eines Templates zusätzlich zum Tab "Advanced" (Erweitert) weitere Tabs ergänzen kann, um dem Anwender bestimmte Optionen zur Verfügung zu stellen (z.B. Farbvarianten u.s.w). Das Ergänzen der templateDetails.xml ist schon klar.

ähnliche Frage hier: https://issues.joomla.org/tracker/joomla-cms/31091

und da gibt's wohl noch mehr davon

Wegen Cassiopeia: So viel ich weiß, ist firstlady da in einer Arbeitsgruppe.

Liebe Grüße

Christine

ergänzend: https://issues.joomla.org/tracker/joomla-cms/30376

JoomlaWunder · 18. Oktober 2020

Das ganze SCSS-Thema wollte ich erst einmal außen vor lassen und mich frühstens mit Erscheinen von J4 Stable damit beschäftigen. Das ist einfach zu komplex.

Für den Anfang sollte nur die Möglichkeit gegeben sein, den ein oder anderen Werte im Template-Stil ändern zu können.

Deshalb suche ich nach dem optimalen Vorgehen, ein Template diesbezüglich zu erweitern.

Re:Later · 18. Oktober 2020

Grundlegend hat sich da nichts geändert.

- Die Tabs erzeugst du in der templateDetails.xml indem du fieldsets innerhalb

Code

<fields name="params">

anlegst und unterschiedliche name="" vergibst. So wie schon immer.

-

Zitat von JoomlaWunder

/Service/html/atum.php

ist eine andere Geschichte. Das sind JHtml-Helper-Methoden (jetzt HTMLHelper-Methoden), die dann später in der index.php verwendet werden können, um die im Backend gespeicherten Farbwerte in irgendeiner veränderten Form als CSS-Block in den <HEAD> einzusetzen. Also für die Ausgabe.

Zuerst werden diese Helper-Methoden in der Datei /HTML/Atum.php mit Klasse JHtmlAtum verfügbar gemacht. Pfadangaben kann man sich in diesem Fall sparen, da Joomla sie in dem o.g. Service-Ordner sucht.

Code

HTMLHelper::getServiceRegistry()->register('atum', 'JHtmlAtum');

Dann die $params des Templates, die der User im Backend gespeichert hat, der Methode rootcolors() übergeben.

Code

HTMLHelper::_('atum.rootcolors', $this->params);

Die ist nur dafür da, statt "normales" CSS einzusetzen, die in "modernes" CSS umzuwandeln, also CSS-Variablen (z.B. --atum-bg-light:) zu verwenden und umzurechnen, falls nötig.

Am Ende der Funktion findest dann die 2 Zeilen, mit dem bescheuerten WebAssetManager, die nix anderes machen, als den CSS-Block inline ins Template einzusetzen. Das ist das Analogon zu $doc->addStyleDeclaration bzw. $this->addStyleDeclaration .

Ergibt dann z.B. im Seitenquelltext

Code

<style nonce="NTgwZ...">:root {--atum-bg-dark: #4e1353;--atum-contrast: #42249e;--atum-bg-dark-0: #e8e8e8;--atum-bg-dark-5: #d9d9d9;--atum-bg-dark-10: #c9c9c9;--atum-bg-dark-20: #ababab;--atum-bg-dark-30: #908093;--atum-bg-dark-40: #7a5181;--atum-bg-dark-50: #6a2871;--atum-bg-dark-70: #390d3a;--atum-bg-dark-80: #210820;--atum-bg-dark-90: #0d030c;--atum-bg-light: #f0f4fb;--toolbar-bg: #ffffff;--atum-text-dark: #495057;--atum-text-light: #ffffff;--atum-link-color: #2a69b8;--atum-link-hover-color: #173964;--atum-sidebar-link-color: #132f53;--atum-special-color: #001b4c;}</style>

und ist ein Override der CSS-Variablen-Werte in der template.css.

- Kurz: Tabs baust genauso auf, wie früher.

- Stinknormale Joomla-Form-Felder.

- Die HMTLHelper-Methoden sind rein optional, wenn du meinst, bei der Ausgabe von irgendwas lieber eine (oder mehrere) externe Dateien verwenden zu wollen/müssen. Hier halt für Farbberechnungen.

Und hat's früher auch schon gegeben, aber der Pfad musste noch extra angegeben werden.

Allerdings nicht so üblich in Templates, die meist mit require und include irgendwas eingebunden haben oder mit JLoader. Oder diese Helper in einem Framework-Plugin haben oder... All das geht aber auch in Joomla 4 noch.

astrid · 18. Oktober 2020

Zitat von JoomlaWunder

Konkret geht es mir darum, wie man in der Template-Stil-Ansicht eines Templates zusätzlich zum Tab "Advanced" (Erweitert) weitere Tabs ergänzen kann, um dem Anwender bestimmte Optionen zur Verfügung zu stellen (z.B. Farbvarianten u.s.w). Das Ergänzen der templateDetails.xml ist schon klar.

ich hoffe ich verstehe dich richtig.

Nimm die templateDetails.xml von Cassiopeia.

XML

<?xml version="1.0" encoding="utf-8"?>

<extension type="template" client="site">

<name>cassiopeia</name>

<version>1.0</version>

<creationDate>February 2017</creationDate>

<author>Joomla! Project</author>

<authorEmail>admin@joomla.org</authorEmail>

<copyright>Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.</copyright>

<description>TPL_CASSIOPEIA_XML_DESCRIPTION</description>

<files>

<filename>component.php</filename>

<filename>error.php</filename>

<filename>favicon.ico</filename>

<filename>index.php</filename>

<filename>joomla.asset.json</filename>

<filename>offline.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_preview.png</filename>

<filename>template_thumbnail.png</filename>

<folder>css</folder>

<folder>html</folder>

<folder>images</folder>

<folder>js</folder>

<folder>scss</folder>

</files>

<positions>

..

</positions>

<languages folder="language">

<language tag="en-GB">en-GB/tpl_cassiopeia.ini</language>

<language tag="en-GB">en-GB/tpl_cassiopeia.sys.ini</language>

</languages>

<config>

<fields name="params">

<fieldset name="advanced">

<field

name="logoFile"

type="media"

default=""

label="TPL_CASSIOPEIA_LOGO_LABEL"

/>


<field

name="siteTitle"

type="text"

default=""

label="JGLOBAL_TITLE"

filter="string"

/>


<field

name="siteDescription"

type="text"

default=""

label="JGLOBAL_DESCRIPTION"

filter="string"

/>


<field

name="fluidContainer"

type="radio"

layout="joomla.form.field.radio.switcher"

default="0"

label="TPL_CASSIOPEIA_FLUID_LABEL"

>

<option value="0">TPL_CASSIOPEIA_STATIC</option>

<option value="1">TPL_CASSIOPEIA_FLUID</option>

</field>


<field

name="stickyHeader"

type="radio"

label="TPL_CASSIOPEIA_STICKY_LABEL"

layout="joomla.form.field.radio.switcher"

default="0"

filter="integer"

>

<option value="0">JNO</option>

<option value="1">JYES</option>

</field>


<field

name="backTop"

type="radio"

label="TPL_CASSIOPEIA_BACKTOTOP_LABEL"

layout="joomla.form.field.radio.switcher"

default="0"

filter="integer"

>

<option value="0">JNO</option>

<option value="1">JYES</option>

</field>

</fieldset>

</fields>

</config>

</extension>

Alles anzeigen

Wenn du hier ein Fieldset einfügst, dann hast du das zusätzliche Tab.

Ich habe den folgenden Code am Ende ergänzt.

Code

...
<fieldset name="myfieldset">

<field

name="mymediafield"

type="media"

default=""

label="TPL_CASSIOPEIA_LOGO_LABEL"

/>

</fieldset>
...

Alles anzeigen

Also so

XML

<?xml version="1.0" encoding="utf-8"?>

<extension type="template" client="site">

<name>cassiopeia</name>

<version>1.0</version>

<creationDate>February 2017</creationDate>

<author>Joomla! Project</author>

<authorEmail>admin@joomla.org</authorEmail>

<copyright>Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.</copyright>

<description>TPL_CASSIOPEIA_XML_DESCRIPTION</description>

<files>

<filename>component.php</filename>

<filename>error.php</filename>

<filename>favicon.ico</filename>

<filename>index.php</filename>

<filename>joomla.asset.json</filename>

<filename>offline.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_preview.png</filename>

<filename>template_thumbnail.png</filename>

<folder>css</folder>

<folder>html</folder>

<folder>images</folder>

<folder>js</folder>

<folder>scss</folder>

</files>

<positions>

...

</positions>

<languages folder="language">

<language tag="en-GB">en-GB/tpl_cassiopeia.ini</language>

<language tag="en-GB">en-GB/tpl_cassiopeia.sys.ini</language>

</languages>

<config>

<fields name="params">

<fieldset name="advanced">

<field

name="logoFile"

type="media"

default=""

label="TPL_CASSIOPEIA_LOGO_LABEL"

/>


<field

name="siteTitle"

type="text"

default=""

label="JGLOBAL_TITLE"

filter="string"

/>


<field

name="siteDescription"

type="text"

default=""

label="JGLOBAL_DESCRIPTION"

filter="string"

/>


<field

name="fluidContainer"

type="radio"

layout="joomla.form.field.radio.switcher"

default="0"

label="TPL_CASSIOPEIA_FLUID_LABEL"

>

<option value="0">TPL_CASSIOPEIA_STATIC</option>

<option value="1">TPL_CASSIOPEIA_FLUID</option>

</field>


<field

name="stickyHeader"

type="radio"

label="TPL_CASSIOPEIA_STICKY_LABEL"

layout="joomla.form.field.radio.switcher"

default="0"

filter="integer"

>

<option value="0">JNO</option>

<option value="1">JYES</option>

</field>


<field

name="backTop"

type="radio"

label="TPL_CASSIOPEIA_BACKTOTOP_LABEL"

layout="joomla.form.field.radio.switcher"

default="0"

filter="integer"

>

<option value="0">JNO</option>

<option value="1">JYES</option>

</field>

</fieldset>

<fieldset name="myfieldset">

<field

name="mymediafield"

type="media"

default=""

label="TPL_CASSIOPEIA_LOGO_LABEL"

/>

</fieldset>

</fields>

</config>

</extension>

Alles anzeigen

Das sieht dann in etwas so aus:

Sprachdateien zur Übersetzung erstellst du wie gehabt. Und wie du auf die neuen Parameter zugreifst, kannst du an den vorhanden abgucken.

JoomlaWunder · 19. Oktober 2020

Zitat von Re:Later

.... Allerdings nicht so üblich in Templates, die meist mit require und include irgendwas eingebunden haben oder mit JLoader. Oder diese Helper in einem Framework-Plugin haben oder... All das geht aber auch in Joomla 4 noch.

Ok, Danke! Ich hatte mich an Templates orientiert, die mit require und include arbeiten. Aber jetzt ist mir der Hintergrund dieser atum.php klar geworden.

Zitat von astrid

.... Wenn du hier ein Fieldset einfügst, dann hast du das zusätzliche Tab.

Meine Frage geht eigentlich darüber hinaus (was allerdings aus meiner Fragestellung gar nicht hervor ging, wie ich nun bemerkt habe

Angenommen ich möchte innerhalb eines Tabs ein Menü erstellen, oder bestimmte grafische Elemente hinzufügen. Wie realisiere ich das am sinvollsten? Im Prinzip ein kleines Framework. Da geht es mir nur um die Grundstruktur und keine Details.

Re:Later · 19. Oktober 2020

Ein Framework-Plugin bzw. -Library brauchst nicht unbedingt. Die Templates von joomla51 arbeiten mit eigenen Formularfeldern in der templateDetails, die sich meist im Ordner /elements/ befinden. Laden halt u.a. eigenes JS und CSS dazu. Das JS um jeweils die linken Menüs im Tabulator zu bauen bzw. bedienbar zu machen. Als Beispiel habe ich gerade J51-Robyn vor mir.

So was wie das Astroid-Framework (Library und Plugin), das es auch schon für Joomla 4 gibt, geht seinen eigenen Weg. Hat im Template nur ein einziges Feld, das per Klick dann eine hoch komplexe Oberfläche, also "abgekoppelt" von Joomla-Standards lädt. Inklusive einem Layout-Builder.

Generell ist das aber hoch komplex, auch, bis man dann die Möglichkeiten raus hat, die innerhalb der Frontend-Ausgabe alle möglich sind, weil die mitgebrachten Demo-Plugins dazu nur wenig drinnen haben. Ich hatte das "Glück" mich da mit einem Pro-Template einarbeiten zu können, wo die index.php weitaus mehr zeigt.

Bin nicht sicher, ob hier relevant. Irgendwo habe ich aufgeschnappt, dass man in Joomla auch mit "nested" <fieldset> arbeiten kann, die man dann per CSS positionieren kann.

Mir alles zu aufwändig zu pflegen, um Nutzern so einen Luxus zu bieten

JoomlaWunder · 19. Oktober 2020

Das Astroid habe ich mir gestern mal angeschaut und ein paar Videos dazu. Ist wirklich ein "Mordsding".

Was simples Schlichtes ist mir da ehrlich gesagt lieber, schon allein aus Gründen des Aufwands bei der Pflege. Aber ein wenig mehr als das Cassiopeia sollte es schon können. Aber möglicherweise wird C. noch um die ein oder andere Option ergänzt.

Da muss ich mich jetzt mal "reinarbeiten".

Re:Later · 19. Oktober 2020

Das Astroid verwende ich derzeit für 1 übereiligen Kunden, der schon jetzt was mit Joomla 4 haben will. Der Layout-Builder ist schon OK für schnelle Sachen. Es hat aber für Coder und Puristen auch "mörderisch" nervigen Kram drinnen ... nur nebenbei.