Cybflow

input example

<div cybdata="text" cybkey="Heading">Welcome to Our Website</div>

output example

input html

<section cybdata="block" cybkey="Featured Icons Section" class="featured-icons-section">
    <div cybkey="Background Image" cybdata="bg" class="featured-icons-section-background"></div>
    <div class="section-heading-wrapper">
        <div cybkey="Heading" cybdata="text" class="section-heading-large">Business Development Resources</div>
        <div cybkey="Text Area" cybdata="textarea" class="section-subheading">We provide guidance and advice to business, local government and community groups regarding economic and community development activities. Together we work towards overall enhancement of the community and the area’s business climate.</div>
    </div>
    <div cybkey="Featured Icons" cybdata="list" class="featured-icons-wrapper">
        <div class="featured-icon-item">
            <a cybkey="Url" cybdata="url" href="#" class="featured-link-block w-inline-block">
                <div cybkey="Icon" cybdata="icon" class="featured-icon"><i class="fa-solid fa-chart-line"></i></div>
                <div cybkey="Title" cybdata="text" class="featured-title-text">Enterprise Zone</div>
            </a>
        </div>
        <div class="featured-icon-item">
            <div class="featured-link-block">
                <div class="featured-icon"><i class="fa-solid fa-chart-pie"></i></div>
                <div class="featured-title-text">IL Programs</div>
            </div>
        </div>
        <div class="featured-icon-item">
            <div class="featured-link-block">
                <div class="featured-icon"><i class="fa-solid fa-comments-dollar"></i></div>
                <div class="featured-title-text">Business Opportunities</div>
            </div>
        </div>
    </div>
    <div class="buttons-wrapper">
        <a cybkey="Button" cybdata="button" href="#" class="cms-btn">
            <div cybdata="buttontext" class="button-text">More Resources</div>
        </a>
    </div>
</section>

output php

Create block template files in: /blocks/amsd/templates//strings/featured-icons-section.php

<?/* Strings Block Template for /blocks/amsd/templates/strings/featured-icons-section.php */?>
<? $DATA = strings($block->id); ?>
<section class="featured-icons-section">
    <div class="featured-icons-section-background" style="background-position: <?= json_decode($DATA['Background Image'])->config->{'background-position'} ?>; background-image: url('/image/<?= json_decode($DATA['Background Image'])->id ?>/2000');"></div>
    <div class="section-heading-wrapper">
        <div class="section-heading-large"><?= $DATA['Heading'] ?></div>
        <div class="section-subheading"><?= nl2br($DATA['Text Area']); ?></div>
    </div>
    <div class="featured-icons-wrapper">
        <? foreach (json_decode($DATA['Featured Icons']) as $k => $FEATURED_ICONS_ITEM) { ?>
        <div class="featured-icon-item">
            <a href="<?= $FEATURED_ICONS_ITEM->url ?>" class="featured-link-block w-inline-block">
                <div class="featured-icon"><i class="<?= $FEATURED_ICONS_ITEM->icon ?>"></i></div>
                <div class="featured-title-text"><?= $FEATURED_ICONS_ITEM->title ?></div>
            </a>
        </div>
        <? } ?>
    </div>
    <div class="buttons-wrapper">
        <a href="<?= $DATA['Button']['url'] ?>" class="cms-btn">
            <div class="button-text"><?= $DATA['Button']['text'] ?></div>
        </a>
    </div>
</section>
<?/* End of Strings Block Template */?>

output data for defining block type

Use in: pagebuilder_custom_helper.php
Inside: customSortedListBlocks()

Reload the CMS after saving changes, then you can add the block using the "Add Block" menu at the bottom of the CMS.

    $items[] = [
        "title" => "Featured Icons Section",
        "value" => "featured-icons-section",
        "block" => [
            "type" => 2,
            "title" => "Featured Icons Section",
            "settings" => [
                ["AMSD Columns", 2],
                ["AMSD Delete", "false"],
                ["AMSD Edit", "false"],
                ["Heading Read Only", "true"],
                ["Table", "amsd_strings"],
                ["Template", "featured-icons-section"]
            ],
            "items" => [
                ["key" => "Background Image","config" => "focused_img"],
                ["key" => "Heading","config" => ""],
                ["key" => "Text Area","config" => "textarea"],
                ["key" => "Featured Icons","config" => "featured_icons"],
                ["key" => "Button","config" => "button"]
            ]
        ],
        "dev" => true
    ];

output data for defining custom AMSD field type

Use in: amsd_custom_helper.php
Inside: field_builder_custom_preset()

