Atoms

Text=description
Metadata=meta
Extra=extra
Other=orther

Standard=
Styled (600px wide)=styled
Styled (fluid width)=fluid styled
Inverted=fluid inverted

Left=left aligned
Center=center aligned
Right=right aligned
Justified=justified

Regular=
Positive=positive
Negative=negative
Informative=info
Warning=warning

None=regular
A little=padded
A lot=very padded

Default=
Centered=centered
Left floated=left floated
Right floated=right floated

No segment (disables all settings below)=
Basic segment (borderless, but with padding)=basic
Regular segment (with border and padding)=regular
Raised segment (slightly more emphasised)=raised
Vertical segment (create a vertical group)=vertical

Mini=mini
Tiny=tiny
Small=small
Medium=medium
Large=large
Big=big
Huge=huge
Massive=massive

Classic=regular
Basic=basic
Pointing navbar=pointing basic
Pointing navbar + Segment=pointing regular
Pointing buttons + Segment=pointing segments

Text only (transparent background)=air pocket
Polaroid (solid white background)=fluid card
Light overlay (white transparent background, on top of image)=fluid overlay card
Dark overlay (black transparent background)=fluid inverted overlay card
Lightbox only (visible after clicking on image)=minimal

Slider=slider
Gallery=gallery
Slider on mobile, Gallery on desktop=combo
Slider, with window for selected slide=synced

Circular image=circular
Bordered image=bordered
Stack image on mobile=stackable

Original=
[[$cbFieldSize]]
Fluid (full width)=fluid

Basic tweet=twitterFeedRowBasic
Compact tweet=twitterFeedRowCompact

Public=public_timeline
Friends=friends_timeline
User=user_timeline
Home=home_timeline
Mentions=mentions_timeline
Retweeted to me=retweeted_to_me
Retweeted of me=retweets_of_me

Above input field / options=top
Below input field / options=bottom

[[*template:is=`10`:or:is=`19`:then=`Inherit (respect Form CB setting)=inherit`]]
Vertical (above input field / options)=vertical
Horizontal (left of input field / options)=horizontal
[[*template:isnot=`10`:then=`Inline (all fields in 1 row)=inline`]]

No segments (borderless)=none
Regular segments (with borders)=segments
Raised segments (slightly more emphasized)=raised segments
Compact segments (compressed width)=compact segments

[[+background_title]]=[[+background_title:stripAsAlias]] [[If? &subject=`[[+background_inverted]]` &operator=`EQ` &operand=`1` &then=`inverted`]] background

[[getResources?
    &parents=`[[getContextSetting:empty=`[[++romanesco.global_backgrounds_id]]`? &context=`[[*context_key]]` &setting=`romanesco.global_backgrounds_id`]]`
    &limit=`0`
    &tpl=`@INLINE [[+pagetitle]]=[[+id]]`
    &outputSeparator=`
    `
    &showHidden=`1`
    &showUnpublished=`1`
    &where=`[{"template:=":"27"},{"uri:LIKE":"%/[[*context_key]]/%"}]`
    &tvFilters=`background_availability==%content%`
    &sortBy=`menuindex`
    &sortDir=`ASC`
]]
[[getResources?
    &parents=`[[getContextSetting:empty=`[[++romanesco.global_backgrounds_id]]`? &context=`[[*context_key]]` &setting=`romanesco.global_backgrounds_id`]]`
    &limit=`0`
    &depth=`0`
    &tpl=`@INLINE [[+pagetitle]]=[[+id]]`
    &outputSeparator=`
    `
    &showHidden=`1`
    &showUnpublished=`1`
    &where=`{"template:=":"27"}`
    &tvFilters=`background_availability==%content%`
    &sortBy=`menuindex`
    &sortDir=`ASC`
]]

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

[[*id:notempty=`System default ([[++layout_background_default:ucfirst:replace=`-== `]])=default`]]

White=white
Light=secondary
Grey=inverted secondary
Dark=inverted
Primary color (Light)=primary-color
Primary color (Dark)=inverted primary-color
Secondary color (Light)=secondary-color
Secondary color (Dark)=inverted secondary-color
Transparent=transparent

[[$cbGlobalBackgrounds]]

None= 
Vertical divider between columns=divided
Borders around each column (celled)=celled
Borders inside the columns only=internally celled

Stack columns on top of each other on mobile=stackable
Start stacking on tablet breakpoint already=on tablet
Center content when stacked=center when stacked
Reverse column order on mobile=mobile reversed
Double number of columns on each breakpoint=doubling
Do nothing (check if no other option was set!)=static

Infinite loop=loop
Show previous / next arrows=arrows
Place navigation outside of container=navOutside
Keyboard control=keyboard
Free scrolling=free
Center mode=center
Auto height=autoHeight
Autoplay=autoplay

First level of nested elements=regular
Overview items=overview
Gallery images=gallery
Cards=cards

[[%romanesco.patterns.status_green]]=green
[[%romanesco.patterns.status_yellow]]=yellow
[[%romanesco.patterns.status_orange]]=orange
[[%romanesco.patterns.status_red]]=red
[[%romanesco.patterns.status_pink]]=pink
[[%romanesco.patterns.status_purple]]=purple
[[%romanesco.patterns.status_blue]]=blue
[[%romanesco.patterns.status_brown]]=brown

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

Title only=overviewRowBasic
Title only (Card)=overviewRowBasicCard
Title only (Link card)=overviewRowBasicLinkCard
Title compact=overviewRowBasicCompact

Image only=overviewRowImageBasic
Image only (Overlay)=overviewRowImageBasicOverlay
Image top=overviewRowImageTop
Image top (Card)=overviewRowImageTopCard
Image top (Link card)=overviewRowImageTopLinkCard
Image left=overviewRowImageLeft
Image left (Card)=overviewRowImageLeftCard
Image compact=overviewRowImageCompact

