HC Tip: Add "Promoted Articles" to front page + modify text in multiple languages
One thing that we really like about HC is adding pinned topics (now known as "Promoted articles") to our front page.
In some themes, the tag doesn't come inserted automatically. I worked with Zendesker Arnaud to figure this out!
Add the Handlebar to your HTML
Under Homepage, add the following
<section class="clearfix">
{{promoted_articles}}<br />
</section>
Modify the CSS
/*
* Promoted articles
*/
.promoted-articles{
background-color:#f4f4f4;
padding:20px;
-webkit-border-radius: 3px;
border-radius: 3px;
clear:both;
}
.promoted-articles h3{
margin:0 0 10px 0;
font-weight:bold;
font-size:20px;
}
.bottomspace{
min-height:500px;
}
.main-column .form footer{
margin-top:20px;
}
This will add a section just for the promoted articles below the search bar and whatever introductory images/text you may have.
Modify the text "Promoted articles" in several languages
If you wish to change the text for something else, like Pinned Topics, go to the JS tab and add the following
// Promoted topics
$('section.promoted-articles h3').text('Pinned Topics');
If like me you are handling several languages, you can do the following
// Promoted topics
if(currentLanguage === 'Français') {
$('section.promoted-articles h3').text('Sujets mis en avant');
}
For every additional language you simply add an IF condition and keep going!
-
@Andrea, This is very helpful. I also like the organization of your help site in 4 clickable tabs. Was this placeholder code or a theme that Zendesk provided or did you have someone do this inhouse. I have only been using the new Help Center for a short while so I am trying to figure out my customization options. Thanks for your help
-
Hi Lanna,
We did this in-house.
You can check the document I wrote here: https://support.zendesk.com/entries/25627507-Adding-Navigation-Images-to-Help-Center-with-use-of-dynamic-content-
Best of luck!
-
Great tip Andrea and thanks for sharing!
-
Hi Andrea
I followed your tip and modified the CSS as the handlebar was already there on the home page
But it doesnt show the articles bulleted. There are no bullet points showing up for me
-
Hi!
The post is quite old but I'm trying to get my promoted article always on top on the homepage by reproducing your tip and here is the error I get when modifying my homepage code:
Thanks for your help!
-
Hi @sylvain.egger,You are right, this post is quite old and is outdated now. Please use the below code to show the list of promoted articles instead of one mention in this post.
{{#if promoted_articles}}
<section class="articles">
<h2>Popular Question</h2>
<ul class="article-list promoted-articles {{#isnt settings.custom_block_visibility 'show'}}update-width{{/isnt}}">
{{#each promoted_articles}}
<li class="promoted-articles-item">
<a href="{{url}}">
{{title}}
</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}Let me know if you face any issue.
Thanks
Team Diziana
-
This is what I'm getting.
1 error
Not possible to access `custom_block_visibility` in `settings.custom_block_visibility`
-
Hi @Shay,
Can you provide little more details on it? Where are you putting this component? Are you trying to put it in the promoted_articles component?
An screenshot of your template will be of great help.Thanks
Team Diziana
La publicación no admite más comentarios.
8 Comentarios