Moving up to the level of atoms, things are still very much generic

No preview available.

A reusable icon button for linking to social media channels. This element is accompanied by the romanesco_social_connections table and a CMP, for keeping a customized list of channels.

No preview available.

[[+name:lcase:replace=` ==`:toPlaceholder=`channel`]]
[[+client_type:empty=`[[++client_type]]`:toPlaceholder=`entity`]]
<a class="ui [[+classes]] icon button [[+channel]]"
   title="[[+title:empty=`[[%romanesco.social.connect_[[+channel]]_[[+entity]]]]`]]"
   target="_blank"
   href="[[+url:empty=`[[++social_[[+channel]]]]`]]">
    <i class="[[+icon:empty=`[[+channel]]`]] icon"></i>
</a>

A reusable icon button for sharing on social media platforms. This element is accompanied by the romanesco_social_sharing table and a CMP, for keeping a customized list of sharing options.

No preview available.

[[+name:lcase:replace=` ==`:toPlaceholder=`channel`]]
<a class="ui [[+classes]] icon button [[+channel]]"
   title="[[+title:empty=`[[%romanesco.social.share_[[+channel]]]]`]]"
   target="_blank"
   href="[[+url]]">
    <i class="[[+icon:empty=`[[+channel]]`]] icon"></i>
</a>

No preview available.

<a class="circular [[+classes]] ui button facebook icon"
   title="[[+title:empty=`[[%romanesco.social.connect_facebook_[[++client_type]]]]`]]"
   target="_blank"
   href="[[+account:empty=`[[++social_facebook]]`]]"
   property="sameAs">
    <i class="facebook f icon"></i>
</a>

No preview available.

<a class="circular [[+classes]] ui button github icon"
   title="[[+title:empty=`[[%romanesco.social.connect_github_[[++client_type]]]]`]]"
   target="_blank"
   href="[[+account:empty=`[[++social_github]]`]]"
   property="sameAs">
    <i class="github icon"></i>
</a>

No preview available.

<a class="circular [[+classes]] ui button instagram icon"
   title="[[+title:empty=`[[%romanesco.social.connect_instagram_[[++client_type]]]]`]]"
   target="_blank"
   href="https://instagram.com/[[+account:empty=`[[++social_instagram]]`]]"
   property="sameAs">
    <i class="instagram icon"></i>
</a>

No preview available.

<a class="circular [[+classes]] ui button linkedin icon"
   title="[[+title:empty=`[[%romanesco.social.connect_linkedin_[[++client_type]]]]`]]"
   target="_blank"
   href="[[+account:empty=`[[++social_linkedin]]`]]"
   property="sameAs">
    <i class="linkedin icon"></i>
</a>

No preview available.

<a class="circular [[+classes]] ui button pinterest icon"
   title="[[+title:empty=`[[%romanesco.social.connect_pinterest_[[++client_type]]]]`]]"
   target="_blank"
   href="[[+account:empty=`[[++social_pinterest]]`]]"
   property="sameAs">
    <i class="pinterest icon"></i>
</a>

No preview available.

<a class="circular [[+classes]] ui button twitter icon"
   title="[[+title:empty=`[[%romanesco.social.connect_twitter_[[++client_type]]]]`]]"
   target="_blank"
   href="https://twitter.com/[[+account:empty=`[[++social_twitter]]`]]"
   property="sameAs">
    <i class="twitter icon"></i>
</a>

No preview available.

<a class="circular [[+classes]] ui button whatsapp icon"
   title="[[+title:empty=`[[%romanesco.social.connect_whatsapp_[[++client_type]]]]`]]"
   target="_blank"
   href="https://wa.me/[[+account:empty=`[[++social_whatsapp]]`]][[+text:empty=`[[++social_whatsapp_text]]`:prepend=`?text=`:htmlent]]"
   property="sameAs">
    <i class="whatsapp icon"></i>
</a>

No preview available.

<a class="circular [[+classes]] ui button youtube icon"
   title="[[+title:empty=`[[%romanesco.social.connect_youtube_[[++client_type]]]]`]]"
   target="_blank"
   href="[[+account:empty=`[[++social_youtube]]`]]"
   property="sameAs">
    <i class="youtube icon"></i>
</a>

No preview available.

<a class="circular [[+classes]] ui button envelope icon"
   title="[[+title:empty=`[[%romanesco.social.share_email]]`]]"
   href="mailto:?subject=[[*longtitle:empty=`[[*pagetitle]]`:htmlent]]&body=[[%romanesco.social.share_email_body:htmlent]]%0D%0A%0D%0A[[~[[*id]]? &scheme=`full`]]">
    <i class="envelope icon"></i>
</a>

No preview available.

<a class="circular [[+classes]] ui button facebook icon"
   title="[[+title:empty=`[[%romanesco.social.share_facebook]]`]]"
   target="_blank"
   href="https://www.facebook.com/sharer/sharer.php?u=[[!++site_url]][[*uri]]">
    <i class="facebook f icon"></i>
</a>

No preview available.

