Das war der 30. Contao Austria Stammtisch

Fachsimpelei, Planung und Spaß

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.

 

Rocksolid Custom Elements

Johannes Pichler - webpixels

Vortragender:
Johannes Pichler - https://webpixels.at

Contao Maker Bundle

Fritz Michael Gschwantner - inspiredminds

Vortragender:
Fritz Michael Gschwantner - https://www.inspiredminds.at/


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ächseten Stream haben wir die Settings nochmals komplett neu gemacht. Stay tuned.

Rocksolid Custom Elements, Contao Maker Bundle


Contao Maker Bundle:

Schnelles Kickstarten von Contao Bundles. Schnellerer und einfacherer Einstieg in die Contao Programmierung mit dem Kickstarter Bundle von Fritz.
LINKhttps://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: 
LINKhttps://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

 

Anbei erstellte Dateien:

TL_ROOT/templates/rsce_card.html5
<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) : ?>
      
    <?php else : ?>
      
    <?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() ?>
TL_ROOT/templates/rsce_card_config.php

rsce_card_config.php

<?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.

Beschreibunghttps://www.contao-austria.at/blogreader/contao-code-snippets-fuer-vs-code.html

LINK: https://marketplace.visualstudio.com/items?itemName=JohannesPichler.contao-code-snippets

Johannes

für das Organisatorenteam Ronald, Johannes und Klaus

Kommentare