Icon top=overviewRowIconTop
Icon top (Card)=overviewRowIconTopCard
Icon top (Link card)=overviewRowIconTopLinkCard
Icon left=overviewRowIconLeft
Icon compact=overviewRowIconCompact

Client regular=overviewRowOrganizationBasic
Client logo=overviewRowOrganizationLogo

Regular=overviewRowImageFluid
Publication=overviewRowArticleFluid
Team=overviewRowPersonFluid
Portfolio=overviewRowProjectFluid

Project regular=overviewRowProjectBasic
Project tile=overviewRowProjectTile

Article traditional=overviewRowArticleBasic
Article image=overviewRowArticleImageBasic
Article compact=overviewRowArticleCompact
Article quote=overviewRowArticleQuote

Team member regular=overviewRowPersonBasic
Team member regular (Card)=overviewRowPersonBasicCard
Team member tile=overviewRowPersonTile
Team member compact=overviewRowPersonCompact

Testimonial vertical=overviewRowReviewBasic
Testimonial horizontal=overviewRowReviewWide
Testimonial logo=overviewRowReviewLogo
Testimonial compact=overviewRowReviewCompact

Heading 2=h2
Heading 3=h3
Heading 4=h4
Heading 5=h5
Regular=span

[[getResources?
    &parents=`[[getContextSetting:empty=`[[++romanesco.client_container_id]]`? &context=`[[*context_key]]` &setting=`romanesco.client_container_id`]]`
    &tpl=`@INLINE [[+pagetitle]]=[[+id]]`
    &limit=`0`
    &showHidden=`1`
    &showUnpublished=`1`
    &sortBy=`menuindex`
    &sortDir=`ASC`
]]

--- Select a CTA ---=
[[getResources?
    &parents=`[[getContextSetting:empty=`[[++romanesco.cta_container_id]]`? &context=`[[*context_key]]` &setting=`romanesco.cta_container_id`]]`
    &tpl=`@INLINE [[+pagetitle]]=[[+id]]`
    &limit=`0`
    &showHidden=`0`
    &showUnpublished=`1`
    &sortBy=`menuindex`
    &sortDir=`ASC`
    &tvFilters=`cta_availability==%content%`
]]

[[getResources?
    &parents=`[[getContextSetting:empty=`[[++romanesco.portfolio_container_id]]`? &context=`[[*context_key]]` &setting=`romanesco.portfolio_container_id`]]`
    &tpl=`@INLINE [[+pagetitle]]=[[+id]]`
    &limit=`0`
    &showHidden=`1`
    &showUnpublished=`1`
    &sortBy=`menuindex`
    &sortDir=`ASC`
]]

[[getResources?
    &parents=`[[getContextSetting:empty=`[[++romanesco.team_container_id]]`? &context=`[[*context_key]]` &setting=`romanesco.team_container_id`]]`
    &tpl=`@INLINE [[+pagetitle]]=[[+id]]`
    &limit=`0`
    &showHidden=`1`
    &showUnpublished=`1`
    &sortBy=`menuindex`
    &sortDir=`ASC`
]]

[[getResources?
    &parents=`[[getContextSetting:empty=`[[++romanesco.testimonial_container_id]]`? &context=`[[*context_key]]` &setting=`romanesco.testimonial_container_id`]]`
    &tpl=`@INLINE [[+pagetitle]]=[[+id]]`
    &limit=`0`
    &showHidden=`1`
    &showUnpublished=`1`
    &sortBy=`menuindex`
    &sortDir=`ASC`
]]

1:1
4:3
16:9
21:9

Basic=basic
Compact=compact
Full width=fluid
Centered=center aligned
Circular=circular

Mini=mini
Tiny=tiny
Small=small
Medium=medium
Large=large
Big=big
Huge=huge
Massive=massive

Standard=regular
Primary=primary
Secondary=secondary
Tertiary=tertiary

1 column=one
2 columns=two
3 columns=three
4 columns=four
5 columns=five
6 columns=six
7 columns=seven
8 columns=eight
Adjust to content width=compact

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

9 columns=nine
10 columns=ten
11 columns=eleven
12 columns=twelve
13 columns=thirteen
14 columns=fourteen
15 columns=fifteen

Full width (fluid)=fluid
Standard width=
Slightly narrower=tightened
Improved readability (normal text)=conventional text
Optimal readability (large text)=text

[[iconInputOptions:stripString=`= icon`:stripString=`  `?
    &cssUrl=`[[++base_path]][[++romanesco.semantic_dist_path]]/components/icon.min.css`
    &regexPrefix=`i.icon.`
    &classPrefix=` icon`
    &mode=`cb`
    &excludeClasses=`display,before,loading,hover,opacity,width,border,color,inverted,active,i.icons,i.mini.icons`
]]

Position right=right
Display as label=labeled

SVG=svg
Font=font

Landscape (4:3)=landscape
Portrait (3:4)=portrait
Square (1:1)=square
Wide (16:9)=wide
Panorama (21:9)=pano
Free (?:?)=free

Add 'nofollow' to link tag=nofollow
Add 'noopener' to link tag=noopener
Add 'noreferrer' to link tag=noreferrer

None=regular
A little=relaxed
A lot=very relaxed

Default=default
Button (Load more)=button
Scroll (Infinite lazy loading)=scroll

Top=top
Right=right
Bottom=bottom
Left=left

Sort order in MODX=menuindex
Publication date (latest first)=publishedon
Creation date (latest first)=createdon
Alphabetic=pagetitle

[[+hit_count]]

[[+alias]]

[[+id]]

[[+label]]

[[+name]]

[[+rows]]

[[+tag]]

[[+value]]

