SocialEngine Cloud Theme Documentation

Theme Documentation

Conditional Templating

Logged In User

You may use the following syntax to show parts of the template if a member is viewing the page:

{{#user_signed_in}}
    <!-- Only shown if member signed in -->
    <script type="x-engine/func" ...></script>
{{/user_signed_in}}

or if a non-member is viewing the page:

{{^user_signed_in}}
    <!-- Only shown if member not signed in -->
    <script type="x-engine/func" ...></script>
{{/user_signed_in}}

Mobile Device Detection

If you want to display some content only to mobile users:

{{#is_mobile}}
    <!-- Only shown to mobile browsers -->
    < type="x-engine/func"...></script>
{{/is_mobile}}

Custom Javascript Events

SocialEngine Cloud provides a few custom JavaScript events facilitate customizing your member's experience.

Event: gallery.rendered

When an item is rendered in the gallery view modal, a gallery.rendered event is triggered on the body. It can be listened for using this code:

$$('body').on('gallery.rendered', function(event, modal) {
  // Make item's title start with 'My Community: '
  var $postTitle = $(modal).find('.post-title');
  $postTitle.text('My Community: ' + $postTitle.text());
});

Note: item.rendered is not emitted when viewing the post's page.

Event: composer.rendered

The composer.rendered event can be used to customize the post composer modal. This event is emitted on the composer button that's clicked. It can be listed for using this code:

$('body').on('composer.rendered', '.composer-link', function() {
  // Add placeholder text to title fields
  $('.modal-body').find('input[name$="title"]').attr('placeholder', 'Please enter an awesome title!');
});

Activity

Displays the most recent activities for a site. When invoked from the profile.html template, the widget displays the recent activity for a specific member.

Parameters

data-type
Optional
This is the type of feed to be displayed. Note: search only works on the search page.
Default Value: new
Example Values: new, hot, top, following, search
data-items-per-page
Optional
Specifies the number activity items to display at a time. Value must be a number less than 101, and the default value is 10.
Example Values: 100
data-pagination
Optional
Determines the pagination behavior for the widget. This parameter expects either auto, more or none. If no value is specified, the value defaults to none, the widget's content will not be paginated. If the value is set to more, a link will be displayed that when clicked will cause a page refresh so that older activites can be loaded. The auto value, will automatically load older activities using based on page scrolling.
Example Values: more
data-show-types
Optional
Comma separated list of the types of actions to be shown. Defaults to all types. Only available fornew type.
Example Values: post,follow,comment,member,like
post,member
data-show-types
Optional
If set to true, shows an inline post composer above the activity feed.
Example Values: true, false
Default Value: false

Example

<script type="x-engine/func" data-func="activity" data-items-per-page="5" data-pagination="more"></script>

Mini activity

Displays a smaller version of the most recent activities for a site. When invoked from the profile.html template, the widget displays the recent activity for a specific member.

Parameters

data-items-per-page
Optional
Specifies the number activity items to display at a time. Value must be a number less than 101, and the default value is 10.
Example Values: 100
data-show-types
Optional

Comma separated list of the types of actions to be shown. Defaults to all types.

Example Values: post,follow,comment,member,like
post,member

Example

<script type="x-engine/func" data-func="activity-mini" data-items-per-page="5"></script>

Alert

This widget is used to render system or custom alerts.

Parameters

data-message
Optional
This is the message that will be contained within the alert box. If no message is provided, the widget will not render.
Example Values: Hello World!
data-alert-type
Optional
This parameter expects a value of error, infoor success and is used to change the connotation of an alert. If no type is specified, this param defaults to error and will display a red box around the message. Using the info type causes the widget to render with a a blue box and success will cause the message to render with a green box.

Example Values: info

data-prefix
This parameter is used to prefix an alert with a custom phrase.
Optional

Example Values: Oops!

Example

<script type="x-engine/func" data-func="alert" data-alert-type="info" data-message="Hello World!"></script>

Branding

Displays the "Powered by SocialEngine" text as well as the copyright, terms and privacy links.

Parameters

data-hide-powered-by
Optional
When set to true, the "Powered By SocialEngine Cloud" text will be hidden, but will still show the copyright text and a link to the terms and privacy page.
Default Value: false
Example Values: true, false

Example

<script type="x-engine/func" data-func="branding" data-hide-powered-by="true"></script>

Categories

Displays a list of categories and the number of posts in each.

Example

<script type="x-engine/func" data-func="categories"></script>

Content

Several pages within SocialEngine display template content that cannot be modified. On these pages, the content widget will contain the unchangeable content body for that page. The following template pages require this widget: default.html, search.html, settings.html, sign-in.html, sign-up.html and terms-of-use.html

Example

<script type="x-engine/func" data-func="categories"></script>

Favicon

Adds the favicon script to the site. Placing this widget in header.html will add a favicon to your site.

Parameters

data-favicon
Optional
This is the location of your favicon. Leaving it blank will make the favicon the default icon bundled with SocialEngine Cloud.
Example: https://d3rtbvczwo197u.cloudfront.net/images/sales/favicon.ico

Example

<script type="x-engine/func" data-func="favicon" data-favicon=""></script>

Feed

Displays the main post feed.

Parameters

data-type
Optional
This is the type of feed to be displayed.
Default Value: hot
Example Values: new, hot, top, following, member, tag, featured, likes, list
data-gallery-mode
Optional
Specify if items are shown within a modal instead of opening to a new page.
Default Value: false
Example Values: true, false
data-items-per-page
Optional
Specifies the number of items to display at a time. Value must be a number less than 101, and the default value is 10.
Example Values: 10
data-link-target
Optional
If set to external, links will point directly to the source link, otherwise they will point to the post view page.
Default Value: internal
Example Values: internal, external
data-pagination
Optional
Determines the pagination behavior for the widget. This parameter expects either auto or none. If no value is specified, the value default behavior is used. When data-type is set to likes or featured, this parameter defaults to none, otherwise, it defaults to auto. A value of auto will cause a numbered pagination list to be displayed.
Example Values:auto
data-thumb-size
Optional
Determines the size of the post thumbnails to be shown in the feed. Available sizes: small (fit to 255x600 pixels), large(fit to 800x800 pixels), full (original size)
Example Values:small
data-category-id
Optional
Specifies the ID of the category used for item display. You can find out the ID of a category by looking at the url. For example if you take a look at http://community.socialengine.com/categories/16837/cloud-release-notes, the ID is 16837 Only available for top, new, and hotfeed types
Default Value:small
data-include-self
Optional
Determines if the logged-in member's posts should be included in the followingfeed.
Default Value: false Example Values: true, false
data-rich-preview
Optional
Determines if the feed should should use embeds (like SoundCloud players) as post previews. If set to false, a static image (if applicable) will used instead.
Default Value: false Example Values: true, false

Example

<script type="x-engine/func" data-func="feed" data-type="hot" data-items-per-page="10"></script>

Mini Feed

Displays a small feed for use in gutters

Parameters

data-type
Optional
This is the type of feed to be displayed.
Example Values: hot, new, top, featured
data-items
Optional
Specifies the number of items to display at a time. Value must be a number less than 101, and the default value is 10.
Example Values: 10
data-category-id
Optional
Specifies the ID of the category used for item display. You can find out the ID of a category by looking at the url. For example if you take a look at http://community.socialengine.com/categories/16837/cloud-release-notes, the ID is 16837
Example Values: 16837
data-link-target
Optional
If set to external, links will point directly to the source link, otherwise they will point to the post view page.
Default Value: internal Example Values: internal, external

Example

<script type="x-engine/func" data-func="feed-mini" data-type="top" data-items="5"></script>

Follow Button

Display a follow button. Typically used on a profile.

Example

<script type="x-engine/func" data-func="follow-button"></script>

Footer

Displays the site footer.

Example

<script type="x-engine/func" data-func="footer"></script>

Header

Displays the site header. Includes all of the JavaScript and CSS necessary for the site to function.

Parameters

data-no-css
Optional
Turns off all built-in css styles (including mobile)
Default Values: false

Example

<script type="x-engine/func" data-func="header" data-no-js="true" data-no-css="true"></script>

Logo

Displays the site logo image as configured in the media manager or the site title as configured in the site info settings.

Example

<script type="x-engine/func" data-func="logo"></script>

About Member

Displays information about a member. Includes built-in fields and custom fields as configured on the member settings page. Typically used in the member profile template.

Example

<script type="x-engine/func" data-func="member-about"></script>

Member Lists

Displays the member's lists. The lists feature can turned on by going to the post settings page. Typically used in the member profile template.

Parameters

data-lists-max
Optional
Specifies the maximum number of lists that will be shown.
Default Values: 10

Example

<script type="x-engine/func" data-func="member-lists" data-lists-max="10"></script>

Member Name

Displays the member name. Typically used in the member profile template.

Example

<script type="x-engine/func" data-func="member-name"></script>

Member Options

Displays a list of actions or links related to a member, including, where applicable, a link to the member's Facebook profile, Twitter profile, website, RSS feed of posts, and a follow button. Typically used in the member profile template.

Example

<script type="x-engine/func" data-func="member-options"></script>

Member Photo

Displays a member's profile photo. Typically used in the member profile template.

Example

<script type="x-engine/func" data-func="member-photo"></script>

Member Stats

Display a list of statistics about a member including follower count, following count, number of posts made, number of likes received, number of comments on their posts, and number of points.

Example

<script type="x-engine/func" data-func="member-stats"></script>

Members

Displays a list of members. Typically used on the members page.

Parameters

data-items-per-page
Optional
Specifies the number of items to display at a time. Value must be an integer between 1 and 100.
Default Values: 10
data-page
Optional
When set to ignore, the widget will ignore pagination in the URL so that it may be placed on a page alongside a widget that needs pagination without causing both widgets to paginate.
Values: empty, ignore
Default Values:10

Example

<script type="x-engine/func" data-func="members" data-items-per-page="10" data-page="ignore"></script>
<script type="x-engine/func" data-func="members" data-items-per-page="20"></script>

Featured Members

Displays a list members that have been marked as featured, and is typically used in a gutter. Members can be marked as featured by going to the Manage Members page and editing a member's profile.

Parameters

data-items
Optional
Number of members to display. Value must be an integer between 1 and 100.
Default Values: 10
data-page
Optional
Determines which layout to use when rendering the members. small is good for gutters, full matches members widget.
Values: full, small
Default Values: small

Example

<script type="x-engine/func" data-func="members-featured" data-items="10" data-layout="small"></script>

Members Leaderboard

Displays a list of members ordered by the greatest number of points. Typically used in a gutter.

Parameters

data-items
Optional
Number of members to display. Value must be an integer between 1 and 100.
Default Values: 10
data-sort
Optional
Determines the order in which members are displayed. There are 2 possible values: points to sort by members with the most points, or posts to sort by members with the most posts.
Default Values: posts
data-layout
Optional
Determines which layout to use when rendering the members. small is good for gutters, full matches members widget.
Values: full, small
Default Values: small

Example

<script type="x-engine/func" data-func="members-leaderboard" data-items="10" data-layout="small"></script>

New Members

Displays a list of members that have recently signed up. Members with a photo are placed before those without one, but are otherwise ordered by the date at which the member signed up. Typically used in a gutter.

Parameters

data-items
Optional
Number of members to display. Value must be an integer between 1 and 100.
Default Values: 10
data-layout
Optional
Determines which layout to use when rendering the members. small is good for gutters, full matches members widget.
Values: full, small
Default Values: small

Example

<script type="x-engine/func" data-func="members-new" data-items="10" data-layout="small"></script>

Members Online

Displays a list of members that have recently signed up. Members with a photo are placed before those without one, but are otherwise ordered by the date at which the member signed up. Typically used in a gutter.

Parameters

data-items
Optional
Number of members to display. Value must be an integer between 1 and 100.
Default Values: 10
data-layout
Optional
Determines which layout to use when rendering the members. small is good for gutters, full matches members widget.
Values: full, small
Default Values: small

Example

<script type="x-engine/func" data-func="members-online" data-items="10" data-layout="small"></script>

Popular Members

Displays a list of members that have recently signed up. Members with a photo are placed before those without one, but are otherwise ordered by the date at which the member signed up. Typically used in a gutter.

Parameters

data-items
Optional
Number of members to display. Value must be an integer between 1 and 100.
Default Values: 10
data-layout
Optional
Determines which layout to use when rendering the members. small is good for gutters, full matches members widget.
Values: full, small
Default Values:small

Example

<script type="x-engine/func" data-func="members-popular" data-items="10" data-layout="small"></script>

Main Menu

Displays the main site menu as configured in the Theme & Layout section. Typically used in header.html

Parameters

data-main-label
Optional
The label in the main menu for the Categories dropdown.
Default Values: Categories
data-show-private
Optional
Show links to pages marked as private when the person viewing the page is not signed in?
Default Values: false

Example

<script type="x-engine/func" data-func="menu-main"></script>

Mini Menu

Displays a small menu used primarily for actions restricted to signed in members. When signed out, displays sign-in and sign-up buttons, or a sign-in and request invite button if the site is configured as semi-private under Privacy. When signed in, displays a notification button, a link to the member's profile, and a dropdown menu with links to various other pages. Typically used in header.html

Example

<script type="x-engine/func" data-func="menu-mini"></script>

Post Body

> Displays the body of a post. Typically used in post.html (deprecated, use post-description or post-message instead)

Example

<script type="x-engine/func" data-func="post-body"></script>

Post Comments

Displays a list of comments on a post and a compose comment input. Typically used in post.html

Example

<script type="x-engine/func" data-func="post-comments"></script>

Post Description

Displays the post description Typically used in post.html

Example

<script type="x-engine/func" data-func="post-description"></script>

Post Media

Displays the media associated with a post, such as an image or video. Typically used in post.html

Example

<script type="x-engine/func" data-func="post-media"></script>

Post Message

Displays the post message. Typically used in post.html

Example

<script type="x-engine/func" data-func="post-message"></script>

Post Options

Displays a list of information about the post and actions that can be taken, such as post date, author, category, total comments, and total likes, upvotes, or downvotes as configured under Comment Settings. Typically used in post.html

Example

<script type="x-engine/func" data-func="post-options"></script>

Post Preview

A helper widget that bundles the display of the post media, title, and descriptionwidgets. Typically used in post.html

Example

<script type="x-engine/func" data-func="post-preview"></script>

Post Reaction

If likes are enabled under Post Setttings, displays a short list of people who liked the post. If up/down votes are enabled, displays an up/down voting box with the post score. Typically used in post.html

Example

<script type="x-engine/func" data-func="post-reaction"></script>

Post Title

Displays the title of a post. Typically used in post.html

Example

<script type="x-engine/func" data-func="post-title"></script>

RSS

Displays an RSS feed.

Parameters

data-url
Required
The URL of the RSS feed.
Example Value: http://www.theverge.com/rss/frontpage
data-items
Optional
The number of items to display.
Default Values: 10

Example

<script type="x-engine/func" data-func="rss" data-url="http://www.theverge.com/rss/frontpage" data-items="5"></script>

Search Members

Displays a list of members matching the specified search query. Exclusively used in search.html

Example

<script type="x-engine/func" data-func="search-members"></script>

Share Buttons

Displays a list of social sharing buttons including Twitter, Pinterest, Facebook, and Google Plus. Typically used in post.html

Example

<script type="x-engine/func" data-func="share-buttons"></script>

Share It Button

Adds a link to display the "Share It Button". The share button let's you easily share things you discover on the web with this community.

Parameters

share-text
Optional
The text of the button.
Default Value: Get the Share-it Button
share-class
Optional
The class wrapping the div around the button. This is used for styling purposes.
Default Values: Nothing

Example

<script type="x-engine/func" data-func="share-it-button"></script>

Site Info

Displays the site description as configured on the Site Info page. Typically used in a gutter.

Example

<script type="x-engine/func" data-func="site-info"></script>

Site Stats

Displays a list of statistics about the site such as total number of connections, posts, and comments. Typically used in a gutter.

Example

<script type="x-engine/func" data-func="site-stats"></script>

Subscribe Button

Shows a button that links to the RSS of the "newest posts" on the site. Does not show anything for private sites.

Example

<script type="x-engine/func" data-func="subscribe-button"></script>

Tags List

Display a list of popular tags. Typically used in a gutter.

Parameters

data-items
Optional
Number of tags to display. Value must be an integer between 1 and 100.
Default Values: 10

Example

<script type="x-engine/func" data-func="tags-list" data-items="10"></script>

Template

Add the contents of another template to the current template. Typically used to add header.html and footer.html to each page.

Parameters

data-name
Required
The name of the template to include in the current template.
Example Value: header

Example

<script type="x-engine/func" data-func="template" data-name="header"></script>
<script type="x-engine/func" data-func="template" data-name="footer"></script>

Var

Display a variable specific to the page. Current use cases:
In internal-error.html, message to display an error message specific to the error that has occurred.
In maintenance.html, message to display the maintenance message configured under Privacy Settings.

Parameters

data-name
Required
The name of the variable to output.
Example Value: message
data-default
Optional
The value to use if the specified variable is empty.
data-escape
Optional
Whether to escape potentially unsafe input.
Example Value: true

Example

<script type="x-engine/func" data-func="var" data-name="message" data-default="Something went wrong. Please try again later."></script>