30. Stammtisch
Video vom LiveStream
Leider hatten wir wieder massive technische Probleme mit OBS Studio. Die Audio-Qualität ist leider sehr schlecht, da die Audiospuren doppelt und zeitversetzt eingespielt wurden. Für den nächsten Stream haben wir die Settings nochmals komplett neu gemacht. Stay tuned.
Themen:
0:07:00 Rock Solid Custom Elements
1:44:35 Contao Maker Bundle
Das war der 30. Contao Austria Stammtisch
Beim 30. Contao Austria Stammtisch hatten wir das große Vergnügen, dass wir uns im Büro von Inspired Minds zum Stammtisch treffen durften.
Auch diesmal hatten wir die Vorträge von Fritz und Johannes im Live-Stream wieder öffentlich zugänglich gemacht, sodass auch die mitmachen konntne, die es nicht zum Stammtisch geschafft hatten. Technisch waren wir diesesmal leider wieder nicht ganz fehlerfrei mit unserer Streaming-Software OBS Studio. Zwar konnte der Stream inkl. darstellung des Präsentations-Screens im Video online geschaltet werden, jedoch ist uns bei der Vorbereitung ein Fehler unterlaufen und wir hatten in den Coding-Scenes doppelte und zeitversetzte Audiospuren. Wir bitten das zu entschuldigen. Für den 31. Stammtisch haben wir die kompletten Streaming-Settings neu gemacht und sollte dann endlich ohne Issues klappen.
Als Themen für den Stammtisch waren im Wesentlichen: Rocksolid Custom Elements und Contao Maker Bundle.
Links von Programmen und nützlichen Informationen aus diesem Stammtisch kommen unten.
Contao Maker Bundle:
Schnelles Kickstarten von Contao Bundles. Schnellerer und einfacherer Einstieg in die Contao Programmierung mit dem Kickstarter Bundle von Fritz.
LINK: https://github.com/inspiredminds/contao-maker-bundle
Rocksolid Custom Elements:
Schnelles erstellen von eigenen Content Elementen und Modulen mit lediglich 2 Dateien, einer html5 Template Datei und einer php Config Datei.
Verwendete Tools/Helper:
Rocksolid Custom Elements DOKU:
LINK: https://rocksolidthemes.com/de/contao/plugins/custom-content-elements/dokumentation
Tailwind CSS
LINK: https://tailwindcss.com/docs/what-is-tailwind/
LINK Tailwind Card: https://tailwindcss.com/docs/examples/cards
Beim Stammtisch erstellte Dateien
<section class="<?php echo $this->class ?> block" <?php echo $this->cssID ?>> <div class="max-w-sm rounded overflow-hidden shadow-lg mb-16<?= $this->myCardColor ? " " . $this->myCardColor : "" ?>"> <?php if ($this->myCardImage) : ?> <img src="" alt="" class="w-full"> <?php else : ?> <img src="" alt="" class="w-full"> <?php endif; ?> <div class="px-6 py-4"> <div class="font-bold text-xl mb-2"><?= $this->myEmail ?></div> <div class="text-grey-darker text-base">textte <?= $this->description ? $this->description : "kein Beschreibung vorhanden" ?> </div> </div> <div class="px-6 py-4"> <?php foreach ($this->cardHashes as $hash) : ?> <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#<?= $hash->text ?></span> <?php endforeach; ?> <?php if ($this->cardJumpTo) : ?> <a href="" title="" class="no-underline bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">Details</a> <?php endif; ?> </div></section><!-- AUSGSBE DER DEBUG DATEN --><?php $this->dumpTemplateVars() ?><?php return array( 'label' => array('Meine Tailwind Card', 'Meine Tailwind Card'), 'types' => array('content'), 'contentCategory' => 'texts', 'standardFields' => array('headline', 'cssID'), 'wrapper' => array( 'type' => 'none', ), 'fields' => array( 'group_1' => array( 'label' => array('Card Styling', 'Hier können Farbgebungen und andere Parameter jsdklfajsdlkjf'), 'inputType' => 'group', ), 'myCardColor' => array( 'label' => array("Hintergrundfarbe?", "wähle eine Hintergrundfarbe"), 'inputType' => 'select', // 'options' => ['bg-green', 'bg-blue', 'bg-white', 'bg-transparent'], 'options_callback' => function () { return ['bg-green', 'bg-blue', 'bg-white', 'bg-transparent']; }, //'foreignKey' => 'tl_user.name', //'options_callback' => array('CLASS', 'METHOD'), 'eval' => array('includeBlankOption' => true, 'tl_class' => 'clr long'), ), 'group_2' => array( 'label' => array('Card Stammdaten', ''), 'inputType' => 'group', ), 'cardJumpTo' => array( 'label' => array("Weiterleitung Detail", "Bitte ein Seite wählen"), 'inputType' => 'pageTree', 'eval' => array('fieldType'=>'radio', 'tl_class'=>'clr'), ), 'myEmail' => array( 'label' => array("Meine Email", "Lieber Redakteur, bitte Deine Email angeben"), 'inputType' => 'text', 'eval' => array('mandatory' => true, 'rgxp' => 'email', 'maxlength' => 255, 'decodeEntities' => true, 'tl_class' => 'clr w50'), ), 'name' => array( 'label' => array("Vorname & Nachname", "Bitte Vorname und Nachname angeben "), 'inputType' => 'text', 'eval' => array('maxlength' => 255, 'tl_class' => 'w50'), ), 'description' => array( 'label' => array("Beschreibung", "Bitte eine Beschreibung eingeben!"), 'inputType' => 'textarea', 'eval' => array('rte' => 'tinyMCE'), ), 'myCardImage' => array( 'label' => array("Card-Bild", "Bitte Datei auswählen"), 'inputType' => 'fileTree', 'eval' => array( 'fieldType' => 'radio', 'files' => true, 'filesOnly' => true, 'tl_class' => 'clr', 'extensions' => $GLOBALS['TL_CONFIG']['validImageTypes'] ), ), 'cardHashes' => array( 'label' => array('Card Hashes', ''), 'elementLabel' => '%s. Hash Eintrag', 'inputType' => 'list', 'minItems' => 2, 'maxItems' => 5, 'fields' => array( 'text' => array( 'label' => array('Text', ''), 'eval' => array(), 'inputType' => 'text', ), ), ) ),);Nützliche Hilfsmittel
Sammlung von Contao Custom Elements Templates für das Plugin rocksolid-custom-elements
LINK: https://github.com/fenepedia/contao-custom-elements
Contao DCA Referenz
LINK: https://docs.contao.org/books/api/dca/reference.html
Contao Plugin für VS Code
Schnelles erstellen von DCA-Feldern und Callbacks. Das Plugin hat sogenannte Code-Snippets.
Beschreibung: https://www.contao-austria.at/blogreader/contao-code-snippets-fuer-vs-code.html
LINK: https://marketplace.visualstudio.com/items?itemName=JohannesPichler.contao-code-snippets