{
    "@type": "ListItem",
    "position": [[+idx]],
    "name": [[stripForJSON? &input=`[[+menutitle:empty=`[[+pagetitle]]`]]`]]
}

{
    "@type": "ListItem",
    "position": [[+idx]],
    "name": [[stripForJSON? &input=`[[+menutitle:empty=`[[+pagetitle]]`]]`]],
    "item": "[[++site_url]][[+link]]"
}

{
    "@type": "Question",
    "name": [[stripForJSON:stripTags? &input=`[[+heading]]`]],
    "acceptedAnswer": {
        "@type": "Answer",
        "text": [[stripForJSON? &input=`[[+content]]`]]
    }
},

[[!AjaxUpload?
    &uid=`[[+name]]`
    &maxFiles=`[[+upload_limit]]`
    &maxFilesizeMb=`[[+max_file_size]]`
    &allowedExtensions=`[[+allowed_file_types]]`
    &thumbX=`150`
    &thumbY=`150`
    &addCss=`0`
]]

<input type="file" name="[[+name]]" id="[[+name]]">

[[+field_name_html:empty=`[[+field_name]]`:fbResetNonAlpha:fbStripAsAlias:fbPrefixOutput:toPlaceholder=`name`]]
[[+field_option:fbResetNonAlpha:toPlaceholder=`option`]]

<option value="[[+field_value:empty=`[[+field_option]]`]]" [[!+fb[[*id]].[[+name]]:FormItIsSelected=`[[+field_value:empty=`[[+field_option]]`]]`]]>
    [[+option]]
</option>

[[!fbStripAsAlias:fbPrefixOutput:toPlaceholder=`field_alias`? &input=`[[+field_name_html:empty=`[[+field_name]]`]]`]]
[[!fbStripNonAlpha:toPlaceholder=`value_[[+idx]]`? &input=`[[+[[+valueType:empty=`name`]]]]`]]

<option value="[[+value_[[+idx]]]]"
        [[!+fb[[*id]].[[+field_alias]]:FormItIsSelected=`[[+value_[[+idx]]]]`]]
        [[!+fb[[*id]].[[+field_alias]]:contains=`[[+value_[[+idx]]]]`:then=`selected`]]
    >
    [[+name]]
</option>

[[!fbStripAsAlias:fbPrefixOutput:toPlaceholder=`field_alias`? &input=`[[+field_name_html:empty=`[[+field_name]]`]]`]]
<option value="[[+id]]"
        [[!+fb[[*id]].[[+field_alias]]:FormItIsSelected=`[[+id]]`]]
        [[!+fb[[*id]].[[+field_alias]]:contains=`[[+id]]`:then=`selected`]]
    >
    [[+pagetitle]]
</option>

[[+field_name_html:empty=`[[+field_name]]`:fbResetNonAlpha:fbStripAsAlias:fbPrefixOutput:toPlaceholder=`name`]]
[[+field_option:fbResetNonAlpha:toPlaceholder=`option`]]

<div class="field">
    <div class="ui [[+collapse_target:isnot=``:then=`collapsible`]] [[+checkbox_type:empty=`[[+field_type]]`]] checkbox">
        <input type="[[+field_type]]"
               name="[[+name]][[+field_type:is=`checkbox`:then=`[]`]]"
               id="[[+name]]-[[+idx]]"
               value="[[+field_value:empty=`[[+option]]`]]"
               tabindex="[[+idx]]"
               data-group="[[+collapse_target:isnot=``:then=`[[+name]]`:default=`no-group`]]"
               data-target="[[+collapse_target:default=`no-target`]]"
               data-state="[[!+fb[[*id]].[[+name]]:contains=`[[+field_value:empty=`[[+option]]`]]`:then=`expanded`:else=`[[+collapse_default]]`]]"
               [[!+fb[[*id]].[[+name]]:FormItIsChecked=`[[+field_value:empty=`[[+option]]`]]`]]
               [[!+fb[[*id]].[[+name]]:contains=`[[+field_value:empty=`[[+option]]`]]`:then=`checked`]]>
        <label>[[+option]]</label>
    </div>
</div>

[[!fbStripAsAlias:fbPrefixOutput:toPlaceholder=`field_alias`? &input=`[[+field_name_html:empty=`[[+field_name]]`]]`]]
[[!fbStripNonAlpha:toPlaceholder=`value_[[+idx]]`? &input=`[[+[[+valueType:empty=`name`]]]]`]]
[[!If:toPlaceholder=`checkbox_array`?
    &subject=`[[+field_type]]`
    &operator=`EQ`
    &operand=`checkbox`
    &then=`[]`
    &else=``
]]
[[!If:toPlaceholder=`checkbox_variant`?
    &subject=`[[+checkbox_type]]`
    &operator=`notempty`
    &then=`[[+checkbox_type]]`
    &else=`[[+field_type]]`
]]

<div class="field">
    <div class="ui [[+checkbox_variant]] checkbox">
        <input type="[[+field_type]]"
               name="[[+field_alias]][[+checkbox_array]]"
               id="[[+field_alias]]-[[+idx]]"
               value="[[+value_[[+idx]]]]"
               tabindex="[[+idx]]"
               data-group="[[+collapse_target:isnot=``:then=`[[+field_alias]]`:default=`no-group`]]"
               data-target="[[+collapse_target:default=`no-target`]]"
               data-state="[[+collapse_default]]"
               [[!+fb[[*id]].[[+field_alias]]:FormItIsChecked=`[[+value_[[+idx]]]]`]]
               [[!+fb[[*id]].[[+field_alias]]:contains=`[[+value_[[+idx]]]]`:then=`checked`]]
        >
        <label>[[+name]]</label>
    </div>
</div>

