Public
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Mentor

khoros homepage components

Hey guys- I suppose this is more geared towards the Khoros staff themselves, but curious to know how the component on the front page were build and how they are maintained. 

1) how did you build the announcement image component and how do you update it? 

2) how did you build the "latest from Khoros" component- what logic is it using and how does that get updated? 

 

Thanks,

Alissa 

2 Replies 2
Community Manager

Hi @akloepfer 

 

On Atlas we have a Custom Content (CC) component added to the home page quilt. Using a CC means that we can make quick changes via admin instead of having to make changes in Studio and then pushing to production.

 

Ideally any banners will be pre-planned and can be uploaded via the asset library on Studio and have already been pushed to production but if you do need something pushed urgently then you can upload to your personal image gallery as hidden on your community, get the direct link to the image and use that in the code.

 

The code in the CC can just be very basic html:

 

<a href="destinateion url"><img src="image url"></a>

 

Depending on the size of the image and if your users use other devices you may need to add in some extra styling and assets to make sure it works on mobile etc. e.g.

 

<style>
.image-responsive-style {
    width:auto;
    margin-top:20px;
    margin-left: -12px;
    cursor: pointer;
}
.desktop-margin-image {
    margin-bottom: -25px;
}
@media only screen and (min-width: 1024px) {
    .desktop-margin-image {
        margin-top : -38px;
    }
}
@media screen and (max-width: 767px) {
    .lia-quilt-community-page .image-responsive-style {
        margin-top: 0px;
        margin-left: 0px;
        cursor: pointer;
        width: 100%;
    }
}
</style>
<center>
<div class="desktop-margin-image">
<a href="/t5/Kudos-Awards-2022/con-p/kudosawards2022">
<picture>
<source media="(min-width: 1024px)" srcset="/../ desktop image url">
<img src="/../ mobile image url" class="image-responsive-style">
</picture>
</a>
</div>
</center>

 

 



Andy K
Sr. Community Manager, Atlas Community



Director

Hi @akloepfer,

Custom content is really powerful and as @AndyK mentioned - you can edit the content in the Admin panel, without going to Studio.

We use a lot of them in our Community, even for subforums, such as here:

cc.png

That way, we promote also other resources, such as blogs, webinars, and documentation.

 

Cheers,

Karolina

Director Community Management at Dynatrace

Welcome to the Technology board!

Curious about our platform? Looking to connect on social technology? You've come to the right place!

Are you a Khoros customer? For direct assistance from our Support team, please visit the Support Forum.