Custom community banners are a great way to enhance the user experience throughout your Community. In Atlas, we use custom content to draw attention to important features, direct users to useful pages, and share news from our team.

In this post, we take a look at some of the ways you can leverage Khoros Communities' Custom Content features to enhance your user's experience.

You can customize Custom Content with a little scripting in several ways:

• Show or hide the component based on the user's role(s)
• Add CSS styling unique to the component
• Display images hosted externally or through your Community's Asset Library
• Direct users to a specific link or area of your Community

In this example exercise, we're adding the banner (below) to our community's pages. We will go through the process of uploading the image asset, creating the custom content, and adding the Custom Content component to our Community Page's quilt.

Upload Image Assets to your Community

We start with a simple PNG image that we want to display in the custom community banner. This image file needs to be hosted somewhere. This could be an external hosting arrangement, or directly hosted from within your community using the Community Asset Library.

You can upload image assets to the Asset Library by doing the following:

1. Go to Studio > Community Style Tab.
2. Select Asset Library from the Work With drop-down menu.
3. Click the Other Assets tab.
4. Click the Choose File button and select the file you want to upload.
5. Click Upload.

After you have uploaded the new asset, you can locate the file in the list and discover its unique URL. Make note of this URL since you will need it when crafting the Custom Content in the next step. In our example, our file is located at /html/assets/thankyou2.png.

Add Custom Content to the Quilt

This last step is pretty straightforward. We need to add our new Custom Content to the quilt for the page(s) we want the banner to appear on. In our example, we're adding it to the Community Page.

Here's how:

1. Go to Studio > Page.
2. Expand the Custom Content area of the Components list.
3. Select the Custom Content item you want to use for this banner by clicking the plus (+) symbol next to it as you hover over it with the cursor.
4. Drag the Custom Content component to the area of the quilt in which you want the banner to display.
5. Scroll down to the bottom of the page and click Save.

Once you have configured the custom content, your new custom community banner should appear where you configured it to go and for the users with the role(s) you specify in the content's scripting.

Create Custom Content

Now that you have the image asset(s) you want to display in the custom community banner uploaded, you can create the custom content that the image(s) will be displayed through.

Here's how:

1. Go to Community Admin > Content > Custom Content.
2. Select a Custom Content Setting that you want to use. Ideally, this would be one that doesn't already have content in it, matching the item that you selected in the previous step. In our case, this is Custom Content 2.
3. Add your unique content to the Text field. See our example in the Custom Content Example section below.
4. Click Save.

Note: The name of the Custom Content Setting. It should match the one you placed in the quilt in the Add Custom Content to the Quilt section, above.

Custom Content Example

In our example, we are creating a custom community banner that only appears for users with specific roles and that has styling that matches our needs.

Here is the content we used in the Text field:

<style>
.image-responsive-style {
    width: auto;
    margin-top: 40px;
    margin-left: -12px;
    cursor: pointer;
}

@media only screen and (min-width: 1024px) {
    .desktop-margin-image {
        margin-top: -40px;
    }
}
</style>

<#assign user_has_role=false />

<#if !user.anonymous>
    <#list restadmin("/users/id/${user.id?c}/roles").roles.role as role>
        <#if role.name?? && ((role.name=="Administrator" )||(role.name=="Example" ))>
            <#assign user_has_role=true />
        </#if>
    </#list>
</#if>


<#if user_has_role>
    <center style="margin-bottom: -25px;" class="desktop-margin-image">
    	<a href="/t5/forums/searchpage/tab/message?filter=labels&q=%22example%22&noSynonym=false&advanced=true&collapse_discussion=true&search_type=thread&labels=example ">
        	<picture>
            	<source media="(min-width: 1024px)" srcset="/html/assets/thankyou2.png">
            	<img src="/html/assets/thankyou2.png" class="image-responsive-style">
        	</picture>
    	</a>
	</center>
</#if>

To understand how this works, let's break down this custom content piece-by-piece.

<style>
...
</style>

Everything within the <style></style> tags is there to add additional CSS styling to the custom content component itself. This is a great way to add a little extra visual flare to your banner, or to ensure that it sits exactly where you need it to on the page.

<#assign user_has_role=false />

This if statement uses the restadmin context object to make an API call that checks the user's roles to see if they have either the Administrator or Example role applied to their profile. If they do, then the user_has_role variable is set to true. Otherwise, no changes are made and the value remains false.

<#if user_has_role>
    <center style="margin-bottom: -25px;" class="desktop-margin-image">
    	<a href="/t5/forums/searchpage/tab/message?filter=labels&q=%22example%22&noSynonym=false&advanced=true&collapse_discussion=true&search_type=thread&labels=example ">
        	<picture>
            	<source media="(min-width: 1024px)" srcset="/html/assets/thankyou2.png">
            	<img src="/html/assets/thankyou2.png" class="image-responsive-style">
        	</picture>
    	</a>
	</center>
</#if>

Finally, we have an if statement that displays the banner image (along with other HTML properties such as its HREF link) if the user_has_role variable is true.

In our example, we're directing users that click the banner to a search page within the Community. The image source location is the relative URL that we noted earlier upon uploading the asset to the Asset Library.

Summary

That's it! Your banner should now appear wherever a user with the right role(s) visits the page(s) you have configured the banner for.

This technique isn't just useful for simple image banners. It can be used for virtually any user experience customization you need, from visual fair between components to important announcements you want to make to your visitors.

You can use Freemarker to supercharge this content and leverage information about your community to create a more dynamic experience for your audience.