<a class="circular [[+classes]] ui button linkedin icon"
   title="[[+title:empty=`[[%romanesco.social.share_linkedin]]`]]"
   target="_blank"
   href="https://www.linkedin.com/shareArticle?mini=true&url=[[!++site_url]][[*uri]]&title=[[*longtitle:empty=`[[*pagetitle]]`]]&summary=[[*description]]&source=[[!++site_url]][[*uri]]">
    <i class="linkedin icon"></i>
</a>

No preview available.

<a class="circular [[+classes]] ui button pinterest icon"
   title="[[+title:empty=`[[%romanesco.social.share_pinterest]]`]]"
   target="_blank"
   href="https://pinterest.com/pin/create/button/?url=[[!++site_url]][[*uri]]&description=[[*description]]&media=[[++site_url]][[*social-sharing-modx_pinterest_img]]">
    <i class="pinterest icon"></i>
</a>

No preview available.

<a class="circular [[+classes]] ui button twitter icon"
   title="[[+title:empty=`[[%romanesco.social.share_twitter]]`]]"
   target="_blank"
   href="https://twitter.com/intent/tweet?text=[[*longtitle:empty=`[[*pagetitle]]`]]&url=[[!++site_url]][[*uri]]&via=[[++social_twitter]]">
    <i class="twitter icon"></i>
</a>

No preview available.

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

Simple <i> tag with font icon.

No preview available.

Loads an SVG, either inline or in an <img> tag.

No preview available.

[[$svg?
    &classes=`[[+icon_size]] [[+classes:empty=`ui image`]]`
    &alt=`[[+alt:empty=`[[+pagetitle]]`]]`
    &uid=`[[+unique_idx]]`
]]

Responsive content image with an optional caption.

No preview available.

<figure [[+id:prepend=`id="`:append=`"`]] class="ui [[+classes]] content image">
    [[$imgResponsive? &uid=`[[+url]]`]]
    [[[[If?
        &subject=`[[+credits]][[+caption]]`
        &operator=`notempty`
        &then=`$imageBasicCaption? &uid=`[[+uid]]``
    ]]]]
</figure>

The figcaption element containing the caption and/or image credits.

No preview available.

<figcaption class="ui equal width [[+classes]] grid">
    [[+caption:stripTags=`<a>,<em>,<strong>,<br>`:prepend=`<span class="left aligned content column">`:append=`</span>`]]
    [[+credits:notempty=`<span class="compact meta credits column" title="[[+credits:stripTags]]"><i class="copyright outline icon"></i></span>`]]
</figcaption>

Similar to iconSVG, but this one is used inside Image CBs, when given image is an SVG.

No preview available.

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

No preview available.

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

No preview available.

[[If?
    &subject=`[[+segment_type]]`
    &operator=`notempty`
    &then=`
    <div class="ui [[+padding]] [[+alignment]] [[+segment_type]] [[+background:setBackground]] text segment">
        [[+content]]
    </div>
    `
    &else=`[[+content]]`
]]

[[[[If?
    &subject=`[[+content]]`
    &operator=`contains`
    &operand=`</table>`
    &then=`loadAssets? &component=`table``
]]]]

Render Markdown content as HTML.

No preview available.

Play a local video file in the browser. Multiple sources can be provided to maximize compatibility. The browser starts trying to play files from the top, until a compatible format is found.

No preview available.

<video class="ui [[+lazy_load:eq=`1`:then=`lazy`]] [[+options:replace=`,== `]] video image"
       [[+width:notempty=`width="[[+width]]"`]]
       [[+height:notempty=`height="[[+height]]"`]]
       [[+thumb:notempty=`poster="[[pthumb:imgOptimizeThumb? &input=`[[+thumb]]` &options=`w=[[+width:empty=`[[++max_thumb_width]]`]]&q=[[++romanesco.img_quality]]&zc=1`]]"`]]
       controls>
    [[+files]]
</video>

Source row for video element. Recommended to stick to .webm or .mp4 files when possible.

No preview available.

Embed Vimeo video. It has the option to load the video after clicking the play button, to avoid heavy downloads on page load. This is enabled by default.

No preview available.

[[getVimeoData?
    &videoURL=`[[+video]]`
    &imgSize=`[[+img_size:default=`720`]]`
    &imgType=`[[+img_type:default=`webp`]]`
]]
[[helloConsentFriend?
    &service=`vimeo`
    &true=`consent`
    &false=``
    &toPlaceholder=`consent_vimeo`
]]

<div class="ui [[+aspect_ratio]] video embed [[+consent_vimeo]]"
     data-source="vimeo"
     data-id="[[+vimeoID]]"
     data-icon="[[+button_size:stripString=`medium`]] play circle outline"
     [[+embed_on_click:is=`1`:then=`
     data-placeholder="[[+vimeoThumb]]"
     data-alt="[[+img_alt:default=`Video thumbnail`]]"
     `]]>
    [[+consent_vimeo:notempty=`<div class="pending"><p>[[%romanesco.consent.video_embed? &service=`Vimeo`]]</p></div>`]]
</div>

[[loadAssets? &component=`embed`]]

Embed Youtube video. It has the option to load the video after clicking the play button, to avoid heavy downloads on page load. This is enabled by default.

No preview available.

