Designer Mode was added with Meerkat version 1.0.3 to make the process of developing themes with Meerkat easier.

Introduction

When Designer Mode is enabled, Meerkat will generate random comment data on every page that uses the {{ meerkat:responses }} tag.

Each time you refresh the page, Designer Mode will generate random comment data, user names, and profile images to help you test your theme's layout.

Designer Mode allows you to submit replies and comments to test your theme's interactions, but the data will not be stored.

Enabling Designer Mode

Designer Mode cannot be enabled from the Control Panel; to enable Designer Mode, you must modify the site/settings/addons/meerkat.yaml file directly.

To enable Designer Mode simply add a designer_mode key with the value of true:

designer_mode: true

Conversely, you can disable Designer Mode by either removing this entry or by supply a false value:

designer_mode: false

Designer Mode User Profile Images

Because the methods to display comment author's profile images vary greatly, Designer Mode will inject a {{ designer_avatar }} variable within the comment thread that can be used to display a random user photo supplied by Designer Mode:

{{ meerkat:responses as="comments" unapproved="false" limit="10" paginate="true" show_hidden="true" }}

    {{ if no_results }}
        <p>Be the first to leave a reply!</p>
    {{ /if }}

    {{ comments }}
    <div class="media meerkat__comment-list-item">
        <img src="{{ designer_avatar }}" alt="{{ name }}" class="hidden-xs" />

        <div class="media-body" data-meerkat-comment="{{ id }}">
            <p>
                <img src="{{ designer_avatar }}" alt="{{ name }}" class="visible-xs meerkat__comment-list-item-avatar--xs" /> <strong>{{ name }}</strong>
            </p>
            
            {{# ... #}}

        </div>
    </div>
    {{ /comments }}

{{ /meerkat:responses }}

Checking if Designer Mode is Enabled

You can check if Designer Mode has been enabled from within your theme (you can use this to decide whether or not to display the {{ designer_avatar }} value):

{{ if {meerkat:designer-mode} }}
    <div class="alert alert-info">
        <p>Meerkat is running in Designer Mode; the comments displayed below are chosen at random. Any comments that are submitted will not be saved.</p>
    </div>
{{ /if }}