Check for duplicates, some custom field types may already exist.

        case "featured_icons":

            if($GRID) {
                $OUTPUT = '<a class="fg-edit-html-in-strings-table"><span>Click Here to Edit</span></a>';
            } else {
                $fields = [
                    [
                        "key" => "url",
                        "label" => "Url",
                        "config" => [
                            "type" => "url"
                        ]
                    ],
                    [
                        "key" => "icon",
                        "label" => "Icon",
                        "config" => [
                            "type" => "icon"
                        ]
                    ],
                    [
                        "key" => "title",
                        "label" => "Title",
                        "config" => [
                            "type" => "text"
                        ]
                    ]
                ];
                $FIELD_HTML .= $FIELD->special($KEY, [
                    "type" => "sorted_list",
                    "fields" => $fields
                ]);
                $OUTPUT = $FIELD_HTML;
            }

            break;

input html

<div cybdata="amsd" cybkey="AMSD Block Title" class="amsd-list">
    <div class="amsd-item">
        <a cybdata="profileurl" cybkey="Url" href="#" class="amsd-image-link w-inline-block">
            <div cybdata="bg" cybkey="Focused Img" class="amsd-image"></div>
        </a>
        <div class="amsd-text-wrapper">
            <a cybdata="profileurl" cybkey="Url" href="#" class="amsd-title-text-link"><span cybdata="text" cybkey="Title">Sorted List Item</span></a>
            <div cybdata="text" cybkey="Subtitle" class="amsd-meta-text">Item Subtitle</div>
            <div cybdata="previewtext350" cybkey="Preview Text" class="amsd-description-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.</div>
            <div cybdata="profileurl" cybkey="Url" class="amsd-button-wrapper"><a href="#" class="amsd-button w-inline-block">Learn More</a></div>
        </div>
    </div>
</div>

output php

Create block template files in: /blocks/amsd/templates/amsd_amsd_block_title.php

<div class="amsd-list">
    <?/* AMSD Loop for /blocks/amsd/templates/amsd_amsd_block_title.php */?>
    <? foreach($amsd["data"] as $k => $ITEM) { ?>
    <div class="amsd-item">
        <a href="<?= isset($ITEM->url) ? $ITEM->url : amsdProfileSlug($page, $amsd, $ITEM); ?>" class="amsd-image-link w-inline-block">
            <div class="amsd-image" style="background-position: <?= json_decode($ITEM->focused_img)->config->{'background-position'} ?>; background-image: url('/image/<?= json_decode($ITEM->focused_img)->id ?>/2000');"></div>
        </a>
        <div class="amsd-text-wrapper">
            <a href="<?= isset($ITEM->url) ? $ITEM->url : amsdProfileSlug($page, $amsd, $ITEM); ?>" class="amsd-title-text-link"><span><?= $ITEM->title ?></span></a>
            <div class="amsd-meta-text"><?= $ITEM->subtitle ?></div>
            <div class="amsd-description-text"><?= isset($ITEM->preview_text) ? nl2br($ITEM->preview_text) : character_limiter(strip_tags($ITEM->html), 350); ?></div>
            <div class="amsd-button-wrapper" href="<?= isset($ITEM->url) ? $ITEM->url : amsdProfileSlug($page, $amsd, $ITEM); ?>"><a href="#" class="amsd-button w-inline-block">Learn More</a></div>
        </div>
    </div>
    <? } ?>
    <?/* End of AMSD Loop */?>
</div>

output data for defining block type

Use in: pagebuilder_custom_helper.php
Inside: customSortedListBlocks()

Reload the CMS after saving changes, then you can add the block using the "Add Block" menu at the bottom of the CMS.

    $items[] = [
        "title" => "AMSD Block Title",
        "value" => "amsd-block-title",
        "block" => [
            "type" => 2,
            "title" => "AMSD Block Title",
            "settings" => [
                ["Heading Read Only", "true"],
                ["Table", "amsd_amsd_block_title"]
            ]
        ],
        "dev" => true
    ];

output data for defining custom AMSD field type

Use in: amsd_custom_helper.php
Inside: field_builder_custom_preset()

Check for duplicates, some custom field types may already exist.

        case "preview_text":

            $OUTPUT = $FIELD->build($KEY, [
                "type" => "textarea"
            ], false);

            break;

output SQL for creating AMSD Table

Make sure you're in the correct database before running SQL.