[[getYoutubeThumb?
    &videoID=`[[+video]]`
    &imgSize=`[[+img_size:default=`720`]]`
    &imgType=`[[+img_type:default=`webp`]]`
]]
[[helloConsentFriend?
    &service=`youtube`
    &true=`consent`
    &false=``
    &toPlaceholder=`consent_youtube`
]]

<div class="ui [[+aspect_ratio]] video embed [[+consent_youtube]]"
     data-source="youtube"
     data-id="[[+video]]"
     data-icon="[[+button_size:stripString=`medium`]] play circle outline"
     [[+embed_on_click:is=`1`:then=`
     data-placeholder="[[+youtubeThumb]]"
     data-alt="[[+img_alt:default=`Video thumbnail`]]"
     `]]>
    [[+consent_youtube:notempty=`<div class="pending"><p>[[%romanesco.consent.video_embed? &service=`Youtube`]]</p></div>`]]
</div>

[[loadAssets? &component=`embed`]]

No preview available.

Not yet implemented.

No preview available.

None=
[[migxLoopCollection:empty=`No categories defined=0`?
    &packageName=`romanescobackyard`
    &classname=`FractalFarming\Romanesco\Model\Option`
    &tpl=`@CODE:[[+name]]=[[+id]]`
    &outputSeparator=`
    `
    &where=`{"key":"faq_category"}`
    &sortConfig=`[{"sortby":"pos","sortdir":"ASC"}]`
]]

No preview available.

No segment (disables all settings below)=
Fitted segment (without border or padding)=fitted
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

No preview available.

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

Defines the class names for individual gallery items. In ContentBlocks, this is presented to the user as Caption type because this setting mostly affects how captions are being displayed

No preview available.

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

DEPRECATED.

No preview available.

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

Select accepted form upload file types. Outputs mime types (for AjaxUpload compatibility). Image and video formats are hardcoded, but other formats are pulled from the Content Types list.

No preview available.

JPEG=image/jpeg
GIF=image/gif
PNG=image/png
WebP=image/webp
AVIF=image/avif
HEIF=image/heif
MPEG=video/mpeg
MP4=video/mp4
WebM=video/webm
[[migxLoopCollection?
    &classname=`MODX\Revolution\modContentType`
    &tpl=`@CODE:[[+name]]=[[+mime_type]]_[[+id]]`
    &outputSeparator=`
`
]]

No preview available.

If label position is explicitly defined in the form resource CB input, then that setting is ALWAYS applied. If set to 'inherit', then the setting from the main Form CB field is respected.

No preview available.

This defines how the fields and labels are arranged within the form. Options are Vertical, Horizontal or Inline. Please note: inline in this case means the form is designated as equal width.

No preview available.

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

No preview available.

[[getResources:prepend=`---=
`?
    &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:prepend=`---=
`?
    &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`
]]

No preview available.

Left=left aligned
Center=center aligned
Right=right aligned
Justified=justified
Centered=centered
Middle=middle aligned
Bottom=bottom aligned
Stretched=stretched

No preview available.

[[*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]]

No preview available.

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

No preview available.

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

No preview available.

Infinite loop=loop
Show previous / next arrows=arrows
Keyboard control=keyboard
Free scrolling=free
Center mode=center
Auto height=autoHeight
Autoplay=autoplay

No preview available.

Inside slider - Regular=inside
Inside slider - Stretched=inside stretched
Outside - Close to slider=outside compact
Outside - Near edge of parent container=outside
Outside - Near edge of parent - Stretched=outside stretched

No preview available.

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

No preview available.

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

No preview available.

Text only=overviewRowBasic
Text only - Card=overviewRowBasicCard
Text only - Link card=overviewRowBasicLinkCard
Text 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

No preview available.

Article regular=overviewRowArticleBasic
Article regular - Card=overviewRowArticleBasicCard
Article image=overviewRowArticleImageBasic
Article image - Card=overviewRowArticleImageTopCard
Article compact=overviewRowArticleCompact
Article quote=overviewRowArticleQuote

No preview available.

Team regular=overviewRowPersonBasic
Team regular - Card=overviewRowPersonBasicCard
Team tile=overviewRowPersonTile
Team compact=overviewRowPersonCompact

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

[[getResources?
    &parents=`[[getContextSetting? &context=`[[*context_key]]` &setting=`romanesco.publication_container_id`]]`
    &tpl=`@INLINE [[+pagetitle]] ([[+id]])=[[+id]]`
    &limit=`0`
    &showHidden=`1`
    &showUnpublished=`1`
    &sortBy=`publishedon`
    &sortDir=`DESC`
]]

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

Full width (fluid)=fluid
Standard width=
Slightly narrower - Normal text=tightened
Slightly narrower - Large text=tightened text
Optimal reading width - Normal text=conventional text
Optimal reading width - Large text=text

No preview available.

[[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.mini.mini.icons,linkedin-in`
]]

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

{
    "@type" : "Person",
    "name" : "[[#[[+author_id]].pagetitle]]",
    "jobTitle" : "[[#[[+author_id]].person_jobtitle]]",
    "url" : "[[~[[+author_id]]]]"
},

