08 - Layouts - Utility - HTML-mailing

[[+main]]Template

The Call To Action layout is simply a wrapper to help you create a small CTA format in ContentBlocks. Created CTA's can be referenced across the entire website by the corresponding CTA ContentBlock, or by TV's.

P 08 - Layouts - Utility

What's on your mind?

Your name

Email address

<div id="[[+legend:fbStripAsAlias]]" class="ui [[+padding]] [[+segment_type:ne=`none`:then=`segment`:else=`fieldset`]]" [[!cbGetFieldContent:contains=`"[[+legend:fbStripAsAlias]]"`:then=`class="collapse"`? &field=`[[++formblocks.cb_field_select_option_collapse_id]]` &returnAsJSON=`1`]]>
    [[+legend:notempty=`<h3 class="ui header">[[+legend]]</h3>`]]
    [[+main]]
</div>Template

Only available in forms. With fieldsets, you can section your forms in different blocks, each with its own header.

reference	legend
title	Heading
fieldtype	textfield

A cbGetFieldContent

fbStripAsAlias

P 08 - Layouts - Utility

[[![[If? &subject=`[[+pagination]]` &operator=`EQ` &operand=`1` &then=`getPage@SemanticUI` &else=`getCache`]]?
    &element=`getResources`
    &cacheKey=`overviews`
    [[++custom_cache:eq=`0`:then=`&cacheExpires=`1``]]

    &parents=`[[+parent]]`
    &depth=`[[+depth]]`
    &limit=`[[+limit]]`
    &tpl=`overviewRowFluid`
    &includeTVs=`1`
    &processTVs=`1`
    &tvPrefix=``
    &showHidden=`[[+show_hidden:default=`0`]]`
    &sortby=`[[+sortby]]`
    &sortdir=`[[+sortby:is=`menuindex`:then=`ASC`:else=`DESC`]]`

    &row_tpl=`[[+row_tpl]]`
    &background_even=`[[+background_even]]`
    &background_odd=`[[+background_odd]]`
    &cols=`[[+cols]]`
    &cols_interchange=`[[+cols_interchange]]`

    &title_field=`[[+title_field]]`
    &link_text=`[[+link_text]]`
    &img_snap=`[[+img_snap]]`
    &img_inflate=`[[+img_inflate]]`
]]

[[[[+pagination:eq=`1`:then=`$paginationFluid`]]]]Template

Displays subpages in full-width layout sections.

reference	row_tpl
title	Template
fieldtype	select
default_value	overviewRowImageFluid
fieldoptions	Regular=overviewRowImageFluid Publication=overviewRowArticleFluid Team=overviewRowPersonFluid Portfolio=overviewRowProjectFluid

reference	background_even
title	Background even layouts
fieldtype	select
default_value	white
fieldoptions	White=white Light=secondary Dark=inverted dark Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Workflows=workflows inverted background Paarsig=paarsig inverted background Templates=templates inverted background Wereldkaart=wereldkaart background Cerios=cerios inverted background Vastgoed=vastgoed inverted background Ordina=ordina inverted background Source=source inverted background Nyenrode=nyenrode background Vondelparc=vondelparc inverted background Marketing automatisering=marketing-automatisering inverted background Transparent=transparent

reference	background_odd
title	Background odd layouts
fieldtype	select
default_value	secondary
fieldoptions	White=white Light=secondary Dark=inverted dark Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Workflows=workflows inverted background Paarsig=paarsig inverted background Templates=templates inverted background Wereldkaart=wereldkaart background Cerios=cerios inverted background Vastgoed=vastgoed inverted background Ordina=ordina inverted background Source=source inverted background Nyenrode=nyenrode background Vondelparc=vondelparc inverted background Marketing automatisering=marketing-automatisering inverted background Transparent=transparent

reference	cols
title	Content column width
fieldtype	select
default_value	eight
fieldoptions	1 column=one 2 columns=two 3 columns=three 4 columns=four 5 columns=five 6 columns=six 7 columns=seven 8 columns=eight 9 columns=nine 10 columns=ten 11 columns=eleven 12 columns=twelve 13 columns=thirteen 14 columns=fourteen 15 columns=fifteen

reference	cols_interchange
title	Interchange columns
fieldtype	select
default_value	1
fieldoptions	Yes=1 No=0

reference	parent
title	Parent ID
fieldtype	textfield
default_value	306

reference	depth
title	Depth
fieldtype	textfield

reference	limit
title	Limit
fieldtype	textfield
default_value	99

reference	pagination
title	Pagination
fieldtype	select
fieldoptions	Yes=1 No=0

reference	show_hidden
title	Show hidden
fieldtype	select
fieldoptions	Yes=1 No=0

reference	sortby
title	Sort by
fieldtype	select
default_value	menuindex
fieldoptions	Sort order in MODX=menuindex Publication date (latest first)=publishedon Creation date (latest first)=createdon

reference	title_field
title	Title field
fieldtype	select
default_value	menutitle
fieldoptions	Menutitle=menutitle Pagetitle=pagetitle Longtitle=longtitle

reference	link_text
title	Button text
fieldtype	textfield
default_value	Read more