CREATE TABLE IF NOT EXISTS `amsd_amsd_block_title` (
    `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
    `block` int(11) unsigned NOT NULL DEFAULT 0,
    `url` text DEFAULT NULL,
    `focused_img` text DEFAULT NULL,
    `title` varchar(255) DEFAULT NULL,
    `slug` varchar(255) DEFAULT NULL,
    `subtitle` varchar(255) DEFAULT NULL,
    `preview_text` text DEFAULT NULL,
    `html` text DEFAULT NULL,
    `pos` int(11) unsigned NOT NULL DEFAULT 0,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3 COLLATE=utf8mb3_general_ci;

cybkey

cybkey attributes are used to identify the name/key of the data source:
‍
ex: cybkey="Name of Input"

output: <?= $DATA['Name of Input'] ?>
‍

cybdata

cybdata attributes are used to identify the type of data being replaced
(Only one cybdata attribute can be added per element)
‍
Types of cybdata attributes:
‍

text / html

Replaces text / inner html.

textarea

Replaces text and uses nl2br(); to convert new lines into line breaks

previewtext

Similar to textarea, but if no value is set it will pull from the html field.

Add a numeric value to set amount of characters pulled from the html field. Ex: previewtext200 If no value is set, the default is 200.

If an html field does not already exist, this will automatically add an html field to the AMSD Table SQL data.

url

Replaces href attribute

profileurl

Adds a standard url field, but if no url is set, it links to the profile page

href="<?= isset($ITEM->url) ? $ITEM->url : amsdProfileSlug($page, $amsd, $ITEM) ?>"

If an html field does not already exist, this will automatically add an html field to the AMSD Table SQL data.

icon

Replaces all html within element with:
<i class="<?= $ITEM->cybkey ?>"</i>

img

(Standard Image)
Replaces src attribute

Add a numeric value to set size of image pulled
Ex: cybdata="img1000" pulls image using /1000

Numeric values should be divisible by 100
If no numeric value is added the default is 1000px

(Background Image or focused_img)
Replaces style attribute

Add a numeric value to set size of image pulled
Ex: cybdata="bg2000" pulls image using /2000

Numeric values should be divisible by 100
If no numeric value is added the default is 2000px

list

sorted_list or amsd within amsd
Wraps first child element with a loop, removes remaining child elements

Loop format:
<? foreach(json_decode($DATA['cybkey'] ) as $k => $cybkey_ITEM) { ?>

amsd

Wraps first child element with a standard AMSD loop, removes remaining child elements

Loop format:
<? foreach($amsd["data"] as $k => $ITEM) { ?>

block

Define a block for the block builder data. The cybkey value gets used as the block title and template name. If no cybkey is set, it will use the first class name.

Defaults to a strings block unless an AMSD loop exists. If a child element with cybdata="amsd" exists, then it will be considered an AMSD block.

Any child elements with cybdata that are outsdie of the AMSD loop with get added onto the AMSD block as "Additional Settings".

phone

Replaces text, and adds href attribute with tel:+1

Replaces text, and adds href attribute with mailto:

button

Replaces text and href attributes. If a child element has cybdata="buttontext" then the button's text will be placed inside of that element instead.

buttontext

Replaces text, only works if a parent element also has cybdata set to button.

Use if the button's text needs to be wrapped with a span or another div inside of the button. If not used, the button's text will sit directly inside the button element.

date

Replaces text with date format: "F j, Y"

time

Replaces text with time format: "g:ia"

nav

Replaces element with: <? printWebflowMenu(); ?>

logo

Replaces element with a logo-home-link including a logo-image and logo-scrolled:

<a href="/home" class="logo-home-link w-nav-brand" title="Home"><img src="/image/<?= $DEV_CONFIG['Logo'] ?>/600" alt="<?= $owner->site_title ?>" class="logo-image"><img src="/image/<?= $DEV_CONFIG['Logo on Scroll'] ?>/600" alt="<?= $owner->site_title ?>" class="logo-scrolled"></a>

footerlogo

Replaces element with a footer-logo-link-block including a footer-logo image.

<a href="/home" class="footer-logo-link-block w-inline-block" title="Home"><img src="/image/<?= $DEV_CONFIG['Logo in Footer'] ?>/600" alt="<?= $owner->site_title ?>" class="footer-logo"></a>

alertbar

Replaces element with:
<? printBlock(ALERT_BAR_BLOCK_ID); ?>

popup

Replaces element with:
<? printBlock(POPUP_BLOCK_ID); ?>

videobg

Replaces element with a background video which works off of a vimeo or youtube video id

The php snippet detects if the video id is from vimeo or youtube based off of the number of characters (youtube has 11 characters and vimeo has 8)

The background video structure includes an iframe inside of 3 nested divs in order to get the responsive css to work correctly

The div structure looks like this:

<div class="video-background-wrapper-outer">
<div class="video-background-wrapper-inner">
<div class="video-background">
<iframe class="cms-video-vimeo"></iframe>
</div></div></div>

tag

Replaces element with a Cybernautic tag

profile

Use $ITEM instead of $DATA for all child elements with cybdata

common

Use $COMMON_ITEMS instead of $DATA for all child elements with cybdata

ifisset

Wraps the element in an if statement, ex:

<? if(isset($DATA['Image'])) { ?><div class="image-wrapper"></div><? } ?>

cybflow

input example

output example

cybkey

cybdata