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

31 Comments

  • Paul Tarling
    Comment actions Permalink

    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 :(

    0
  • Wes Drury
    Comment actions Permalink

    @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}}

    1
  • Paul Tarling
    Comment actions Permalink

    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?

    0
  • Wes Drury
    Comment actions Permalink

    @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.

    0
  • vijay
    Comment actions Permalink

    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? 

    0
  • Paul Tarling
    Comment actions Permalink

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

    0
  • vijay
    Comment actions Permalink

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

    0
  • vijay
    Comment actions Permalink

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

     

    0
  • Paul Tarling
    Comment actions Permalink

    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. 

    0
  • vijay
    Comment actions Permalink

    Sure I will.

    0
  • Wes Drury
    Comment actions Permalink

    @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();

    1
  • vijay
    Comment actions Permalink

    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?

    0
  • vijay
    Comment actions Permalink

    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}}

     

    0
  • Rkuwornoo
    Comment actions Permalink

    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.

    1
  • Wes Drury
    Comment actions Permalink

    @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.

    1
  • Elliott B.
    Comment actions Permalink

    @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.

    0
  • Rkuwornoo
    Comment actions Permalink

    @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.

    0
  • Rkuwornoo
    Comment actions Permalink

    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>
    0
  • Rkuwornoo
    Comment actions Permalink

    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="">
    1
  • Elliott B.
    Comment actions Permalink

    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.

    0
  • Jessie Schutz
    Comment actions Permalink

    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!

    0
  • Yeny Rubiano
    Comment actions Permalink

    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}}

    0
  • Vlad Sopov
    Comment actions Permalink

    Thank you so much Rkuwornoo - it works!

    0
  • Liam
    Comment actions Permalink

    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

    0
  • Bonne Wilce
    Comment actions Permalink

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

    0
  • Brett - Community Manager
    Comment actions Permalink

    @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:

    @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!

    0
  • Bonne Wilce
    Comment actions Permalink

    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

     

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hey Bonne,

    Where exactly are you running into issues? Are you just trying to find the location where you need to paste the code or are you running into issues with the code working on your site?

    0
  • Bonne Wilce
    Comment actions Permalink

    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.

    0
  • Bonne Wilce
    Comment actions Permalink

    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  

    0

Please sign in to leave a comment.

Powered by Zendesk