Atoms

<a href="[[+link]]" class="[[+classes]] ui button" [[+attributes]]>[[+button_text]]</a>

<a href="[[+link]]" class="[[+classes]] ui button" [[+attributes]]>
    <i class="[[+icon_class]]"></i>
    [[+button_text]]
</a>

<a href="[[~[[+id]]]]" class="[[+classes]] [[+de_emphasize:is=`1`:then=`small`:else=`large primary`]] ui button">
    [[+overview_link_text:empty=`[[+link_text]]`]]
</a>

<div class="ui [[+divider_hidden:is=`1`:then=`hidden`]] [[+divider_section:is=`1`:then=`section`]] [[+divider_text:notempty=`horizontal`]] divider">
    [[+divider_text]]
</div>

<[[+level]] class="ui [[+alignment]] header">[[+value]]</[[+level]]>

<[[+title_hierarchy]] class="ui [[+classes]] header">
    [[+[[+title_field]]:empty=`[[+pagetitle]]`]]
</[[+title_hierarchy]]>

<[[+title_hierarchy]] class="ui [[+classes]] header">
    <a href="[[~[[+id]]]]">[[+[[+title_field]]:empty=`[[+pagetitle]]`]]</a>
</[[+title_hierarchy]]>

<figure class="ui [[+icon_size]] [[+de_emphasize:is=`1`:then=`disabled`]] image">
    <img src="[[+url]]" width="[[+width]]" height="[[+height]]" alt="[[+alt:htmlent]]">
</figure>

[[+lazy_load:eq=`1`:then=`data-`:else=``:toPlaceholder=`lazy`]]
[[++max_thumb_width:div=`[[+width]]`:replace=`,==.`:mpy=`[[+height]]`:round:toPlaceholder=`max_thumb_height`]]
[[$imgResponsiveScale:toPlaceholder=`scale`?
    &layout_id=`[[+layout_id]]`
    &layout_column=`[[+layout_column]]`
]]
[[responsiveImgSrcset?
    &breakpoints=`[[++romanesco.img_breakpoints]]`
    &quality=`[[++romanesco.img_quality]]`
    &src=`[[+url]]`
    &width=`[[++max_thumb_width]]`
    &toPlaceholder=`srcset`
]]
<figure class="ui [[+classes]] content image">
    <img [[+lazy]]srcset="[[+srcset]]"
         [[+lazy]]sizes="(min-width: 1300px) [[+scale]]vw,
                         (min-width: 992px) [[+scale]]vw,
                         (min-width: 768px) 100vw,
                         (min-width: 360px) 100vw,
                         100vw"
         [[+lazy]]src="[[pthumb? &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]]">
    [[If?
        &subject=`[[+credits]][[+caption]]`
        &operator=`notempty`
        &then=`<figcaption>[[+caption]][[+credits:stripTags=`<a>,<em>,<strong>`:prepend=`<span class="credits meta">© `:append=`</span>`]]</figcaption>`
    ]]
</figure>

[[+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:toPlaceholder=`max_thumb_height`]]
[[$imgResponsiveScale:toPlaceholder=`scale`?
    &layout_id=`[[+layout_id]]`
    &layout_column=`[[+layout_column]]`
]]
[[responsiveImgSrcset?
    &breakpoints=`[[++romanesco.img_breakpoints]]`
    &quality=`[[++romanesco.img_quality]]`
    &src=`[[+crops.default.url:empty=`[[+url]]`]]`
    &width=`[[++max_thumb_width]]`
    &toPlaceholder=`srcset`
]]
<img [[+lazy]]srcset="[[+srcset]]"
     [[+lazy]]sizes="(min-width: 1300px) [[+scale]]vw / [[+cols:textToNumber]],
                     (min-width: 992px) [[+scale]]vw / [[+cols:textToNumber]],
                     (min-width: 768px) 100vw,
                     (min-width: 360px) 100vw,
                     100vw"
     [[+lazy]]src="[[pthumb? &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"
     `]]
     [[+lightbox:eq=`1`:then=`
     data-lightbox-img="[[pthumb? &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]]"