reference	img_snap
title	Snap images to bottom
fieldtype	select
fieldoptions	Yes=1 No=0

reference	img_inflate
title	Inflate landscape images
fieldtype	select
fieldoptions	Yes=1 No=0

A cbLayoutBackgrounds A cbOverviewTemplatesFluid A cbSettingColumns A cbSettingColumnsExtra A cbSettingSortBy A paginationFluid M overviewRowFluid

getCache

getPage

getResources

P 08 - Layouts - Utility P Adaptation P Verstuur prachtig vormgegeven e-mails

Preview goes here

Code example goes here

<div class="ui vertical stripe pattern segment [[+background]]">
    <div class="ui [[+container_type]] [[+alignment]] container">
        [[[[If?
            &subject=`[[+pattern_template]]`
            &operator=`EQ`
            &operand=`patternLayoutBosonField`
            &then=`setPatternPlaceholders? &cbField=`[[+pattern_name]]` &prefix=`cf_[[+idx]]_[[+unique_idx]]``
        ]]]]
        [[[[If?
            &subject=`[[+pattern_template]]`
            &operator=`EQ`
            &operand=`patternLayoutBosonLayout`
            &then=`setPatternPlaceholders? &cbLayout=`[[+pattern_name]]` &prefix=`cl_[[+idx]]_[[+unique_idx]]``
        ]]]]

        [[!$cbLayoutPatternPreview:toPlaceholder=`preview_[[+idx]]_[[+unique_idx]]`?
            &preview=`[[+preview]]`
            &code=`[[+code]]`
            &sidebar_width=`[[+sidebar_width]]`
            &pattern_name=`[[+pattern_name]]`
            &pattern_template=`[[+pattern_template]]`
            &raw_tags=`[[+raw_tags]]`
            &rendered_tags=`[[+rendered_tags]]`
            &idx=`[[+idx]]`
            &unique_idx=`[[+unique_idx]]`
        ]]
        
        [[[[modifiedIf?
            &subject=`[[+pattern_template]]`
            &operator=`contains`
            &operand=`Electron`
            &then=`
                $toolbarPatternElectron?
                    &pattern_name=`[[+pattern_name]]`
                    &pattern_status=`[[+pattern_status]]`
                `
            &else=`
                $toolbarPattern?
                    &pattern_name=`[[+pattern_name]]`
                    &pattern_template=`[[+pattern_template]]`
                    &pattern_status=`[[+pattern_status]]`
                    &idx=`[[+idx]]`
                    &unique_idx=`[[+unique_idx]]`
                `
        ]]]]

        [[[[modifiedIf?
            &subject=`[[+pattern_template]]`
            &operator=`containsnot`
            &operand=`Electron`
            &then=`+preview_[[+idx]]_[[+unique_idx]]`
        ]]]]

        [[+info]]
    </div>
</div>Template

A customized section for displaying Romanesco patterns in the front-end library.

reference	background
title	Background
fieldtype	select
default_value	white
fieldoptions	White=white Light=secondary Dark=inverted dark Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Workflows=workflows inverted background Paarsig=paarsig inverted background Templates=templates inverted background Wereldkaart=wereldkaart background Cerios=cerios inverted background Vastgoed=vastgoed inverted background Ordina=ordina inverted background Source=source inverted background Nyenrode=nyenrode background Vondelparc=vondelparc inverted background Marketing automatisering=marketing-automatisering inverted background Transparent=transparent

reference	container_type
title	Width
fieldtype	select
fieldoptions	Standard width (container)= Full width (fluid)=fluid Optimal readability (text)=text

reference	sidebar_width
title	Preview width
fieldtype	select
default_value	five
fieldoptions	1 column=one 2 columns=two 3 columns=three 4 columns=four 5 columns=five 6 columns=six 7 columns=seven 8 columns=eight Full width=sixteen

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

reference	pattern_name
title	Pattern name
fieldtype	textfield

reference	pattern_template
title	Pattern template
fieldtype	select
default_value	patternLayoutAtom
fieldoptions	Electron (TV)=patternLayoutElectronTV Electron (System Setting)=patternLayoutElectronSystemSetting Electron (Configuration)=patternLayoutElectronConfiguration Atom=patternLayoutAtom Molecule=patternLayoutMolecule Organism=patternLayoutOrganism Template=patternLayoutTemplate Formula=patternLayoutFormula Computation=patternLayoutComputation Boson (Field)=patternLayoutBosonField Boson (Layout)=patternLayoutBosonLayout Boson (Template)=patternLayoutBosonTemplate

reference	pattern_status
title	Pattern status
fieldtype	select
default_value	green
fieldoptions	Solid (safe to use as instructed)=green Incoherent (works without issues, but might be refactored at some point)=yellow Conflicting (there are open issues related to this pattern)=orange Unstable (severely flawed, do not use)=red Experimental (just fiddling with some ideas here)=pink Untested (use at your own risk)=purple In review (under evaluation if this belongs in the library or not)=blue Deprecated (will be deleted in the next major release)=brown

