Displaying promoted articles from a particular section on the Help Center home page

OK - so I started to do some more research on this, and I found the {{promoted_articles}} component, which does not appear to work any more with the transition to Curlybars templating.

ANY help very much appreciated as it seems I can't even now figure out how to get the full promoted articles list :(

@Paul - The promoted articles should look like this:

{{#if promoted_articles}}
<section class="promoted-articles">
<h3>{{t 'promoted_articles'}}</h3>
<ul>
{{#each promoted_articles}}
<li>
<a href="{{url}}">{{title}}</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}

That's brilliant, thanks Wes. That at least gives me somewhere to start.

Have you got any ideas on how I might be able to modify that to only show promoted articles within a certain category or section?

@Paul, not at this time as the promoted articles is not currently documented so I don't know what all fields are associated with it, however I did notify the Product Manager and he said he would get that documented.

Hey, I  have a question related to this post. I have to display promoted articles which I am able to do from the above code but what I want is,suppose I have 5 categories and I want to display only those category which has promoted articles and category name . How can I do so? 

Hi Vijay - that's exactly what I'm trying to achieve, and it appears that it is not yet possible :(

Hi Paul , Are you sure ? Because I have to deliver this project to my client and from morning I am stuck into it.

By the way Thanx for your fast reply..:)

I'm very sure. If you find a way around it, I encourage you to post it here. I have been trying for weeks on this to no avail. 

Sure I will.

@Paul & vijay

I'm pretty close with the following code:

HTML

{{#each categories}}
{{name}}
{{#each sections}}
{{#if articles}}

{{#each articles}}
<li {{#if promoted}} class="article-promoted" {{/if}}>
{{#if promoted}}
<span data-title="{{t 'promoted'}}">★</span>
<a href="{{url}}">{{title}}</a>


{{else}}
Emptyli
{{/if}}
</li>
{{/each}}

{{/if}}
{{/each}}
{{/each}}

JS tab (below document.ready function)

$('li:contains("Emptyli")').remove();

Ya that seems too close. I will try this by the way I am trying to display "Newest community issues". Do you have any idea  how to do this?

Hey Paul , here is the updated code where you only "promoted category name" would be visible. I have used jquery to do so

//remove categories if no promoted articles

$('.section-Promoted').each(function(){
if($(this).find('ul').length)
{
console.log("hello");
}
else
{
$("h3",this).remove();
};
});

and here is template

{{#each categories}}

{{#each sections}}
<section class="section-Promoted">
<h3>
{{#if internal}}
<span class="visibility-internal" data-title="{{t 'internal'}}">
<span class="visibility-internal-icon"></span>
</span>
{{/if}}
<a href="{{url}}">{{name}}</a>
</h3>
{{#if articles}}
{{#each articles}}
{{#if promoted }}
<ul class="article-list">

<li class="articles-promoted">
<a href="{{url}}">{{title}}</a>
</li>

</ul>
{{/if}}

{{/each}}
{{else}}
<i class="section-empty">
<a href="{{url}}">{{t 'empty'}}</a>
</i>
{{/if}} <!-- if articles -->

</section> <!--section ends here -->
{{else}}
<i class="category-empty">
<a href="{{url}}">{{t 'empty'}}</a>
</i>
{{/each}}
{{/each}}

Hi all,

I'm very new to this so any help would be appreciated. I'm customizing a template and want to display an imaged attached to a Promoted Article on the Home Page. I can get the Promoted Article 'Title', 'URL' and 'EXCERPT' but can't seem to be able to access the attachment. This is what I have below:

{{#if promoted_articles}}

{{#each promoted_articles}}

<div class="col-md-8 full_width_image responsive">

{{#if attachments}}
<img src="{{url}}"/>
{{/if}}

</div>

<div class="col-md-4 col-xs-12 col-sm-12 featured_a responsive">

<h3 class="white"><a href="{{url}}">{{title}}</a></h3>

{{excerpt body characters=250}}

  <p><a href="{{url}}" class="bottom"><span>more >></span></a></p> 

</div>

{{/each}}

{{/if}}

Does not seem to like the call for attachments and I'm not sure if this is just because it's on the home page or if I'm using it incorrectly. See attached image of what the final output should look like. All works except for the image. It would be great if we could check that the attachment is an image before displaying ELSE display a default image.

Many thanks again.

@Rkuwornoo - I don't believe you can pull the attachment with the mustache placeholders.  I believe in order to do that, you will need to some custom JQuery/JS and pull the attachment via the API.

@Rkuwornoo, thanks for asking about displaying an article attachment on the Help Center home page.

As Wes mentioned above, there is unfortunately no way to do this on the home page at this time. This would require custom API calls. Although Zendesk support cannot provide such a solution, perhaps some creative community members would be able to get you started on the right path for those.

You can also refer to our Help Center API documentation for more info.

@wes @Elliott, many thanks for having a look. I have been looking at the API and I almost have this resolved.

Using the API call below, I can see the attachment url.

GET /api/v2/help_center/articles/{article_id}/attachments.json

I now need to figure out how to grab it and use it to display the image. I'll update with my full code once complete.

Cheers.

Ok guys, so almost there, I can now get the URL of the attached image and display the URL in a div using JQUERY and AJAX. I am now trying to  get the URL into the src of an <img/> element by giving it an id. Any help would be appreciated.

This is my code below.

This must be run after:

{{#if promoted_articles}}
{{#each promoted_articles}}

in order to pick up the {{id}} of the article.

I should have an update by Monday but will keep checking to see if anyone has found a solution.

Cheers

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<script>

 $.ajax({
 url: 'https://xxxxxxxxxxxx.com/api/v2/help_center/articles/{{id}}/attachments.json',
 dataType: 'json',
 success: function(data) {
 $("#results").append(JSON.stringify(data.article_attachments[0].content_url));
 
 },
 error: function() {
 $("#results").append("error");
 }
 });

</script>


<p id="results"></p>

Hi again,

OK so I solved it. I'm a part time developer so this can obviously be improved to ensure the attachment is an image before displaying but that's all secondary and a lot easier after getting the image to display in the first place. So here is my little contribution in case any one needs it. The same principle can be used to display any data field.

API HELP CENTER DOC

Thanks again guys.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<script>
 $.ajax({
 url: 'https://xxxxxxxxxxxxx.com/api/v2/help_center/articles/{{id}}/attachments.json',
 dataType: 'json',
 success: function(data) {
 $("#results").attr("src",data.article_attachments[0].content_url); 
 },
 error: function() {
 $("#results").append("error");
 }
 });
 </script>
 <img id="results" src="">

Thank you, @Rkuwornoo! I was just about to suggest you set the img src via .attr(). Looks like you leveraged our API in just the right way to find a pretty good solution to the issue.

I love it when a plan comes together! @Rkuwornoo, thanks for coming back and sharing your solution. :)

If you'd like, feel free to write this up as a Tip in our Tips & Tricks section. We'll send you swag!

Hello,

Thanks for providing the code to display a list from Promoted Articles. How can we updated to display a 3 items list from a particular section?

{{#if promoted_articles}}
<section class="promoted-articles">
<h3>{{t 'promoted_articles'}}</h3>
<ul>
{{#each promoted_articles}}
<li>
<a href="{{url}}">{{title}}</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}

Thank you so much Rkuwornoo - it works!

I've used the code posted by Rkuwornoo above, but I want it to display several different images for more than one promoted article, in a block format. Does anyone know how this could be achieved?

Thanks

I am pretty new to this. How do you implement this code?
Cheers :)

@Liam it doesn't look like you received a response to your question. While I'm not able to assist with any sort of custom coding on my end, it may be worth taking a look at some documentation we have available:

• Using themes and templates to customize your Help Center
• Help Center CSS Cookbook
• Help Center Templates Introduction
• Help Center Javascript Cookbook
• Tips for using HTML to customize your Help Center

@Bonne, have you had a chance to look at our Editing your Help Center theme. The steps mentioned in the article I attached will walk you through editing your Guide theme where you can paste the above code.

Cheers!

Hi Brett, i have been using the edit code to create my own site. I am also using one of your opensource templates from github. However when it comes to this snipit i have been unable to figure it out.
Cheers

Hi Brett,
I think a little of both.
However i have had other issues trying to implement other components.
I started with the Nest template from Zendesklabs. I have edited it to how i like. However i would love to get preview of posts for the promoted articles which are the landing page, in addition to featured community posts which i guess are also promoted articles?

I ran into another issue today trying to add the ability to comment on articles, see image below. Support.fabcreator.com is the hc.

To find the above code i basically went into the default Copenhagen. Trying to do this guide in reverse. https://support.zendesk.com/hc/en-us/articles/221356508-Hiding-article-comments-with-curly-bars 
However i feel like maybe i am missing some other code this code is trying to refer to?
Kind regards,
Bonne