No preview available.

{
    "@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"
    }]
},

No preview available.

{
    "@type" : "Person",
    "name" : "[[#[[+person_id]].pagetitle]]",
    "jobTitle" : "[[#[[+person_id]].person_jobtitle]]",
    "url" : "[[~[[+person_id]]]]"
},

No preview available.

Run the cbGetFieldContent snippet to find out which form is selected on a specific resource.

No preview available.

<div class="filepond-wrapper">
    <input id="filepond-[[+uid]]" class="filepond" type="file" multiple>
    [[!+fb[[*id]].error.[[+uid]]]]
</div>

No preview available.

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

No preview available.

<a href="[[~[[+form_host.id:empty=`[[*id]]`]]]]#[[+name]]">
    [[+required_text:empty=`[[%formblocks.validation.required_text_[[+type:default=`empty`]]]]`]]
</a>

HTML markup for frontend validation errors.

No preview available.

A dynamic list of hooks, to be executed after the form passes validation. Part of the FormIt calls in fbForm and fbFormAjax.

No preview available.

[[cbHasField? &field=`[[++formblocks.cb_input_file_multiple_id]]` &then=`AjaxUpload2Formit,AjaxUploadAttachments,`]]
[[cbGetFieldContent:notempty=`AjaxUploadRequired,`? &field=`[[++formblocks.cb_input_file_multiple_id:empty=`-1`]]` &fieldSettingFilter=`field_required==1` &limit=`1`]]
[[cbHasField? &field=`[[++formblocks.cb_input_file_id]]` &then=`fbProcessUploads,`]]
[[cbHasField? &field=`[[++formblocks.cb_math_question_id]]` &then=`math,`]]
[[++romanesco.dev_mode:isnot=`1`:then=`[[++formblocks.antispam_hooks:append=`,`]]`]]
[[+save_form:eq=`1`:then=`FormItSaveForm,`]]
[[*fb_hooks:append=`,`]]
[[If? &subject=`[[*fb_email_to_dynamic:empty=`[[*fb_email_to]]`]]` &operator=`notempty` &then=`email,`]]
[[*fb_store_attachments:replace=`default==[[++formblocks.store_attachments]]`:isnot=`1`:then=`AjaxUploadRemove,`]] [[- BUG: gives warning if setting is off and AjaxUpload is not installed.]]
[[*fb_autoresponder_toggle:eq=`1`:then=`FormItAutoResponder,`]]
[[++formblocks.formsource:eq=`1`:then=`formsource_reset,`]]
[[*fb_posthooks:append=`,`]]

Return raw value of form_id placeholder from a CB form. Used as tpl by cbGetFieldContent in fbGetFormID.

No preview available.

A dynamic list of pre-hooks, to be executed on page load. Part of the FormIt calls in fbForm and fbFormAjax.

No preview available.

[[cbHasField? &field=`[[++formblocks.cb_input_file_multiple_id]]` &then=`Formit2AjaxUpload,`]]
[[+multiple_steps:notempty=`fbSetStoredValues,`]]
[[*fb_prehooks:append=`,`]]

A dynamic list of field names marked for backend validation. Part of the FormIt calls in fbForm and fbFormAjax.

No preview available.

[[fbValidateProcessJSON? &formID=`[[*id]]`]]
[[cbHasField? &field=`[[++formblocks.cb_input_email_id]]` &then=`fb[[*id]]-email:email:required,`]]
[[cbHasField? &field=`[[++formblocks.cb_accept_terms_id]]` &then=`fb[[*id]]-accept-terms:required,`]]
[[cbHasField? &field=`[[++formblocks.cb_math_question_id]]` &then=`fb[[*id]]-math:required,`]]
[[[[If?
    &subject=`fbValidateCustomFields`
    &operator=`iselement`
    &operand=`chunk`
    &then=`$fbValidateCustomFields`
]]]][[++formblocks.honeypot_field:notempty=`,
fb[[*id]]-[[++formblocks.honeypot_field]]:blank`]]

These properties are added to the FormIt call if the Autoresponder TV is activated.

No preview available.

&fiarTpl=`[[*fb_autoresponder_template:empty=`fbAutoresponder`]]`
&fiarToField=`fb[[*id]]-email`
&fiarSender=`[[*fb_autoresponder_from:empty=`[[++emailsender]]`]]`
&fiarFrom=`[[*fb_autoresponder_from:empty=`[[++emailsender]]`]]`
&fiarFromName=`[[*fb_autoresponder_from_name:empty=`[[++site_name]]`]]`
&fiarReplyTo=`[[*fb_autoresponder_reply_to:empty=`[[++client_email:empty=`[[++emailsender]]`]]`]]`
&fiarSubject=`[[*fb_autoresponder_subject:empty=`[[%formblocks.autoresponder.subject]]`]]`

These properties are always added to the FormIt calls in fbForm and fbFormAjax.

No preview available.

