Building Sites with ContentBlocks

Christian Seel

  • Webdeveloper & Designer
  • MODX Professional & Ambassador

What to expect?

  • Layouts & Settings (Foundation by Zurb)
  • Extended Input Types
    • Button
    • Team-Member
  • Tabs in ContentBlocks
  • Automatic Navigation based on Content

A typical website today

Layouts & 
Input Fields

  • is a row and it's predefined number of columns

Input Field

  • lets you add the content, while you can choose from different input types like:
    Headline, Rich-Text (Redactor / TinyMCE), Textfield, Image, Gallery, Video, Embedded Content (e.g. YouTube Video or a Tweet), Lists and more…

Layout

Headline

Lorem ipsum dolor sit amet, …

Second Headline

Lorem ipsum dolor sit amet, …

Lorem ipsum dolor sit amet, …

Lorem ipsum dolor sit amet, …

Lorem ipsum dolor sit amet, …

What is ContentBlocks?

  • gives additional (optional limited) freedom to the editor/client
  • a powerful tool to easily create unique page layouts
  • it let's you use less templates and TVs in most projects which can speed up your site

Layouts & Settings

for Foundation by Zurb

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

Tempalte in ContentBlocks:

Advanced
Input Types

...enhance pre-installed input types with field settings

  • shown in the modal window
  • exposed on canvas as a setting
  • exposed on canvas as a regular field

Field settings can be...

Demo

Tabs & Accordions

with Foundation by Zurb

large screens

small screens

Nested Layouts

(and layout settings)

The solution:

<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">
    <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>

(Nested) layout field

layout "Tab Element"

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

"Nested layout" field

layout "Tab"

Now you can use an output filter to read all title attributes and generate the navigation elements.

Demo

ContentBlocks 1.1.2+ only!

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

"Tab Component"

Field with input type "Layout"

<a href="#tab-[[+layout_idx]]-[[+idx]]"
    class="accordion-tab hide-for-large-up">
        [[+title]]
</a>
<section id="tab-[[+layout_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">
    	[[+col1]]
    </div>
</section>

"Tab Element"

Layout with setting "title"

The generateTabs snippet is available at:

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

Automatic Navigation
for Onepagers

with 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

Use a plugin to

  • "OnDocFormSave" get the data from ContentBlocks
  • loop over all layouts and check if an identifier is set
  • for each identifier
    • check if there's an existing weblink & update it
    • if not: create one

Demo

Questions?

@christianseel

chsmedien.com

slides.com/christianseel

chsm.link/Xehd

Building Sites with ContentBlocks

By SEDA.digital GmbH & Co. KG

Building Sites with ContentBlocks

MODX Weekend talk by christianseel

  • 1,728
Loading comments...

More from SEDA.digital GmbH & Co. KG