>

<figure class="ui [[+classes]] image">
    [[svgSanitize?
        &file=`[[+url]]`
        &title=`[[+alt]]`
    ]]
</figure>

<div class="description">[[+introtext]]</div>

<p>[[+introtext:stripString=`<p>`:stripString=`</p>`]]</p>

<blockquote class="ui [[+size]] [[+layout_type]] quote">
    <p>[[+quote:nl2br]]</p>
    [[+cite:notempty=`<footer>[[+cite]]</footer>`]]
</blockquote>

[[+segment_type:notempty=`
<div class="ui [[+padding]] [[+alignment]] [[+segment_type]] [[+background]] segment">
    [[+content]]
</div>
`:empty=`
    [[+content]]
`]]

[[[[+content:contains=`<table`:then=`loadAssets? &component=`table``]]]]

[[getVimeoData? &videoURL=`[[+video]]`]]

<div class="ui [[+aspect_ratio]] video embed"
     data-source="vimeo"
     data-id="[[+vimeoID]]"
     data-icon="[[+button_size:stripString=`medium`]] video play"
     [[+embed_on_click:is=`1`:then=`data-placeholder="https://i.vimeocdn.com/video/[[+vimeoThumbID]]_[[+img_size:default=`720`]].[[+img_type:default=`webp`]]"`]]>
</div>

<div class="ui [[+aspect_ratio]] video embed"
     data-source="youtube"
     data-id="[[+video]]"
     data-icon="[[+button_size:stripString=`medium`]] video play"
     [[+embed_on_click:is=`1`:then=`data-placeholder="[[+video:getYoutubeThumb=`[[+img_type:default=`webp`]]`]]"`]]>
</div>

{
    "@type": "BreadcrumbList",
    "itemListElement": [
        [[+crumbs]]
    ]
},

{
    "@type": "FAQPage",
    "mainEntity": [
        [[cbGetFieldContent:clipString=`-1`?
            &field=`[[++romanesco.cb_field_faq_id]]`
            &tpl=`faqDataRow`
            &wrapTpl=`rawRows`
        ]]
    ]
},

{
    "@type" : "Organization",
    "name" : "[[++site_name]]",
    "url" : "[[++site_url]]",
    "logo" : "[[++site_url:clipString=`-1`]][[++logo_path]]",
    "contactPoint" : [{
        "@type" : "ContactPoint",
        "telephone" : "[[++client_phone]]",
        "email" : "[[++client_email]]",
        "contactType" : "Customer service"
    }]
},

[[*fb_autoresponder_message]]

&ajaxuploadFieldname=`[[+name]]`
&ajaxuploadTarget=`../uploads/forms/`
&ajaxuploadUid=`[[+name]]`
&ajaxuploadAllowOverwrite=`0`

[[+form_id]]

[[cbGetFieldContent?
    &resource=`[[+id]]`
    &field=`22`
    &tpl=`fbFormID`
]]

&mathField=`fb[[*id]]-math`
&mathMaxRange=`[[+math_min_range]]`
&mathMaxRange=`[[+math_max_range]]`
&mathOp1Field=`fb[[*id]]-op1`
&mathOp2Field=`fb[[*id]]-op2`
&mathOperatorField=`fb[[*id]]-operator`

[[!renderResources?
    &parents=`-1`
    &resources=`[[+form_id]]`
]]

_1,_2,_3,_4,_5,_6,_7,_8,_9

<input class="[[+button_size:empty=`[[+form_size]]`]] [[+button_type]] [[+button_alignment]] ui button"
       type="submit"
       name="submit-[[*alias]]"
       value="[[*fb_submit_button:default=`[[%formblocks.form.submit_button]]`]]">

[[++romanesco.assets_version_css:replace=`.==`:prepend=`.`:toPlaceholder=`cache_buster_css`]]
[[++romanesco.assets_version_js:replace=`.==`:prepend=`.`:toPlaceholder=`cache_buster_js`]]
[[++romanesco.favicon_version:replace=`.==`:prepend=`.`:toPlaceholder=`cache_buster_favicon`]]

