📝 NOTE: The Promoted Content module is not available with our Foundation theme. We will be building a new Promoted Content Widget to allow for content to be promoted on different pages of your community.
Do you want to promote content to your community based on an author's Role or Rank (or something else)? In any community, there are often people you want to spotlight, like:
- "super users" who distinguish themselves by contributing great content and answering countless questions
- or staff who need a platform to spread important information about your organization.
The Promoted Content module allows you to do just that, like you see in the example below:
Custom examples
It's also possible to enhance the Promoted Content module with custom theming, as shown in the examples below. This type of custom theming requires a professional web developer, or you can work with Vanilla's Professional Services team.
Step 1 - Choose criteria
The first step in promoting content is deciding what selector criteria you'll use. There are currently five ways to select promoted content:
role: Author's Rolerank: Author's Rank (requires Ranks addon to be enabled)category: Content's Category (url slug name)score: Content's Score (requires Reactions addon to be enabled)promoted: Is content promoted? (requires Reactions addon to be enabled)
📝 NOTE: "Promote" is a special reaction. Check out our Reactions article for more information.
Once you've chosen a selector, you need to add the selection value. For example, if you choose the role selector, your selection value would be a Role, like administrator:
{module name="PromotedContentModule" Selector="role" Selection="administrator"}
You can also select the ContentType to fetch:
- all (default)
- comments
- discussions
Finally, you can add some filtering. These are the available variables, where you will need to add an integer value:
Limit: How many pieces of content you want to appear in the promoted content module. Default is 9.Group: How often should we encapsulate content in groups. Groups of: n. Default is 3.TitleLimit : How many characters to be used in the title.BodyLimit: How many characters to be used in the body.Expiry: How long do you want us to cache this content, in seconds (default is 60 seconds).
Step 2 - Add the module to your template
Using the above criteria, we can create a simple promoted content module using the below syntax:
{module name="PromotedContentModule" Selector="role" ContentType="discussions" Selection= "administrator" Limit="3"}
Selector is the criteria used to filter the type of content (in this case role)Selection is the value (in this case, administrator)Limit is how we control how much content to display (in this case, the last 3 posts)
Once you have decided on these criterion, place the code where you want it to appear in the customize theme on the HTML tab. To place it in the side-panel, place it under {asset name="Panel"}.
In our example at the beginning of this article, we placed it below {breadcrumbs} in the main content, as you can see below:
Step 3 - Make it look good
You can use CSS to make the Promoted Content module stand out by applying code to .BoxPromoted. For example, the following is the CSS used in the Bootstrap theme in the example found at the beginning of this article:
div.Box.BoxPromoted {
max-width: 875px;
margin-left: auto;
margin-right:auto;
}
.BoxPromoted .Item {
background-position: 0px -44px;
height: 180px;
width: 254px;
}
.BoxPromoted .DataList .Item {
border: 1px;
float: left;
margin-right:15px;
overflow:hidden;
text-overflow:ellipsis;
}
.BoxPromoted .DataList:after {
clear: both;
content: "";
display: table;
}
.BoxPromoted .DataList .Item .Title {
padding: 4px 0px 0;
overflow:hidden;
text-overflow:ellipsis;
}
Some communities choose to use a conditional so that the Promoted Content module only appears on the homepage.
For example, if you wanted to show only on the homepage when Category is set as your default:
{if InSection("CategoryList")}
{module name="PromotedContentModule" Selector="Role" ContentType="discussions" Selection= "Administrator" Limit="3"}
{/if}
Bonus: Example Code
Here is the syntax for some of the Promoted Content modules:
Show only top 3 discussions with a content score of 5 and more:
{module name="PromotedContentModule" Selector="score" ContentType="discussions" Selection=5 Limit= "3"}
Show only top 3 comments with a content score of 5 and more:
{module name="PromotedContentModule" Selector="score" ContentType="comments" Selection=5 Limit= "3"}
Show only top 3 discussions from someone with rank named "Administrator":
{module name="PromotedContentModule" Selector="rank" ContentType="discussions" Selection= "administrator" Limit="3"}
Show only top 3 comments from someone with rank named "Administrator":
{module name="PromotedContentModule" Selector="rank" ContentType="comments" Selection= "administrator" Limit="3"}