&emailTpl=`[[*fb_email_template:empty=`fbEmail`]]`
&emailTo=`[[*fb_email_to_dynamic:empty=`[[*fb_email_to]]`]]`
&emailCC=`[[*fb_email_cc]]`
&emailBCC=`[[*fb_email_bcc]]`
&emailFrom=`[[*fb_email_from:empty=`[[++emailsender]]`]]`
&emailFromName=`[[*fb_email_from_name:empty=`[[++site_name]]`]]`
&emailSubject=`[[*fb_email_subject:empty=`[[%formblocks.email.subject]]`]]`
[[cbHasField?
    &field=`[[++formblocks.cb_input_email_id]]`
    &then=`&emailReplyTo=`[[+fb[[*id]]-email]]``
]]
[[If?
    &subject=`[[++formblocks.antispam_hooks]]`
    &operator=`contains`
    &operand=`spam`
    &then=`&spamEmailFields=`[[+fb[[*id]]-email]]``
]]

[[[[cbHasField?
    &field=`[[++formblocks.cb_input_file_multiple_id:empty=`-1`]]`
    &then=`$fbFileUploadProperties`
]]]]
[[cbGetFieldContent?
    &field=`[[++formblocks.cb_math_question_id:empty=`-1`]]`
    &tpl=`fbMathQuestionProperties`
]]
[[[[If?
    &subject=`[[++formblocks.antispam_hooks]]`
    &operator=`contains`
    &operand=`recaptchav3`
    &then=`$fbRecaptchaProperties`
]]]]
[[[[If?
    &subject=`[[*fb_autoresponder_toggle]]`
    &operator=`eq`
    &operand=`1`
    &then=`$fbAutoresponderProperties`
]]]]

For use as cbGetFieldContent template. Returns the AjaxUpload UIDs of all upload fields on the page.

No preview available.

These properties are added to the FormIt call if a multiple file upload field is present in the form.

No preview available.

[[cbGetFieldContent:toPlaceholder=`fb[[*id]].upload-uids`?
    &field=`[[++formblocks.cb_input_file_multiple_id:empty=`-1`]]`
    &tpl=`fbFileUploadFieldUIDs`
]]
[[cbGetFieldContent:toPlaceholder=`fb[[*id]].upload-required-uids`?
    &field=`[[++formblocks.cb_input_file_multiple_id:empty=`-1`]]`
    &tpl=`fbFileUploadFieldUIDs`
    &fieldSettingFilter=`field_required==1`
]]
&ajaxuploadTarget=`[[*fb_attachment_path:empty=`[[++formblocks.attachment_path]]`]]`
&ajaxuploadUid=`[[+fb[[*id]].upload-uids]]`
&ajaxuploadRequiredUid=`[[+fb[[*id]].upload-required-uids]]`
&ajaxuploadSanitizeFilename=`[[++formblocks.sanitize_filenames]]`
&ajaxuploadAllowOverwrite=`1`

These properties are added to the FormIt call if a Math Question CB is present in the form.

No preview available.

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

No references found.

A fbEmailProperties T fbRegister

These properties are added to the FormIt call if Recaptcha v3 is active as antispam hook.

No preview available.

The default row template for dropdown select options.

No preview available.

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

A row template for using the input options found under Manage > Project data.

No preview available.

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

A row template for dropdown options that link to a resource.

No preview available.

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

The default row template for checkbox and radio options.

No preview available.