[[+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: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: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);`]]

[[+load_google_fonts:notempty=`
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
`]]
[[+load_critical_css:notempty=`
<link rel="preload" href="[[*critical_css_uri:replace=`.css==[[+cache_buster_css]].css`]]" as="style">
<link rel="preload" href="/[[++romanesco.semantic_css_path]]/backgrounds[[+minify]].css" as="style">
`]]
[[++logo_path:notempty=`
<link rel="preload" href="[[++logo_path]]" as="image" [[++logo_path:contains=`.svg`:then=`type="image/svg+xml"`]]>
`]]

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

Minor Second (1.067)==1.067||
Major Second (1.125)==1.125||
Minor Third (1.2)==1.2||
Major Third (1.25)==1.25||
Diminished Fourth (1.28)==1.28||
Perfect Fourth (1.333)==1.333||
Major Fourth (1.364)==1.364||
Aug Fourth (1.414)==1.414||
Perfect Fifth (1.5)==1.5||
Minor Sixth (1.6)==1.6||
Golden Ratio (1.618)==1.618

[[Rowboat?
    &table=`modx_site_templates`
    &tpl=`includedTemplatesRow`
    &where=`{ "id":"[[+templateid]]" }`
    &uid=`[[+id]]_[[+idx]]`
]]

<tr class="top aligned">
    <td>
        <div class="key">[[+key]]</div>
        <div class="meta"><em>[[+value:replace=`,==, `]]</em></div>
    </td>
    <td>[[+label]]</td>
    <td>[[+description]]</td>
</tr>

[[+template:htmlent:replace=`[[==[[`:replace=`]]==]]`:replace=``==``]]
[[+properties:htmlent:replace=`[[==[[`:replace=`]]==]]`:replace=``==``]]
[[+settings:htmlent:replace=`[[==[[`:replace=`]]==]]`:replace=``==``]]

[[+snippet:htmlent:replace=`[[==[[`:replace=`]]==]]`:replace=``==``]]

[[+plugincode:htmlent:replace=`[[==[[`:replace=`]]==]]`:replace=``==``]]

[[+content:htmlent:replace=`[==[`:replace=`]==]`:replace=``==``]][[+template:htmlent:replace=`[==[`:replace=`]==]`:replace=``==``]]

<table class="ui basic very compact table">
    <tr>
        <td class="six wide"><strong>Name:</strong></td>
        <td>[[+name]]</td>
    </tr>
    <tr>
        <td class="six wide"><strong>Key:</strong></td>
        <td>[[+parent_properties.key]]</td>
    </tr>
    <tr>
        <td class="six wide"><strong>Type:</strong></td>
        <td>[[+input]]</td>
    </tr>
</table>

<td class="[[+priority:eq=`low`:then=`disabled`]] [[+note:contains=`[[+modx.user.username]]`:then=`warning`:else=``]] [[+priority:eq=`high`:then=`negative`]]">[[+note]]</td>

[[Switch:toPlaceholder=`indicator_class_[[+idx]]`?
    &get=`[[+alias]]`
    &c1=`stable`        &do1=`positive`
    &c2=`successful`    &do2=`positive`
    &c3=`problematic`   &do3=`negative`
    &c4=`expired`       &do4=`warning`
    &default=``
]]
<tr>
    <td class="[[+indicator_class_[[+idx]]]]">
        <svg class="ui mini icon image" viewBox="0 0 100 100">
            <use xlink:href="[[~[[*id]]? &scheme=`full`]]#status-[[+alias]]"></use>
        </svg>
    </td>
    <td>[[+name]]</td>
    <td>[[+description]]</td>
</tr>

[[svgSanitize?
    &file=`assets/components/romanescobackyard/icons/status/[[+alias]].svg`
    &title=`[[+name]]`
    &toSymbol=`1`
]]

[[Time]]

[[+modx.user.id]]

<meta property="og:image" content="[[++site_url:clipString=`-1`]][[+url]]" />
[[+width:isnot=`0`:then=`<meta property="og:image:width" content="[[+width]]" />`]]
[[+height:isnot=`0`:then=`<meta property="og:image:height" content="[[+height]]" />`]]

[[+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: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) [[+scale]]vw,
                     [[+scale]]vw"
     [[+lazy]]src="[[+url]]"
     [[+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=`[[+pagetitle]]`: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]]"
     [[+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=`[[+pagetitle]]`: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>

[[+src:pthumb=`[[+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`

    [[$imgResponsiveScaleTheme]]

    &default=`51`
]]

<div class="[[+classes]]">
    [[+person_jobtitle:notempty=`<span property="jobTitle" typeof="Text">[[+person_jobtitle]]</span> [[+organization_name:notempty=`at`]]`]]
    [[+organization_url:notempty=`<a href="[[+organization_url]]" target="_blank">`]]
    [[+organization_name:notempty=`<span property="publisher" typeof="Organization">[[+organization_name]]</span>`]]
    [[+organization_url:notempty=`</a>`]]
</div>

<div class="name" property="author" typeof="Person">
    [[+person_firstname:empty=`[[+person_fullname]]`]] [[+person_lastname]]
</div>

<div class="ui star rating"
     data-rating="[[+rating_value]]"
     data-max-rating="5"
     property="reviewRating"
     typeof="https://schema.org/Rating">
    <span property="ratingValue">[[+rating_value]]</span>
</div>

<link rel="apple-touch-icon" sizes="180x180" href="[[++romanesco.favicon_path]]/apple-touch-icon[[+cache_buster_favicon]].png">
<link rel="icon" type="image/png" sizes="32x32" href="[[++romanesco.favicon_path]]/favicon-32x32[[+cache_buster_favicon]].png">
<link rel="icon" type="image/png" sizes="16x16" href="[[++romanesco.favicon_path]]/favicon-16x16[[+cache_buster_favicon]].png">
<link rel="manifest" href="[[++romanesco.favicon_path]]/site.webmanifest">
<link rel="mask-icon" href="[[++romanesco.favicon_path]]/safari-pinned-tab[[+cache_buster_favicon]].svg" color="#[[++favicon_theme_color:empty=`[[++theme_color_primary]]`]]">
<link rel="shortcut icon" href="[[++romanesco.favicon_path]]/favicon[[+cache_buster_favicon]].ico">
<meta name="theme-color" content="#[[++favicon_theme_color:empty=`[[++theme_color_primary]]`]]">
<meta name="msapplication-TileColor" content="#[[++favicon_tile_color:empty=`[[++theme_color_primary]]`]]">
<meta name="apple-mobile-web-app-title" content="[[++favicon_app_title:empty=`[[++site_name]]`]]">
<meta name="application-name" content="[[++favicon_app_title:empty=`[[++site_name]]`]]">

<a class="brand logo [[+classes]]" href="[[~[[++site_start]]]]" title="[[%romanesco.menu.logo_title]]">[[++site_name]]</a>

<script>
    window.addEventListener('DOMContentLoaded', function() {
        var [[+var]] = new Swiper ('#[[+id]].swiper-container', {
            init: [[+init]],
            resizeObserver: true,
            slidesPerView: [[+cols]],
            slidesPerGroup: [[+slides_to_scroll]],
            spaceBetween: [[+spacing]],
            watchOverflow: [[+overflow]],
            loop: [[+loop]],
            freeMode: [[+free]],
            centeredSlides: [[+center]],
            autoHeight: [[+auto_height]],
            autoplay: [[+autoplay]],
            keyboard: [[+keyboard]],
            effect: '[[+transition]]',
            navigation: {
                nextEl: '.[[+id]].swiper-button-next',
                prevEl: '.[[+id]].swiper-button-prev',
            },
            pagination: {
                el: '.[[+id]].swiper-pagination',
                type: '[[+pagination]]',
                clickable: [[+clickable]],
            },
            [[+breakpoints]]
            [[+effects]]
        });
        [[+init_lightbox]]

        // Update lazy load with each new slide
        [[+var]].on('slideChange', function () {
            lazyLoadInstance.update();
        });
    });
</script>

<script>
    window.addEventListener('DOMContentLoaded', function() {
        // Prepare container for Swiper usage
        function create[[+var]](container) {
            container.addClass('swiper-container');
            container
                .find('.nested.overview')
                .addClass('swiper-wrapper')
                .removeClass('stackable')
                .removeClass('doubling')
            ;
            container
                .find('.gallery')
                .addClass('swiper-wrapper')
                .removeClass('stackable')
                .removeClass('doubling')
            ;
            container
                .find('.swiper-wrapper-mobile')
                .addClass('swiper-wrapper')
            ;
            container
                .find('.swiper-wrapper > *')
                .addClass('swiper-slide')
            ;

            return new Swiper ('#[[+id]].swiper-container', {
                init: [[+init]],
                slidesPerView: [[+cols]],
                slidesPerGroup: [[+slides_to_scroll]],
                spaceBetween: [[+spacing]],
                loop: [[+loop]],
                freeMode: [[+free]],
                centeredSlides: [[+center]],
                autoHeight: [[+auto_height]],
                autoplay: [[+autoplay]],
                effect: '[[+transition]]',
                navigation: {
                    nextEl: '.[[+id]].swiper-button-next',
                    prevEl: '.[[+id]].swiper-button-prev',
                },
                pagination: {
                    el: '.[[+id]].swiper-pagination',
                    type: '[[+pagination]]',
                    clickable: [[+clickable]],
                },
                [[+effects]]
            });
        }

        // Clone original container
        // Life saving SO question: https://stackoverflow.com/questions/921290/
        let mobile[[+var]] = document.querySelector('#[[+id]]').cloneNode( true );
        let desktop[[+var]] = document.querySelector('#[[+id]]').cloneNode( true );
            desktop[[+var]].setAttribute('id','[[+id]]-original');

        MQ.addQuery(
            {
                context: ['mobile'],
                match: function() {

                    // Make sure the original container is in place
                    $('#[[+id]]-original').replaceWith(mobile[[+var]]);

                    // Initialize Swiper
                    let [[+var]] = create[[+var]]($('#[[+id]].swiper-container-mobile'));

                    // Update lazy load with each new slide
                    [[+var]].on('slideChange', function () {
                        lazyLoadInstance.update();
                    });
                },
                unmatch: function() {

                    // Revert to default layout with cloned container
                    $('#[[+id]].swiper-container-mobile').replaceWith(desktop[[+var]]);
                }
            }
        );
    });
</script>

<li class="search">
    <a href="#search-fullscreen">
        <i class="icon search"></i>
        <span class="hidden-md hidden-lg">[[%bootquest.nav.search_text]]</span>
    </a>
</li>

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

<a class="active item" href="[[+link]]">[[+text]]</a>

<span class="label label-info">[[+item]]</span>

--- Select client ---==||
[[getResources?
    &parents=`[[++romanesco.client_container_id]]`
    &tpl=`@INLINE [[+pagetitle]]==[[+id]]`
    &outputSeparator=`||`
    &showHidden=`1`
    &showUnpublished=`1`
    &limit=`99`
    &sortBy=`menuindex`
    &sortDir=`ASC`
]]

--- [[+title]] ---==||
[[FormItCountryOptions?
    &tpl=`tvSelectCountryRow`
    &optGroupTpl=`tvSelectCountryOptGroup`
    &prioritized=`[[+prioritized]]`
    &useIsoCode=`[[+useIsoCode]]`
    &outputSeparator=`||`
]]

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

[[FibonacciSequence?
    &limit=`[[+limit]]`
    &start=`[[+start]]`
    &delimiter=`[[+delimiter]]`
]]

System default ([[#[[++global_footer_id:empty=`0`]].pagetitle:empty=`Not set!`]])==default||
[[pdoResources?
    &parents=`[[++romanesco.footer_container_id]]`
    &tpl=`@INLINE [[+pagetitle]]==[[+id]]`
    &outputSeparator=`||`
    &limit=`0`
    &showHidden=`0`
    &showUnpublished=`1`
    &sortBy=`menuindex`
    &sortDir=`ASC`
]]

System [email protected]||
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||
-----==0||
[[getResources:append=`||`?
    &parents=`[[getContextSetting:empty=`[[++romanesco.global_backgrounds_id]]`? &context=`[[*context_key]]` &setting=`romanesco.global_backgrounds_id`]]`
    &limit=`0`
    &tpl=`@INLINE [[+pagetitle]]==[[+id]]`
    &outputSeparator=`||`
    &showHidden=`0`
    &showUnpublished=`1`
    &where=`[{"template:=":"27"},{"uri:LIKE":"%/[[*context_key]]/%"}]`
    &tvFilters=`background_availability==%[[+availability]]%`
    &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=`0`
    &showUnpublished=`1`
    &where=`{"template:=":"27"}`
    &tvFilters=`background_availability==%[[+availability]]%`
    &sortBy=`menuindex`
    &sortDir=`ASC`
]]

[[+firstOption:after=`==||`]][[migxLoopCollection?
    &packageName=`romanescobackyard`
    &classname=`[[+className]]`
    &tpl=`[[+rowTpl]]`
    &outputSeparator=`||`
    &where=`{"key":"[[+inputOptionKey]]"}`
    &sortConfig=`[{"sortby":"[[+sortBy]]","sortdir":"[[+sortDir]]"}]`
]]

--- Select project ---==||
[[getResources?
    &parents=`[[++romanesco.portfolio_container_id]]`
    &tpl=`@INLINE [[+pagetitle]]==[[+id]]`
    &outputSeparator=`||`
    &showHidden=`1`
    &showUnpublished=`1`
    &limit=`99`
    &sortBy=`menuindex`
    &sortDir=`ASC`
]]

--- Select team member ---==||
[[getResources?
    &parents=`[[++romanesco.team_container_id]]`
    &tpl=`@INLINE [[+pagetitle]]==[[+id]]`
    &outputSeparator=`||`
    &showHidden=`1`
    &showUnpublished=`1`
    &limit=`99`
    &sortBy=`menuindex`
    &sortDir=`ASC`
]]

--- Select testimonial ---==||
[[getResources?
    &parents=`[[++romanesco.testimonial_container_id]]`
    &tpl=`@INLINE [[+pagetitle]]==[[+id]]`
    &outputSeparator=`||`
    &showHidden=`1`
    &showUnpublished=`1`
    &limit=`99`
    &sortBy=`menuindex`
    &sortDir=`ASC`
]]

<span class="ui label">[[+tag]]</span>

<a class="ui label" href="[[+uri]]">[[+tag]]</a>

<div class="ui [[+active:eq=`1`:then=`active`]] label">
    [[+tag]]
    <span class="detail">[[+cnt]]</span>
</div>

<a class="ui [[+active:eq=`1`:then=`active`]] label" href="[[+uri]]">
    [[+tag]]
    <span class="detail">[[+cnt]]</span>
</a>

[[!TaggerGetTags:contains=`[[+tag]]`:then=`active`:toPlaceholder=`active_state`?
    &groups=`2`
    &resources=`[[*id]]`
    &target=`[[*parent]]`
    &rowTpl=`rawTag`
]]
<a class="ui [[+active_state]] label" href="[[+uri]]">
    [[+tag]]
    <span class="detail">[[+cnt]]</span>
</a>

<i class="[[+tag]] flag"></i>

<span class="ui label">
    <i class="[[+icon_class]] icon"></i>
    [[+tag]]
</span>

<a class="ui label with tooltip onclick"
   data-title="[[+title:htmlent]]"
   data-content="[[+content:stripTags:htmlent]]"
   data-variation="">
    [[+tag:empty=`[[+tags:renderInputOption]]`]]
</a>