A cbLayoutAlignment A cbLayoutBackgrounds A cbLayoutStatusPattern A cbLayoutTemplatesPattern A cbSettingColumns A cbSettingContainerType M cbLayoutPatternPreview O toolbarPattern O toolbarPatternElectron F setPatternPlaceholders

modifiedIf

P 07 - FormBlocks P 07 - Global P 02 - Buttons P 02 - Content P 02 - CTAs P 02 - Data P 02 - Hub P 02 - Information P 02 - Layouts P 02 - Navigation P 02 - Overviews P 02 - Overviews - Article P 02 - Overviews - Basic P 02 - Overviews - Icon P 02 - Overviews - Image P 02 - Overviews - Organization P 02 - Overviews - Person P 02 - Overviews - Project P 02 - Overviews - Review P 02 - Presentation P 02 - Publication P 02 - Search P 02 - Social P 02 - FormBlocks - Input fields P 02 - FormBlocks - Email template P 08 - Fields - Text P 08 - Fields - Graphics P 08 - Fields - Interaction P 08 - Fields - Layout P 08 - Fields - Overviews P 08 - Fields - Advanced P 08 - Fields - Form P 08 - Layouts - Basic P 08 - Layouts - Nested P 08 - Layouts - Utility P 06 - Basic P 06 - FormBlocks P 06 - Framework P 06 - Hub P 06 - JSON P 06 - Modifiers P 06 - Presentation P 06 - Resources P 06 - Template Variables P 04 - Basic P 04 - Confirmation P 04 - Global P 04 - Hub P 04 - People P 04 - Publication P 03 - FormBlocks P 03 - Global P 03 - Headers P 03 - Hub P 03 - Layouts P 03 - Overviews P 03 - Presentation P 03 - Search P 03 - Social P 03 - Toolbars P 01 - Buttons P 01 - Content P 01 - Data P 01 - FormBlocks P 01 - Global P 01 - Hub P 01 - Images P 01 - Information P 01 - Presentation P 01 - Search P 01 - Select P 01 - Taxonomy P 01 - Navigation - Primary P 01 - Navigation - Breadcrumbs P 01 - Navigation - Pagination P 01 - Navigation - Tabs P 01 - ContentBlocks - Fields P 01 - ContentBlocks - FormBlocks P 01 - ContentBlocks - Layouts P 01 - ContentBlocks - Overviews P 01 - ContentBlocks - Select P 01 - ContentBlocks - Settings P 00 - Connections P 00 - ContentBlocks P 00 - CTAs P 00 - FormBlocks P 00 - FormBlocks - Autoresponder P 00 - FormBlocks - System Settings P 00 - Global P 00 - Headers P 00 - Hub P 00 - Overviews P 00 - Search P 00 - Social P 00 - Information - Creative Work P 00 - Information - Intangible P 00 - Information - Organization P 00 - Information - Person

This is the playground area

Description and instructables can be found here

[[+main]]

<div class="ui vertical backyard segment secondary">
    <div class="ui container">
        <div class="ui accordion">
            <div class="title">
                <button class="ui small primary circular icon button" tabindex="[[+idx]]">
                    <i class="plus icon"></i>
                </button>
            </div>
            <div class="content">
                <div class="ui stackable relaxed equal width grid">
                    <section class="column">
                        <h2>[[+layout_title]]</h2>
                        [[+info]]
                    </section>
                    <aside class="[[+sidebar_width]] wide column">
                        <div class="ui nested middle aligned equal width toolbar grid">
                            <div class="nine wide column">
                                <a href="[[++site_url]]manager/?a=resource/update&id=[[*id]]" class="ui tiny basic button">
                                    Edit in MODX
                                </a>
                            </div>
                            <div class="right aligned column">
                                <i class="disabled heart outline link icon with popup"
                                   data-content="[[%romanesco.patterns.comment_tooltip]]"
                                   data-position="top center"></i>
                                <i class="disabled comment outline link icon with popup"
                                   data-content="[[%romanesco.patterns.comment_tooltip]]"
                                   data-position="top center"></i>
                            </div>
                        </div>
                        
                        <div class="ui divider"></div>
                        
                        <h5 class="ui disabled header">ContentBlocks used</h5>
    
                        <div class="ui list">
                            [[+meta]]
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </div>
</div>Template

A customized section for showcasing Romanesco patterns in the front-end library.

reference	sidebar_width
title	Metadata width
fieldtype	select
default_value	four
fieldoptions	1 column=one 2 columns=two 3 columns=three 4 columns=four 5 columns=five 6 columns=six 7 columns=seven 8 columns=eight

reference	layout_title
title	Layout title
fieldtype	textfield

A cbSettingColumns

P Information P Presentation P Navigation P Adaptation P 08 - Layouts - Utility

Call To Action

Contains the following patterns

Used on the following pages

Fieldset

Contains the following patterns

Used on the following pages

Overview (2 Columns)

Contains the following patterns

Used on the following pages

Pattern

overviewOuter

Contains the following patterns

Used on the following pages

Backyard

Contains the following patterns

Used on the following pages

Voorspellingen 2018

Contentmarketing

Digitale marketing

E-mailmarketing