[[+field_name_html:empty=`[[+field_name]]`:fbResetNonAlpha:fbStripAsAlias:fbPrefixOutput:toPlaceholder=`name`]]
[[+field_option:fbResetNonAlpha:toPlaceholder=`option`]]
[[!If:toPlaceholder=`checkbox_array`?
    &subject=`[[+field_type]]`
    &operator=`is`
    &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 [[+collapse_target:isnot=``:then=`collapsible`]] [[+checkbox_variant]] checkbox">
        <input type="[[+field_type]]"
               name="[[+name]][[+checkbox_array]]"
               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>

A row template for using the input options found under Manage > Project data.

No preview available.

[[!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=`is`
    &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>

A row template for options that link to a resource. These options are almost always generated dynamically, instead of being added through the form builder by the editor.

No preview available.

[[!fbStripAsAlias:fbPrefixOutput:toPlaceholder=`field_alias`? &input=`[[+field_name_html:empty=`[[+field_name]]`]]`]]
[[!If:toPlaceholder=`checkbox_array`?
    &subject=`[[+field_type]]`
    &operator=`is`
    &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>

A row template for options that let you select a tag. Initially designed to work with the Tagger extra, but should work with any tag system that outputs and placeholders.

No preview available.

[[!If:toPlaceholder=`checkbox_array`?
    &subject=`[[+field_type]]`
    &operator=`is`
    &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>

No preview available.

==||
[[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.mini.mini.icons`
]]

No preview available.

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

An overlay div to display the image credits on top of the background.

No preview available.

DEPRECATED.

No preview available.

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

DEPRECATED.

No preview available.

.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;
    }
}
`]]

No preview available.

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

No preview available.

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

Sets placeholders with version number string for CSS, JS and favicon assets.

No preview available.

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

Fetches the generated critical CSS from the file defined in critical_css_uri TV, and parses it inline.

No preview available.

<style>[[*critical_css_uri:getFileContent]]</style>
<link rel="stylesheet" href="[[++romanesco.semantic_dist_path]]/semantic[[+minify]][[+cache_buster_css]].css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="[[++romanesco.custom_css_path]]/site[[+minify]][[+cache_buster_css]].css" media="print" onload="this.media='all'">

Regular CSS links, for when critical CSS is disabled.

No preview available.

<link rel="stylesheet" href="[[++romanesco.semantic_dist_path]]/semantic[[+minify]][[+cache_buster_css]].css">
<link rel="stylesheet" href="[[++romanesco.custom_css_path]]/site[[+minify]][[+cache_buster_css]].css">

Loads jQuery from local assets.

No preview available.

<script defer src="[[++romanesco.semantic_vendor_path]]/jquery/jquery.min[[+cache_buster_js:notempty=`.371`]].js"></script>
[[$headLoadJS]]

Loads any Google fonts defined under Configuration > Presentation.

No preview available.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=[[+load_google_fonts:replace=` ==+`]]&display=swap" media="print" onload="this.media='all'">

Loads all local JS dependencies.

No preview available.

<script defer src="[[++romanesco.semantic_dist_path]]/semantic[[+minify]][[+cache_buster_js]].js"></script>
<script defer src="[[++romanesco.semantic_js_path]]/onmediaquery[[+minify]][[+cache_buster_js]].js"></script>
<script defer src="[[++romanesco.semantic_vendor_path]]/vanilla-lazyload/lazyload.min[[+cache_buster_js]].js"></script>
<script defer src="[[++romanesco.semantic_vendor_path]]/scrolldir/scrolldir.auto.min[[+cache_buster_js]].js"></script>

Loads jQuery from CDN.

No preview available.

Preload resources that the page will need first. This ensures they are available before the main rendering process, making them less likely to block the page's render, improving performance.

No preview available.

[[++romanesco.dev_mode:ne=`1`:then=`
<link rel="preconnect" href="https://cdn.jsdelivr.net">
`]]
[[++analytics_tracking_code:contains=`googletagmanager.com`:then=`
<link rel="preconnect" href="https://googletagmanager.com">
`]]
[[+load_google_fonts:notempty=`
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
`]]
[[++logo_path:notempty=`
<link rel="preload" href="[[++logo_path]]" as="image" [[++logo_path:contains=`.svg`:then=`type="image/svg+xml"`]]>
`]]

No preview available.

[[migxLoopCollection?
    &classname=`MODX\Revolution\modTemplate`
    &tpl=`includedTemplatesRow`
    &where=`{"id":"[[+templateid]]"}`
    &uid=`[[+id]]_[[+idx]]`
]]

No preview available.

[[+template:htmlent:replace=`[==[`:replace=`]==]`:replace=``==``]]
[[+properties:htmlent:replace=`[==[`:replace=`]==]`:replace=``==``]]
[[+settings:htmlent:replace=`[==[&#;`:replace=`]==]&#;`:replace=``==``]]

No preview available.

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

Table row for configuration settings table.

No preview available.

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

No preview available.

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

No preview available.

[[Switch?
    &get=`[[+alias]]`
    &c1=`todo`          &do1=`orange`
    &c2=`doing`         &do2=`yellow`
    &c3=`review`        &do3=`purple`
    &c4=`stable`        &do4=`olive`
    &c5=`successful`    &do5=`green`
    &c6=`problematic`   &do6=`red`
    &c7=`expired`       &do7=`brown`
    &default=`olive`
    &toPlaceholder=`indicator_class_[[+idx]]`
]]
<tr class="[[+indicator_class_[[+idx]]]]">
    <td>
        <svg class="ui tiny icon image" viewBox="0 0 100 100">
            <use xlink:href="[[~[[*id]]? &scheme=`full`]]#status-[[+alias]]"></use>
        </svg>
    </td>
    <td><strong>[[+name]]</strong></td>
    <td>[[+description]]</td>
</tr>

No preview available.

A plain and simple <img> tag, for situations that require a chunk tpl (inside mosquito conditionals for example). Can be lazy loaded.

No preview available.

<img [[+lazy:eq=`1`:then=`
     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"
     data-src="[[+src]]"
     class="lazy [[+classes]]"
     `:else=`
     src="[[+src]]"
     class="[[+classes]]"
     `]]
     width="[[+width]]"
     height="[[+height]]"
     alt="[[+alt:empty=`[[%romanesco.img.alt_fallback]]`:htmlent]]"
>

Row template for ImagePlus, containing properties for use in Open Graph metadata.

No preview available.

[[+width:lte=`[[+crop.width]]`:then=`[[+width]]`:else=`[[+crop.width]]`:toPlaceholder=`thumb_width`]]
[[+thumb_width:div=`[[+crop.width]]`:replace=`,==.`:mpy=`[[+crop.height]]`:round=`up`:toPlaceholder=`thumb_height`]]
<meta property="og:image" content="[[++site_url:clipString=`-1`]][[+url:imgOptimizeThumb]]" />
<meta property="og:image:width" content="[[+thumb_width]]" />
<meta property="og:image:height" content="[[+thumb_height]]" />
<meta property="og:image:alt" content="[[+alt:empty=`[[*pagetitle:append=` cover image`]]`]]" />

References the SVG file in an <img> tag, or parses it inline as <svg>. This behaviour can be changed under Configuration > Performance. Take note: lazy loaded SVGs are always parsed as <img>.

No preview available.

[[[[If?
    &subject=`[[++svg_inline]]_[[+lazy_load:default=`0`]]`
    &operator=`eq`
    &operand=`1_0`
    &then=`svgSanitize:fbResetNonAlpha? &class=`[[+classes]]` &file=`[[++base_path]][[+url]]` &title=`[[+alt:fbStripNonAlpha]]``
    &else=`$img? &class=`[[+classes]]` &lazy=`[[+lazy_load]]` &src=`[[+url]]` &width=`[[+width]]` &height=`[[+height]]` &alt=`[[+alt]]``
]]]]

Default ImagePlus tpl for overview images. It calculates srcset and sizes attributes, for loading the most appropriate thumbnail size in responsive scenarios. Also has lazy loading option.

No preview available.

[[+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=`[[+unique_idx]].srcset`
]]
<img [[+lazy]]srcset="[[+[[+unique_idx]].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]]"
/>

No preview available.

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

In case ImagePlus is not able to generate an image, this fallback image is used. You can define your own fallback images under Configuration settings. There's a setting for each variant.

No preview available.

Alternative ImagePlus tpl for overview images, with fixed height and width. Sometimes you don't want to generate all the responsive variants, for example when it's only a small avatar image.

No preview available.

[[+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]]"
/>

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

The core of most ContentBlocks images. It calculates srcset and sizes attributes, for loading the most appropriate thumbnail size in responsive scenarios. Can also be cropped and lazy loaded.

No preview available.

[[+lazy_load:eq=`1`:then=`data-`:else=``:toPlaceholder=`lazy`]]
[[++max_thumb_width:div=`[[+width]]`:replace=`,==.`:mpy=`[[+height]]`:round=`up`:toPlaceholder=`max_thumb_height`]]
[[If?
    &subject=`[[+enlarge]]`
    &operator=`contains`
    &operand=`inflated`
    &then=`80`
    &else=`[[$imgResponsiveScale?
        &layout_id=`[[+layout_id]]`
        &layout_column=`[[+layout_column]]`
        &uid=`[[+uid]]`
    ]]`
    &uid=`[[+uid]]`
    &toPlaceholder=`scale`
]]
[[responsiveImgSrcset?
    &breakpoints=`[[++romanesco.img_breakpoints]]`
    &quality=`[[++romanesco.img_quality]]`
    &src=`[[+url]]`
    &width=`[[++max_thumb_width]]`
    &uid=`[[+uid]]`
    &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:empty=`[[%romanesco.img.alt_fallback]]`:htmlent]]"
>

A responsive image element, specialized for the Gallery block.

No preview available.

[[+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:htmlent]]"
/>

A responsive image element, specialized for the Gallery with Caption block.

No preview available.

[[+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="[[+caption]]"
     `]]
     width="[[++max_thumb_width]]"
     height="[[+max_thumb_height]]"
     alt="[[+alt:htmlent]]"
>

A row template for the responsiveImgSrcset snippet, containing srcset properties for use inside an <img> tag.

No preview available.

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

A switch statement that selects the right viewport width for the img sizes attribute, based on the layout and column type of the container.

No preview available.

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

    &c_01_1=`1_main`        &do_01_1=`100`
    &c_02_1=`2_main`        &do_02_1=`66`
    &c_02_2=`2_sidebar`     &do_02_2=`33`
    &c_03_1=`3_sidebar`     &do_03_1=`33`
    &c_03_2=`3_main`        &do_03_2=`66`
    &c_33_1=`33_left`       &do_33_1=`25`
    &c_33_2=`33_main`       &do_33_2=`50`
    &c_33_3=`33_right`      &do_33_3=`25`
    &c_04_1=`4_col_1`       &do_04_1=`25`
    &c_04_2=`4_col_2`       &do_04_2=`25`
    &c_04_3=`4_col_3`       &do_04_3=`25`
    &c_04_4=`4_col_4`       &do_04_4=`25`
    &c_05_1=`5_col_1`       &do_05_1=`33`
    &c_05_2=`5_col_2`       &do_05_2=`33`
    &c_05_3=`5_col_3`       &do_05_3=`33`
    &c_06_1=`6_col_1`       &do_06_1=`50`
    &c_06_2=`6_col_2`       &do_06_2=`50`

    &c_07_1=`7_main`        &do_07_1=`100`
    &c_08_1=`8_main`        &do_08_1=`66`
    &c_08_2=`8_sidebar`     &do_08_2=`33`
    &c_09_1=`9_sidebar`     &do_09_1=`33`
    &c_09_2=`9_main`        &do_09_2=`66`
    &c_34_1=`34_left`       &do_34_1=`25`
    &c_34_2=`34_main`       &do_34_2=`50`
    &c_34_3=`34_right`      &do_34_3=`25`
    &c_10_1=`10_col_1`      &do_10_1=`25`
    &c_10_2=`10_col_2`      &do_10_2=`25`
    &c_10_3=`10_col_3`      &do_10_3=`25`
    &c_10_4=`10_col_4`      &do_10_4=`25`
    &c_11_1=`11_col_1`      &do_11_1=`33`
    &c_11_2=`11_col_2`      &do_11_2=`33`
    &c_11_3=`11_col_3`      &do_11_3=`33`
    &c_12_1=`12_col_1`      &do_12_1=`50`
    &c_12_2=`12_col_2`      &do_12_2=`50`

    &c_24_1=`24_main`       &do_24_1=`100`
    &c_32_1=`32_main`       &do_32_1=`100`

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

    &default=`51`
]]

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

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

No preview available.

[[If?
    &subject=`[[++logo_badge_path]]`
    &operator=`endswith`
    &operand=`.svg`
    &then=`<link rel="icon" type="image/svg+xml" href="[[++romanesco.favicon_path]]/icon[[+cache_buster_favicon]].svg" />`
    &else=`<link rel="icon" type="image/png" href="[[++romanesco.favicon_path]]/icon-96x96[[+cache_buster_favicon]].png" sizes="96x96" />`
]]
<link rel="icon" href="favicon[[+cache_buster_favicon]].ico" sizes="32x32"/>
<link rel="apple-touch-icon" href="[[++romanesco.favicon_path]]/apple-touch-icon[[+cache_buster_favicon]].png" sizes="180x180"/>
<meta name="apple-mobile-web-app-title" content="[[++favicon_app_title:empty=`[[++site_name]]`]]" />
<link rel="manifest" href="site.webmanifest" />

No preview available.

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

No preview available.

Get available clients and turn them into input options for use in a selection TV.

No preview available.

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

Generate a list of countries to choose from. It can display prioritized countries in a separate group at the top of the list.

No preview available.

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

Get available CTAs and turn them into input options for use in a selection TV.

No preview available.

--- Select CTA ---==@INHERIT||
[[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]]%`
]]||Disable CTA==0

Pick a number from the Fibonacci sequence. Useful for example when implementing an Agile / Scrum kind of point system.

No preview available.

Get available footers and turn them into input options for use in a selection TV.

No preview available.

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

Get available backgrounds and turn them into input options for use in a selection TV.

No preview available.

System default==@INHERIT||
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? &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? &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`
]]

Generate a list of input options, which are globally defined in a MIGXdb grid. You can narrow down the selection by appending a property set with a key name inside (eg: @ContentPurpose).

No preview available.

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

Get available projects and turn them into input options for use in a selection TV.

No preview available.

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

Get available team members and turn them into input options for use in a selection TV.

No preview available.

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

Get available testimonials and turn them into input options for use in a selection TV.

No preview available.

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

Generate a list of user groups, as defined under Access Control Lists.

No preview available.

[[+firstOption:after=`==||`]][[migxLoopCollection?
    &classname=`MODX\Revolution\modUserGroup`
    &tpl=`@CODE:[[+name]]==[[+id]]`
    &outputSeparator=`||`
    &sortConfig=`[{"sortby":"[[+sortBy]]","sortdir":"[[+sortDir]]"}]`
]]

Display prioritized countries in a separate group at the top of the dropdown.

No preview available.

Basic row template to display country names inside the dropdown.

No preview available.

Basic row template for rendering input options inside the TV.

No preview available.

Row template with description below the title, for rendering input options inside a listbox-multiple TV.

No preview available.

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

A tag item that gets bigger or smaller in size, depending on how many elements are tagged with it.

No preview available.

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

No preview available.

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

No preview available.

Atoms

a_button

buttonHrefBasic

Included patterns

Referring patterns

buttonHrefIcon

Included patterns

Referring patterns

buttonHrefOverview

Included patterns

Referring patterns

buttonSocialConnect

Included patterns

Referring patterns

buttonSocialShare

Included patterns

Referring patterns

a_btn_social

buttonSocialConnectFacebook

Included patterns

Referring patterns

buttonSocialConnectGithub

Included patterns

Referring patterns

buttonSocialConnectInstagram

Included patterns

Referring patterns

buttonSocialConnectLinkedin

Included patterns

Referring patterns

buttonSocialConnectPinterest

Included patterns

Referring patterns

buttonSocialConnectTwitter

Included patterns

Referring patterns

buttonSocialConnectWhatsapp

Included patterns

Referring patterns

buttonSocialConnectYoutube

Included patterns

Referring patterns

buttonSocialShareEmail

Included patterns

Referring patterns

buttonSocialShareFacebook

Included patterns

Referring patterns

buttonSocialShareLinkedin

Included patterns

Referring patterns

buttonSocialSharePinterest

Included patterns

Referring patterns

buttonSocialShareTwitter

Included patterns

Referring patterns

a_content

a_cont_heading

headingBasic

Always Be Curious

Included patterns

Referring patterns

headingOverview

I don't make much sense

Included patterns

Referring patterns

headingOverviewLink

Included patterns

Referring patterns

a_cont_icon

iconFont

Included patterns

Referring patterns

iconSVG

Included patterns

Referring patterns

a_cont_image

imageBasic

Included patterns