Promoted Content - HL Vanilla Community
<main> <article class="userContent"> <p><strong>📝 NOTE</strong>: 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.</p><p>Do you want to promote content to your community based on an author's <strong>Role </strong>or <strong>Rank </strong>(or something else)? In any community, there are often people you want to spotlight, like:</p><ul><li>"super users" who distinguish themselves by contributing great content and answering countless questions </li><li>or staff who need a platform to spread important information about your organization.</li></ul><p>The <strong>Promoted Content</strong> module allows you to do just that, like you see in the example below: </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/Y48XOWAJYAVO/promoted-content-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/Y48XOWAJYAVO/promoted-content-example.png" alt="promoted_content_example.png" height="536" width="1485" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="custom-examples">Custom examples</h2><p>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.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/F2WE20M8FKTG/themed-example-2.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/F2WE20M8FKTG/themed-example-2.png" alt="themed_example-2.png" height="737" width="1158" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/MO7ZT848RXTC/themed-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/MO7ZT848RXTC/themed-example.png" alt="themed_example.png" height="832" width="1326" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="step-1-choose-criteria">Step 1 - Choose criteria</h2><p>The first step in promoting content is deciding what selector criteria you'll use. There are currently five ways to select promoted content:</p><ul><li><strong><code class="code codeInline" spellcheck="false" tabindex="0">role</code></strong>: Author's Role</li><li><strong><code class="code codeInline" spellcheck="false" tabindex="0">rank</code></strong>: Author's Rank (requires Ranks addon to be enabled)</li><li><strong><code class="code codeInline" spellcheck="false" tabindex="0">category</code></strong>: Content's Category <strong>(url slug name</strong>)</li><li><strong><code class="code codeInline" spellcheck="false" tabindex="0">score</code></strong>: Content's Score (requires Reactions addon to be enabled)</li><li><strong><code class="code codeInline" spellcheck="false" tabindex="0">promoted</code></strong>: Is content promoted? (requires Reactions addon to be enabled)</li></ul><p><strong>📝 NOTE</strong>: "Promote" is a special reaction. Check out our <a href="https://success.vanillaforums.com/kb/articles/22-reactions#promoting-content" rel="nofollow noreferrer ugc">Reactions</a> article for more information.</p><p>Once you've chosen a selector, you need to add the <em>selection </em>value. For example, if you choose the <strong><code class="code codeInline" spellcheck="false" tabindex="0">role</code></strong> selector, your selection value would be a Role, like <strong>administrator</strong>:</p><p><code class="code codeInline" spellcheck="false" tabindex="0">{module name="PromotedContentModule" Selector="role" Selection="administrator"}</code></p><p>You can also select the <code class="code codeInline" spellcheck="false" tabindex="0">ContentType</code> to fetch:</p><ul><li>all (default)</li><li>comments</li><li>discussions</li></ul><p>Finally, you can add some filtering. These are the available variables, where you will need to add an integer value:</p><ul><li><strong><code class="code codeInline" spellcheck="false" tabindex="0">Limit</code></strong>: How many pieces of content you want to appear in the promoted content module. Default is 9.</li><li><strong><code class="code codeInline" spellcheck="false" tabindex="0">Group</code></strong>: How often should we encapsulate content in groups. Groups of: n. Default is 3.</li><li><strong><code class="code codeInline" spellcheck="false" tabindex="0">TitleLimit </code></strong>: How many characters to be used in the title.</li><li><strong><code class="code codeInline" spellcheck="false" tabindex="0">BodyLimit</code></strong>: How many characters to be used in the body.</li><li><strong><code class="code codeInline" spellcheck="false" tabindex="0">Expiry</code></strong>: How long do you want us to cache this content, in seconds (default is 60 seconds).</li></ul><h2 data-id="step-2-add-the-module-to-your-template">Step 2 - Add the module to your template</h2><p>Using the above criteria, we can create a simple promoted content module using the below syntax:</p><p><code class="code codeInline" spellcheck="false" tabindex="0">{module name="PromotedContentModule" Selector="role" ContentType="discussions" Selection= "administrator" Limit="3"}</code></p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">Selector</code> is the criteria used to filter the type of content (in this case <strong>role</strong>)</li><li><code class="code codeInline" spellcheck="false" tabindex="0">Selection</code> is the value (in this case, <strong>administrator</strong>)</li><li><code class="code codeInline" spellcheck="false" tabindex="0">Limit</code> is how we control how much content to display (in this case, the last 3 posts)</li></ul><p>Once you have decided on these criterion, place the code where you want it to appear in the customize theme on the <strong>HTML tab</strong>. To place it in the side-panel, place it under <code class="code codeInline" spellcheck="false" tabindex="0">{asset name="Panel"}</code>. </p><p>In our example at the beginning of this article, we placed it below <code class="code codeInline" spellcheck="false" tabindex="0">{breadcrumbs}</code> in the main content, as you can see below:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/IV2JXVT9D3ZU/example-code.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/IV2JXVT9D3ZU/example-code.png" alt="example_code.png" height="218" width="1005" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="step-3-make-it-look-good">Step 3 - Make it look good</h2><p>You can use CSS to make the Promoted Content module stand out by applying code to <code class="code codeInline" spellcheck="false" tabindex="0">.BoxPromoted</code>. For example, the following is the CSS used in the Bootstrap theme in the example found at the beginning of this article:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">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; } </pre><p>Some communities choose to use a conditional so that the Promoted Content module only appears on the homepage. </p><p>For example, if you wanted to show only on the homepage when Category is set as your default:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">{if InSection("CategoryList")} {module name="PromotedContentModule" Selector="Role" ContentType="discussions" Selection= "Administrator" Limit="3"} {/if} </pre><h2 data-id="bonus%3A-example-code"><strong>Bonus: Example Code</strong></h2><p>Here is the syntax for some of the Promoted Content modules:</p><h3 data-id="show-only-top-3-discussions-with-a-content-score-of-5-and-more%3A">Show only top 3 discussions with a content score of 5 and more:</h3><pre class="code codeBlock" spellcheck="false" tabindex="0">{module name="PromotedContentModule" Selector="score" ContentType="discussions" Selection=5 Limit= "3"} </pre><p><br></p><h3 data-id="show-only-top-3-comments-with-a-content-score-of-5-and-more%3A">Show only top 3 comments with a content score of 5 and more:</h3><pre class="code codeBlock" spellcheck="false" tabindex="0">{module name="PromotedContentModule" Selector="score" ContentType="comments" Selection=5 Limit= "3"} </pre><p><br></p><h3 data-id="show-only-top-3-discussions-from-someone-with-rank-named-%22administrator%22%3A">Show only top 3 discussions from someone with rank named "Administrator":</h3><pre class="code codeBlock" spellcheck="false" tabindex="0">{module name="PromotedContentModule" Selector="rank" ContentType="discussions" Selection= "administrator" Limit="3"} </pre><p><br></p><h3 data-id="show-only-top-3-comments-from-someone-with-rank-named-%22administrator%22%3A">Show only top 3 comments from someone with rank named "Administrator":</h3><pre class="code codeBlock" spellcheck="false" tabindex="0">{module name="PromotedContentModule" Selector="rank" ContentType="comments" Selection= "administrator" Limit="3"} </pre><p><br></p> </article> </main>