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 }}
You should make sure to remove the {{ designer_avatar }}
value before releasing your theme or deploying it to production.
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 }}