[[!fbStripAsAlias:fbPrefixOutput:toPlaceholder=`field_alias`? &input=`[[+field_name_html:empty=`[[+field_name]]`]]`]]
[[!If:toPlaceholder=`checkbox_array`?
    &subject=`[[+field_type]]`
    &operator=`EQ`
    &operand=`checkbox`
    &then=`[]`
    &else=``
]]
[[!If:toPlaceholder=`checkbox_variant`?
    &subject=`[[+checkbox_type]]`
    &operator=`notempty`
    &then=`[[+checkbox_type]]`
    &else=`[[+field_type]]`
]]

<div class="field">
    <div class="ui [[+checkbox_variant]] checkbox">
        <input type="[[+field_type]]"
               name="[[+field_alias]][[+checkbox_array]]"
               id="[[+field_alias]]-[[+idx]]"
               value="[[+pagetitle:fbStripNonAlpha]]"
               tabindex="[[+idx]]"
               data-group="[[+collapse_target:isnot=``:then=`[[+field_alias]]`:default=`no-group`]]"
               data-target="[[+collapse_target:default=`no-target`]]"
               data-state="[[+collapse_default]]"
               [[!+fb[[*id]].[[+field_alias]]:FormItIsChecked=`[[+pagetitle:fbStripNonAlpha]]`]]
               [[!#get.id:stripTags:eq=`[[+id]]`:then=`checked`]]>
        <label>[[+pagetitle]]</label>
    </div>
</div>

[[!If:toPlaceholder=`checkbox_array`?
    &subject=`[[+field_type]]`
    &operator=`EQ`
    &operand=`checkbox`
    &then=`[]`
    &else=``
]]
[[!If:toPlaceholder=`checkbox_variant`?
    &subject=`[[+checkbox_type]]`
    &operator=`notempty`
    &then=`[[+checkbox_type]]`
    &else=`[[+field_type]]`
]]

<div class="field">
    <div class="ui [[+checkbox_variant]] checkbox">
        <input type="[[+field_type]]"
               name="[[+alias]][[+checkbox_array]]"
               id="[[+alias]]-[[+idx]]"
               class="hidden"
               value="[[+alias]]"
               tabindex="[[+idx]]"
               data-group="[[+collapse_target:isnot=``:then=`[[+alias]]`:default=`no-group`]]"
               data-target="[[+collapse_target:default=`no-target`]]"
               data-state="[[+collapse_default]]"
               [[!+fb[[*id]].[[+alias]]:FormItIsChecked=`[[+alias]]`]]
               [[!#get.id:stripTags:eq=`[[+id]]`:then=`checked`]]>
        <label>[[+tag]]</label>
    </div>
</div>

[[+background_svg:notempty=`, url("/uploads/img/background/[[+background_svg]]")`:toPlaceholder=`background_img_secondary`]]

.background.[[+background_title:stripAsAlias]]:before {
    background-image:
        url("[[ImagePlus? &value=`[[+background_img_portrait:empty=`[[+background_img]]`]]` &options=`w=800&q=[[++romanesco.img_quality]]` &type=`thumb`]]")
        [[+background_img_secondary]] !important
    ;
    opacity: [[+background_opacity:div=`100`:replace=`,==.`:empty=`1`]];
}
.background.[[+background_title:stripAsAlias]]:after {
    [[+background_color:notempty=`background-color: [[+background_color]] !important;`]]
}

@media
    (min-width: 800px) {
    .background.[[+background_title:stripAsAlias]]:before {
        background-image:
            url("[[ImagePlus? &value=`[[+background_img]]` &options=`w=1600&q=[[++romanesco.img_quality]]` &type=`thumb`]]")
            [[+background_img_secondary]] !important
        ;
    }
}

[[++img_hidpi:eq=`1`:then=`
@media
    (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {
    .background.[[+background_title:stripAsAlias]]:before {
        background-image:
            url("[[ImagePlus? &value=`[[+background_img_portrait:empty=`[[+background_img]]`]]` &options=`w=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]` &type=`thumb`]]")
            [[+background_img_secondary]] !important
        ;
    }
}
@media
    (-webkit-min-device-pixel-ratio: 2) and (min-width: 800px),
    (min-resolution: 192dpi) and (min-width: 800px) {
    .background.[[+background_title:stripAsAlias]]:before {
        background-image:
            url("[[ImagePlus? &value=`[[+background_img]]` &options=`w=[[++max_thumb_width:mpy=`2`]]&q=[[++romanesco.img_quality]]` &type=`thumb`]]")
            [[+background_img_secondary]] !important
        ;
    }
}
`]]

.background.[[+alias]]:before {
    background-image: url("[[ImagePlus? &value=`[[+overview_img_pano:empty=`[[+overview_img_wide]]`]]` &options=`w=800&q=[[++romanesco.img_quality]]` &type=`thumb`]]") !important;
    opacity: 1;
}

.background.[[+alias]]:after {
    [[+background_color:notempty=`background-color: [[+background_color]] !important;`]]
}

@media
    (min-width: 800px) {
    .background.[[+alias]]:before {
        background-image: url("[[ImagePlus? &value=`[[+overview_img_pano:empty=`[[+overview_img_wide]]`]]` &options=`w=1600&q=[[++romanesco.img_quality]]` &type=`thumb`]]") !important;
    }
}

[[++img_hidpi:eq=`1`:then=`
@media
    (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {
    .background.[[+alias]]:before {
        background-image: url("[[ImagePlus? &value=`[[+overview_img_pano:empty=`[[+overview_img_wide]]`]]` &options=`w=1200&q=[[++romanesco.img_quality]]` &type=`thumb`]]") !important;
    }
}
@media
    (-webkit-min-device-pixel-ratio: 2) and (min-width: 800px),
    (min-resolution: 192dpi) and (min-width: 800px) {
    .background.[[+alias]]:before {
        background-image: url("[[ImagePlus? &value=`[[+overview_img_pano:empty=`[[+overview_img_wide]]`]]` &options=`w=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]` &type=`thumb`]]") !important;
    }
}
`]]

[[If:toPlaceholder=`bg[[+id]][[+idx]][[+imgScale]].img_uncropped`?
    &subject=`[[+image.crops.mobile.url:empty=``]][[+image.crops.tablet.url:empty=``]][[+image.crops.desktop.url:empty=``]]`
    &operand=`empty`
    &then=`
    [[pthumb:imgOptimizeThumb=`[[+quality]]`:prepend=`url(`:append=`)`?
        &input=`[[+image.url:prepend=`/`]]`
        &options=`w=[[+imgWidth]]
            &q=[[++romanesco.img_quality]]
            &scale=[[+imgScale:default=`1`]]
        `
    ]]`
    &else=``
]]
[[If:toPlaceholder=`bg[[+id]][[+idx]][[+imgScale]].img_src`?
    &subject=`[[+image.crops.[[+imgType]].url]]`
    &operator=`notempty`
    &then=`
    [[pthumb:imgOptimizeThumb=`[[+quality]]`:prepend=`url(`:append=`)`?
        &input=`[[+image.url:prepend=`/`]]`
        &options=`w=[[+imgWidth]]
            &sx=[[+image.crops.[[+imgType]].x]]
            &sy=[[+image.crops.[[+imgType]].y]]
            &sw=[[+image.crops.[[+imgType]].width]]
            &sh=[[+image.crops.[[+imgType]].height]]
            &q=[[++romanesco.img_quality]]
            &scale=[[+imgScale:default=`1`]]
        `
    ]]`
    &else=`[[+bg[[+id]][[+idx]][[+imgScale]].img_uncropped]]`
]]
[[If:empty=`[[+gradient]]`?
    &subject=`[[+image.extension]]`
    &operator=`is`
    &operand=`svg`
    &then=`[[+image.url:prepend=`url(/`:append=`)`]]`
    &else=`[[+bg[[+id]][[+idx]][[+imgScale]].img_src]]`
]]
[[+position:empty=`center center`]] /
[[+size:empty=`cover`]]
[[+repeat]]
[[+attachment]]

[[+opacity:notempty=`opacity: [[+opacity:div=`100`:replace=`,==.`]];`]]
[[+filter:notempty=`filter: [[+filter]];`]]
[[+filter:contains=`blur`:then=`transform: scale(1.1);`]]

[[+img_scale:default=`100`:toPlaceholder=`scale`]]
[[+lazy_load:eq=`1`:then=`data-`:else=``:toPlaceholder=`lazy`]]
[[++max_thumb_width:div=`[[+crop.width]]`:replace=`,==.`:mpy=`[[+crop.height]]`:round=`up`:toPlaceholder=`max_thumb_height`]]
[[responsiveImgSrcset?
    &breakpoints=`[[++romanesco.img_breakpoints]]`
    &quality=`[[++romanesco.img_quality]]`
    &src=`[[+source.src]]`
    &crop=`[[+crop.options]]`
    &width=`[[+width]]`
    &toPlaceholder=`[[+prefix]].srcset`
]]
<img [[+lazy]]srcset="[[+[[+prefix]].srcset]]"
     [[+lazy]]sizes="(min-width: 1300px) calc([[+scale]]vw / [[+cols]]),
                     (min-width: 992px) calc([[+scale]]vw / [[+cols]]),
                     (min-width: 768px) [[+cols:gt=`2`:then=`calc(([[+scale]]vw - 2em) / 2)`:else=`[[+scale]]vw`]],
                     (min-width: 360px) [[+cols:gt=`2`:then=`calc(([[+scale]]vw - 2em) / 2)`:else=`[[+scale]]vw`]],
                     (max-width: 359px) calc([[+scale]]vw / [[+cols]])"
     [[+lazy]]src="[[+url:imgOptimizeThumb]]"
     [[+lazy:notempty=`
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 [[++max_thumb_width]] [[+max_thumb_height]]'%3E%3C/svg%3E"
     class="lazy"
     `]]
     width="[[++max_thumb_width]]"
     height="[[+max_thumb_height]]"
     alt="[[+alt:empty=`[[+[[+altField]]]]`:htmlent]]"
/>

<img src="[[++overview_img_[[+img_type]]_fallback]]" alt="[[%romanesco.overview.img_fallback]]">

[[+lazy_load:eq=`1`:then=`data-`:else=``:toPlaceholder=`lazy`]]
<img [[+lazy]]src="[[+url:imgOptimizeThumb]]"
     [[+lazy:notempty=`
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 [[+width]] [[+height]]'%3E%3C/svg%3E"
     class="lazy"
     `]]
     [[+width:notempty=`width="[[+width]]"`]]
     [[+height:notempty=`height="[[+height]]"`]]
     alt="[[+alt:empty=`[[+[[+altField]]]]`:htmlent]]"
/>

<figure class="ui avatar image">
    [[ImagePlus:empty=`[[$imgOverviewFallback? &img_type=`square`]]`?
        &tvname=`person_image`
        &docid=`[[+id]]`
        &options=`w=150&h=150&q=[[++romanesco.img_quality]]&zc=1`
        &type=`tpl`
        &tpl=`imgOverviewFixed`
    ]]
</figure>

<a class="ui avatar image" href="[[~[[+id]]]]">
    [[ImagePlus:empty=`[[$imgOverviewFallback? &img_type=`square`]]`?
        &tvname=`person_image`
        &docid=`[[+id]]`
        &options=`w=150&h=150&q=[[++romanesco.img_quality]]&zc=1`
        &type=`tpl`
        &tpl=`imgOverviewFixed`
    ]]
</a>

<a class="ui [[+classes]] image" href="[[~[[+id]]]]">
    [[ImagePlus:empty=`[[$imgOverviewFallback? &mpy=`1`]]`?
        &tvname=`person_image`
        &docid=`[[+id]]`
        &options=`w=800&h=800&q=[[++romanesco.img_quality]]&zc=1`
        &type=`tpl`
        &tpl=`imgOverview`
    ]]
</a>

[[+lazy_load:eq=`1`:then=`data-`:else=``:toPlaceholder=`lazy`]]
[[++max_thumb_width:div=`[[+width]]`:replace=`,==.`:mpy=`[[+height]]`:round=`up`:toPlaceholder=`max_thumb_height`]]
[[$imgResponsiveScale:toPlaceholder=`scale`?
    &layout_id=`[[+layout_id]]`
    &layout_column=`[[+layout_column]]`
    &uid=`[[+unique_idx]]`
]]
[[responsiveImgSrcset?
    &breakpoints=`[[++romanesco.img_breakpoints]]`
    &quality=`[[++romanesco.img_quality]]`
    &src=`[[+url]]`
    &width=`[[++max_thumb_width]]`
    &uid=`[[+unique_idx]]`
    &toPlaceholder=`srcset`
]]
<img [[+lazy]]srcset="[[+srcset]]"
     [[+lazy]]sizes="(min-width: 1300px) [[+scale]]vw,
                     (min-width: 992px) [[+scale]]vw,
                     (min-width: 768px) [[+scale]]vw,
                     (min-width: 360px) [[+scale]]vw,
                     (max-width: 359px) [[+scale]]vw"
     [[+lazy]]src="[[pthumb:imgOptimizeThumb? &input=`[[+url]]` &options=`w=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]&zc=1`]]"
     [[+lazy:notempty=`
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 [[++max_thumb_width]] [[+max_thumb_height]]'%3E%3C/svg%3E"
     class="lazy"
     `]]
     width="[[++max_thumb_width]]"
     height="[[+max_thumb_height]]"
     alt="[[+alt:htmlent]]"
>

[[+lazy_load:eq=`1`:then=`data-`:else=``:toPlaceholder=`lazy`]]
[[$imgResponsiveScale:toPlaceholder=`scale`?
    &layout_id=`[[+layout_id]]`
    &layout_column=`[[+layout_column]]`
    &uid=`[[+unique_idx]]`
]]
[[responsiveImgSrcset?
    &breakpoints=`[[++romanesco.img_breakpoints]]`
    &quality=`[[++romanesco.img_quality]]`
    &src=`[[+url]]`
    &width=`[[+width]]`
    &uid=`[[+unique_idx]]`
    &toPlaceholder=`srcset`
]]
<img [[+lazy]]srcset="[[+srcset]]"
     [[+lazy]]sizes="(min-width: 1300px) calc([[+scale]]vw / [[+cols]]),
                     (min-width: 992px) calc([[+scale]]vw / [[+cols]]),
                     (min-width: 768px) [[+cols:gt=`2`:then=`calc(([[+scale]]vw - 2em) / 2)`:else=`[[+scale]]vw`]],
                     (min-width: 360px) [[+cols:gt=`2`:then=`calc(([[+scale]]vw - 2em) / 2)`:else=`[[+scale]]vw`]],
                     (max-width: 359px) calc([[+scale]]vw / [[+cols]])"
     [[+lazy]]src="[[+url:imgOptimizeThumb]]"
     [[+lazy:notempty=`
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 [[+width]] [[+height]]'%3E%3C/svg%3E"
     class="lazy"
     `]]
     [[+lightbox:eq=`1`:then=`
     data-lightbox-img="[[pthumb:imgOptimizeThumb? &input=`[[+url]]` &options=`w=[[++max_thumb_width:mpy=`1.5`]]&q=[[++romanesco.img_quality]]&zc=1`]]"
     data-caption="[[+title]]"
     `]]
     [[+width:notempty=`width="[[+width]]"`]]
     [[+height:notempty=`height="[[+height]]"`]]
     alt="[[+alt:empty=`[[+title]]`:htmlent]]"
/>

[[+lazy_load:eq=`1`:then=`data-`:else=``:toPlaceholder=`lazy`]]
[[++max_thumb_width:div=`[[+crops.default.width:empty=`[[+width]]`]]`:replace=`,==.`:mpy=`[[+crops.default.height:empty=`[[+height]]`]]`:round=`up`:toPlaceholder=`max_thumb_height`]]
[[$imgResponsiveScale:toPlaceholder=`scale`?
    &layout_id=`[[+layout_id]]`
    &layout_column=`[[+layout_column]]`
    &uid=`[[+unique_idx]]`
]]
[[responsiveImgSrcset?
    &breakpoints=`[[++romanesco.img_breakpoints]]`
    &quality=`[[++romanesco.img_quality]]`
    &src=`[[+crops.default.url:empty=`[[+url]]`]]`
    &width=`[[++max_thumb_width]]`
    &uid=`[[+unique_idx]]`
    &toPlaceholder=`srcset`
]]
<img [[+lazy]]srcset="[[+srcset]]"
     [[+lazy]]sizes="(min-width: 1300px) calc([[+scale]]vw / [[+cols:textToNumber]]),
                     (min-width: 992px) calc([[+scale]]vw / [[+cols:textToNumber]]),
                     (min-width: 768px) [[+cols:textToNumber:gt=`2`:then=`calc(([[+scale]]vw - 2em) / 2)`:else=`[[+scale]]vw`]],
                     (min-width: 360px) [[+cols:textToNumber:gt=`2`:then=`calc(([[+scale]]vw - 2em) / 2)`:else=`[[+scale]]vw`]],
                     (max-width: 359px) calc([[+scale]]vw / [[+cols:textToNumber]])"
     [[+lazy]]src="[[pthumb:imgOptimizeThumb? &input=`[[+crops.default.url:empty=`[[+url]]`]]` &options=`w=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]&zc=1`]]"
     [[+lazy:notempty=`
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 [[++max_thumb_width]] [[+max_thumb_height]]'%3E%3C/svg%3E"
     class="lazy"
     `]]
     [[+lightbox:eq=`1`:then=`
     data-lightbox-img="[[pthumb:imgOptimizeThumb? &input=`[[+url]]` &options=`w=[[++max_thumb_width:mpy=`1.5`]]&q=[[++romanesco.img_quality]]&zc=1`]]"
     data-caption="[[+title]]"
     `]]
     width="[[++max_thumb_width]]"
     height="[[+max_thumb_height]]"
     alt="[[+alt:htmlent]]"
>

[[pthumb:imgOptimizeThumb?
    &input=`[[+src]]`
    &options=`[[+crop]]&w=[[+width:lte=`[[+breakpoint]]`:then=`[[+width]]`:else=`[[+breakpoint]]`]]&q=[[+quality]]`
]] [[+breakpoint]]w

[[Switch?
    &get=`[[+layout_id]]_[[+layout_column]]`

    &c1=`1_main`        &do1=`100`
    &c2=`2_main`        &do2=`66`
    &c3=`2_sidebar`     &do3=`33`
    &c4=`3_sidebar`     &do4=`33`
    &c5=`3_main`        &do5=`66`
    &c6=`4_col_1`       &do6=`25`
    &c7=`4_col_2`       &do7=`25`
    &c8=`4_col_3`       &do8=`25`
    &c9=`4_col_4`       &do9=`25`
    &c10=`5_col_1`      &do10=`33`
    &c11=`5_col_2`      &do11=`33`
    &c12=`5_col_3`      &do12=`33`
    &c13=`6_col_1`      &do13=`50`
    &c14=`6_col_2`      &do14=`50`

    &c15=`7_main`       &do15=`100`
    &c16=`8_main`       &do16=`66`
    &c17=`8_sidebar`    &do17=`33`
    &c18=`9_sidebar`    &do18=`33`
    &c19=`9_main`       &do19=`66`
    &c20=`10_col_1`     &do20=`25`
    &c21=`10_col_2`     &do21=`25`
    &c22=`10_col_3`     &do22=`25`
    &c23=`10_col_4`     &do23=`25`
    &c24=`11_col_1`     &do24=`33`
    &c25=`11_col_2`     &do25=`33`
    &c26=`11_col_3`     &do26=`33`
    &c27=`12_col_1`     &do27=`50`
    &c28=`12_col_2`     &do28=`50`

    &c29=`24_main`      &do29=`100`

    [[[[modifiedIf?
        &subject=`imgResponsiveScaleTheme`
        &operator=`iselement`
        &operand=`chunk`
        &then=`$imgResponsiveScaleTheme? &uid=`[[+unique_idx]]``
    ]]]]

    &default=`51`
]]

<span class="active section">
    [[+menutitle:empty=`[[+pagetitle]]`]]
</span>

<a class="section" href="[[~[[++site_start]]? &scheme=`full`]]">
    <i class="icon home"></i>
</a>
<i class="right angle icon divider"></i>

<nav id="breadcrumbs" class="ui breadcrumb">
    [[+crumbs]]
</nav>

<a class="section" href="[[++site_url]][[+link]]">
    [[+menutitle:empty=`[[+pagetitle]]`]]
</a>
<i class="right angle icon divider"></i>

<a class="external item" href="[[+url]]" title="[[+title]]" target="_blank">[[+number:prepend=`[`:append=`]`]]</a>

<a id="reference-[[+number]]"
   class="ui tiny circular label item with tooltip onclick external"
   data-html='[[$externalNavItemTooltip? &uid=`[[+url]]`]]'>
    [[+number]]
</a>

<div class="[[+classes]] item">
    <div class="image">
        <a class="ui circular label" href="[[~[[*id]]]]#reference-[[+number]]">[[+number]]</a>
    </div>
    <div class="content">
        [[+title:notempty=`
        <div class="header">
            [[+title]]
            [[+date_accessed:notempty=`
            <i class="small muted calendar alternate outline icon" title="[[%romanesco.external.accessed_on]] [[+date_accessed:strtotime:date=`[[++romanesco.date_format_short]]`]]"></i>
            `]]
        </div>
        `]]
        <div class="small description">
            [[If?
                &subject=`[[+url]]`
                &operator=`notempty`
                &then=`<a href="[[+url]]" target="_blank">[[+description:empty=`[[+url]]`]]</a>`
                &else=`[[+description]]`
            ]]
        </div>
    </div>
</div>

[[+title:notempty=`
<div class="header">
    <strong>[[+title]]</strong>
</div>
`]]
<div class="content">
    [[+description:notempty=`<div>[[+description:stripTags:htmlent]]</div>`]]
    [[+date_accessed:notempty=`
    <div class="meta">[[%romanesco.external.accessed_on]] [[+date_accessed:strtotime:date=`[[++romanesco.date_format_short]]`]]</div>
    `]]
    [[+url:notempty=`
    <div class="ui divider"></div>
    <a class="ui tiny compact right labeled icon button" href="[[+url]]" target="_blank">
        [[%romanesco.external.visit_source]]
        <i class="external alternate icon"></i>
    </a>
    `]]
</div>

<a class="right item" href="[[+uri]]" title="[[%romanesco.article.next]]">
    [[+menutitle]]
    <i class="muted right arrow icon"></i>
</a>

<a class="left item" href="[[+uri]]" title="[[%romanesco.article.previous]]">
    <i class="muted left arrow icon"></i>
    [[+menutitle]]
</a>

<a class="item" href="[[+href]]">[[+pageNo]]</a>

<span class="active item">[[+pageNo]]</span>

<span class="disabled item">...</span>

<a class="[[+target]] icon item" href="[[+href]]"><i class="[[+icon_class]] icon"></i></a>

<span class="disabled [[+target]] item"><i class="fitted [[+icon_class]] icon"></i></span>

<button class="ui center aligned right labeled load more icon button">
    [[%romanesco.pagination.load_more]]
    <i class="plus icon"></i>
</button>

[[+first]][[+prev]][[+pages]][[+next]][[+last]]

<a class="item [[+classnames]]" href="[[+link]]" title="[[+pagetitle]]" [[+attributes]]>
    [[+menutitle]]
    [[+wrapper]]
</a>

<li class="link item [[+classnames]]">
    <div class="title">
        <a href="[[+link]]" [[+attributes]]>
            [[+menutitle]]
        </a>
    </div>
</li>

[[+wrapper:isnot=``:then=`
<li class="link item [[+classnames]]">
    <div class="title [[+active]]">
        <a href="[[+link]]" [[+attributes]]>
            [[+menutitle]]
        </a>
        <button class="ui tiny icon button"><i class="dropdown icon"></i></button>
    </div>
    <ul class="content [[+active]]">
        [[+wrapper]]
    </ul>
</li>
`:else=`
<li class="link item [[+classnames]]">
    <div class="title">
        <a href="[[+link]]" [[+attributes]]>
            [[+menutitle]]
        </a>
    </div>
</li>
`]]

<li class="item [[+classnames]]">
    <a href="[[+link]]" [[+attributes]]>
        [[+menutitle]]
    </a>
</li>

<li class="item column [[*id:eq=`[[+id]]`:then=`active`]]">
    <a class="title [[+classnames]]" href="[[+link]]" [[+attributes]]>
        [[+menutitle]]
        <i class="dropdown icon"></i>
    </a>
    <ul class="menu content">
        [[+wrapper]]
    </ul>
</li>

[[++navbar_level:eq=`3`:then=`[[+wrapper:contains=`rel="category"`:then=`three level`:else=`two level`]]`:else=`two level`:toPlaceholder=`depth`]]

[[+wrapper:isnot=``:then=`
<li class="ui simple [[+depth]] dropdown item [[+alias]]">
    <a class="title [[+classnames]]" href="[[+link]]" [[+attributes]]>
        [[+menutitle]]
        <i class="dropdown icon"></i>
    </a>
    <ul class="menu content row">
        [[+wrapper]]
    </ul>
</li>
`:else=`
<li class="link item">
    <a class="title [[+classnames]]" href="[[+link]]">
        [[+menutitle]]
    </a>
</li>
`]]

<ul class="ui link list">
    [[+wrapper]]
</ul>

<a class="item [[+classnames]]" href="[[+link]]" title="[[+longtitle:empty=`[[+pagetitle]]`]]" [[+attributes]]>
    <i class="[[+overview_icon_font]] icon"></i>
    [[+menutitle]]
</a>

<a class="item [[+classnames]]" href="[[+link]]" title="[[+pagetitle]]" [[+attributes]]>
    [[+menutitle]]
</a>

<div class="item active" title="[[+pagetitle]]">
    <div class="header">
        <a class="item active" href="[[+link]]">[[+menutitle]]</a>
    </div>
    <div class="menu">
        [[+wrapper]]
    </div>
</div>

[[+wrapper]]

<div class="[[+classnames]] [[!+step-[[+id]]]] step">
    [[+overview_icon_font:notempty=`<i class="[[+overview_icon_font]]"></i>`]]
    <div class="content">
        <div class="title">[[+menutitle]]</div>
        [[+longtitle:notempty=`<div class="description">[[+longtitle]]</div>`]]
    </div>
</div>

<a href="[[+link]]" class="[[+classnames]] [[!+step-[[+id]]]] step">
    [[+overview_icon_font:notempty=`<i class="[[+overview_icon_font]]"></i>`]]
    <div class="content">
        <div class="title">[[+menutitle]]</div>
        [[+longtitle:notempty=`<div class="description">[[+longtitle]]</div>`]]
    </div>
</a>

<div class="item [[+idx:eq=`1`:then=`active`]] [[+tab_type:contains=`pointing segments`:then=`ui [[+segment_pointer]] segment`]]"
   data-tab="segment-[[+unique_idx]]-[[+idx]]"
   role="tab"
   aria-selected="false">
    <[[+level]] class="ui [[+level:is=`span`:then=`tiny`]] header">
        [[+heading]]
        [[If?
            &subject=`[[+subtitle]]`
            &operator=`notempty`
            &then=`<span class="sub header">[[+subtitle]]</span>`
        ]]
    </[[+level]]>
</div>

<div class="item [[+idx:eq=`1`:then=`active`]] [[+tab_type:contains=`pointing segments`:then=`ui [[+segment_pointer]] segment`]]"
     data-tab="segment-[[+unique_idx]]-[[+idx]]"
     role="tab"
     aria-selected="false">
    <[[+level]] class="ui [[+icon_position:is=`top`:then=`icon`]] [[+level:is=`span`:then=`tiny`]] header">
        <img class="ui image" src="[[+icon]]">
        <span class="content">
            [[+heading]]
            [[+subtitle:notempty=`<span class="sub header">[[+subtitle]]</span>`]]
        </span>
    </[[+level]]>
</div>

<a class="item [[+classnames]]" href="[[+link]]" [[+attributes]]>
    <span class="level"></span>[[+menutitle]]
</a>

<td data-title="[[+head_[[+colIdx]]_1]]">[[+cell]]</td>

<optgroup label="[[+text]]">||[[+options]]||</optgroup>

[[+text]]==[[+value]]

[[+name]][[+description:before=` --> `]]==[[+[[+linkType]]]]

<b>[[+name]]</b>[[+description:before=`<br>`]]==[[+[[+linkType]]]]