Inhalte verwalten mit ContentBlocks

Christian Seel

  • Webdeveloper & Designer
  • MODX Professional & Ambassador

Timeline

  • Was ist ContentBlocks?
  • Beispiel für Basic-Layouts & Settings
  • Extended Input Types
    • Button
    • Team-Member
  • Tabs in ContentBlocks
  • Automatisch generierte Navigation

Typische Website

Layouts & 
Input Fields

  • ist eine Zeile mit einer vordefinierten Anzahl von Spalten

Input Field

  • um den eigentlichen Inhalt hinzuzufügen mittels verschiedener Eingabetypen:
    Headline, Rich-Text (Redactor / TinyMCE), Textfield, Bild, Galerie, Video, Embedded Content (z.B. YouTube Video oder Tweet), Listen und mehr…

Layout

Überschrift

Lorem ipsum dolor sit amet, …

2. Überschrift

Lorem ipsum dolor sit amet, …

Lorem ipsum dolor sit amet, …

Lorem ipsum dolor sit amet, …

Lorem ipsum dolor sit amet, …

ContentBlocks?

  • bringt zusätzliche (optional auch beschränkte) Freiheit in der Inhaltsgestaltung für den Redakeur/Kunden
  • starkes Tool um einfach individuelle Layouts pro Ressource zu gestalten
  • verringert die Nutzung von TVs in den meisten Projekten was zu Performance-Verbesserungen führt

Layouts & Settings

Beispiel

<div class="row">
    <div class="small-12 large-4 columns">...</div>
    <div class="small-12 large-4 columns">...</div>
    <div class="small-12 large-4 columns">...</div>
</div>

Foundation Grid:

<div class="row" [[+rowAttributes]]>
    <div class="[[+col1_class]] columns">[[+col1]]</div>
    <div class="[[+col1_class]] columns">[[+col2]]</div>
    <div class="[[+col1_class]] columns">[[+col3]]</div>
</div>

Layout "3 Spalten" in ContentBlocks:

Verschachtelte Layouts

  • als Feld Eingabetyp vorhanden
  • Layouts können unendlich tief verschachtelt werden

Advanced
Input Types

...vorinstallierte Eingabytypen mit Settings erweitern

  • im Modal angezeigt werden
  • im Inhaltsbereich als Setting angezeigt werden
  • Im Inhaltsbereich als normales Eingabefeld angezeigt werden

Field settings können...

Demo

Tabs & Accordions

ContentBlocks Repeater

large screens

small screens

Repeater

"MIGX innerhalb von ContentBlocks"

Neuer Eingabetyp in ContentBlocks 1.2.0

<dl class="tabs" data-tab>
  <dd class="active"><a href="#panel1">Tab 1</a></dd>
  <dd><a href="#panel2">Tab 2</a></dd>
  <dd><a href="#panel3">Tab 3</a></dd>
</dl>

<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>This is the first panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel2">
    <p>This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel3">
    <p>This is the third panel of the basic tab example.</p>
  </div>
</div>

basic markup for tabs with Foundation

<div class="tabs-content">
  <div class="content active" id="panel1" data-title="Tab 1">
    <p>This is the first panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel2" data-title="Tab 2">
    <p>This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel3" data-title="Tab 3">
    <p>This is the third panel of the basic tab example.</p>
  </div>
</div>

Mit einem Output-Filter können die Title-Attribute ausgelesen werden und die Navigation generiert werden.

Demo

ContentBlocks 1.2.0+ (!)

<div class="tab-accordion-cmp">
    <ul class="tabs show-for-large-up" data-tab>
        [[+rows:generateTabs]]
    </ul>
    <dl class="tabs-content accordion" data-accordion>
        <dd class="accordion-navigation">
            [[+rows]]
        </dd>
    </dl>
</div>

Repeater-Container

<a href="#tab-[[+unique_idx]]-[[+idx]]"
    class="accordion-tab hide-for-large-up">
        [[+title]]
</a>
<section id="tab-[[+unique_idx]]-[[+idx]]"
    data-tabcontent data-title="[[+title]]"
    role="tabpanel" aria-hidden="false"
    class="content [[+idx:is=`1`:then=`active`:else=``]]">
    <div class="content-box section-box">
    	[[+content]]
    </div>
</section>

Repeater-Item

The generateTabs snippet is available at:

https://gist.github.com/christianseel/80a9249920518954fda0

Automatische Navigation
für Onepagers

mit ContentBlocks

#block1

#block2

#block3

Get CB data

Array
(
  [0] => Array
    (
      [layout] => 3
      [content] => Array
        (
          [col1] => Array
            (
              [0] => Array
                (
                  [value] => Meet the Team
                  [level] => h1
                  [field] => 1
                  [settings] => Array
                    (
                    )

                )

            )

        )

      [settings] => Array
        (
          [identifier] => team
        )

      [parent] => 0
    )

  [1] => Array

$resource->getProperty(
    'content', 'contentblocks'
);

 

...returns the JSON data that is stored by ContentBlocks

Mit einem Plugin…

  • "OnDocFormSave" ContentBlocks Daten auslesen
  • alle Layouts durchgehen und prüfen ob eine ID angegeben wurde
  • für jede ID
    • prüfen ob bereits ein weblink existiert
    • falls nicht: neuen Weblink anlegen

Demo

Fragen?

@christianseel

chsmedien.com

slides.com/christianseel

chsm.link/Xehd

Inhalte verwalten mit ContentBlocks

By SEDA.digital GmbH & Co. KG

Inhalte verwalten mit ContentBlocks

MODX Meetup Munich Talk from November 20th, 2014

  • 588
Loading comments...

More from SEDA.digital GmbH & Co. KG