Categories Module - HL Vanilla Community
<main> <article class="userContent"> <p><strong><em>This module is available starting from </em></strong><strong><em><code class="code codeInline" spellcheck="false" tabindex="0">release/2020.021</code></em></strong><strong><em>.</em></strong></p><p>The categories module can be used to display some subset of categories in various places in your theme with a few different visual layouts.</p><h2 data-id="configuration-options">Configuration Options</h2><p>This module has a few different configuration options available.</p><h3 data-id="apiparams">apiParams</h3><p>A set of parameters passed the endpoint. All parameters supported there are supported by the widget.</p><p><a href="https://success.vanillaforums.com/kb/articles/202-apiv2-reference-endpoints#/Categories/get_categories" rel="nofollow noreferrer ugc">See the documentation for all supported parameters.</a></p><p>The defaults as are follows:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">{ "featured": true, "limit": 10, // If subcommunities is enabled, the root category of the subcommunity will be used. "parentCategoryID": -1, } </pre><h4 data-id="want-to-use-some-specific-categories">Want to use some specific categories?</h4><p>Try the <code class="code codeInline" spellcheck="false" tabindex="0">categoryID</code> filter and pass some specific category IDs.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">{ "featured": false, "categoryID": [1, 53, 169] } </pre><h3 data-id="title">title</h3><p>A title to display above the module. Empty by default.</p><h3 data-id="subtitle">subtitle</h3><p>A subtitle to display above {<code class="code codeInline" spellcheck="false" tabindex="0">subtitle: {content:"This is my subtitle", type: "overline"}} </code>or below <code class="code codeInline" spellcheck="false" tabindex="0">{subtitle: {content:"This is my subtitle", type: "standard"}} </code>the title. Padding and font options also can be passed to the module. Empty by default.</p><h3 data-id="description">description</h3><p>A description for the module.</p><h3 data-id="headeralignment">headerAlignment</h3><p>Default for this is <code class="code codeInline" spellcheck="false" tabindex="0">"left"</code> , but id <code class="code codeInline" spellcheck="false" tabindex="0">"center"</code> passed, title, subtitle and description will be aligned to center.</p><h3 data-id="maxcolumncount">maxColumnCount</h3><p>The maximum number of columns to display for the results.</p><h3 data-id="contenttype">contentType</h3><p>The display type to use for the widget. See content types documented below. Defaults to the one chosen in the theme ( <code class="code codeInline" spellcheck="false" tabindex="0">{contentType: "title-description-icon"} )</code> by default).</p><h2 data-id="different-contenttypes">Different contentTypes</h2><p>The widget supports 4 content types. These can be specified when declaring the widget, or configured by the theme. The theme editor offers extensive configuration of this widget at the theme level.</p><h3 data-id="title-description"><code class="code codeInline" spellcheck="false" tabindex="0">title-description</code></h3><p>A text only variant.</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/C994OUN4P33I/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/C994OUN4P33I/image.png" alt="image.png" height="354" width="2286" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="title-description-icon"><code class="code codeInline" spellcheck="false" tabindex="0">title-description-icon</code></h3><p>Use text and the category icons. This contentType has another option to place icon on the left <code class="code codeInline" spellcheck="false" tabindex="0">{iconProps: {placement: left}} , </code>icon <code class="code codeInline" spellcheck="false" tabindex="0">background</code> or <code class="code codeInline" spellcheck="false" tabindex="0">border</code> are also configurable through <code class="code codeInline" spellcheck="false" tabindex="0">iconProps</code>.</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/SQD2JM4TUBTR/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/SQD2JM4TUBTR/image.png" alt="image.png" height="630" width="2636" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="title-description-image"><code class="code codeInline" spellcheck="false" tabindex="0">title-description-image</code></h3><p>Use text and the banner image from the category.</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/MTKN0H18E5SK/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/MTKN0H18E5SK/image.png" alt="image.png" height="734" width="2562" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="title-background"><code class="code codeInline" spellcheck="false" tabindex="0">title-background</code></h3><p>Overlay the title of the category on top of the banner image.</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/TLHRBBPTLQMV/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/TLHRBBPTLQMV/image.png" alt="image.png" height="384" width="2516" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="default-placement">Default Placement</h2><p>A <em>featured</em> categories module appears by default in the foundation theme when there are featured categories available.</p><h2 data-id="placement-with-twig">Placement with Twig</h2><p>In a twig master view the module can used as follows:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">{% if isHomepage %} {{ renderModule("Vanilla\\Community\\CategoriesModule", { title: t('Featured categories'), apiParams: { featured: true, limit: 10 } }) }} {% endif %} </pre><h2 data-id="placement-with-smarty">Placement with Smarty</h2><pre class="code codeBlock" spellcheck="false" tabindex="0">{if $isHomepage} {$apiParams = ['featured' => true, 'limit' => 5]} } {module name="Vanilla\\Community\\CategoriesModule" title="Featured Categories" apiParams=$apiParams } {/if} </pre><p><br></p> </article> </main>