Icon before article title

回答済み

30 コメント

  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Lisa :),

     

    First, you need to add that image in the assets on the HC. See twitter.jpg image.

     

     

     If you want to add icon or image (jpg, png, etc) to the front of the article title  on article_page.hbs then add that icon or image to the front of article title code.

     

    See line no. 38 :

     

    See, the twitter image is added to the front of an article title.

     

     

     

    If you need to add the different-different icons or images for every article title then follow this article.  https://support.zendesk.com/hc/en-us/community/posts/360038804574-Sort-Articles-by-Label

     

     

    OR

     

    If you want to add icons or images to the front of the article list then same thing you can do on other pages e.g (section page, category page, etc.) add the image or icon to the front of {{title}}.

     

    category page, see line no. 42

     

     

     

    Section page, see line no. 46

     

    If any query let me know.

     

     

    Thank You

    Team

    0
  • Lisa Sedlak

    Thanks! 

     

    I wanted something for different articles. So I figured it out using this code and another. This is what I have in category_page:

    {{#if section.articles}}
    <ul class="article-list">
    {{#each section.articles}}
    <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}" class="icon-star"></span>
    {{/if}}

    {{#is id 360038868131}} <img src="{{asset 'updatebutton50x21.png'}} "/>{{/is}}

    For others, that number is a link to the article number. 

    I then added it to the section_page as well. 

    I then get this:

    So now my next question is, how do I get that image to show up BEHIND the text. I am trying some CSS stuff to see what I can do, but any help is appreciated. 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Lisa,

    You need to add code after the article title. Please see the given image line no. 45 to 50. 

     

    Result:

     

    Twitter image is added behind the text.

     

    This is on section template but same thing would be done on category page for showing the image behind the article text.

    Add article IDs with images after {{title}}  tag.

     

     

    You can do this by CSS code using  ::after  or  ::before.

     

    If any issue let me know :)

     

    Thank You

    Team

    0
  • Lisa Sedlak

    That did it! 

     

    Thank you so much! 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    :D Enjoy

    0
  • Lisa Sedlak

    I have hit a new snag. I have some articles that link directly to an outside site - like Terms of Use links to the external page so I don't have to change the text all the time. That is interfering with the code above. Not sure how to fix. Here is the code and then what it looks like. It doubles the title.

     

    <a href="{{url}}" class="article-list-link">
    {{title}}
    {{#is id 360038484732}} <img src="{{asset 'NewButton.png'}} "/>{{/is}}
    {{#is id 360038868131}} <img src="{{asset 'updatebutton.png'}} "/>{{/is}} </a>


    <a href="{{url}}" class="article-list-link">

    <a {{#is id 360039251672}} href="https://voice.com/legal/terms-of-use/" class="article-link" {{/is}}

    href="{{url}}" class="article-link">{{title}}</a>

     

     

     

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Lisa,

     

    You need to add this code in your script file after the document ready function:

      $('a[href*="360038927171"]').attr('href','https://voice.com/legal/terms-of-use/');
    $('a[href*="360039825452"]').attr('href','https://voice.com/legal/terms-of-use/');
    $('a[href*="360038927151"]').attr('href','https://voice.com/legal/terms-of-use/');

     

    You just need to update IDs of articles here:

    ('a[href*="360038927171"]') //Update the article ID

     

     Here add your external links:

    ('href','https://voice.com/legal/terms-of-use/')  // Update the link

     

     

    No need to add code for outside links on  hbs template.  Just paste that given code on your script file and update your article IDs and external links.

     

    If any issue let me know :)

     

    Thank You

    Team

     

    0
  • Lisa Sedlak

    I am sending you virtual Girl Scout cookies! Thank you so much! 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    :)

     

    0
  • Lucy Long

    What steps can I follow if I want to add an image before an article title that is just a normal article (not promoted or featured)? 

    Thanks!

    0
  • Nicole Saunders
    Zendesk Community Manager

    Hi Lucy - 

    The solutions above should work whether the articles have been featured/promoted or not. I don't see anything in the solution that indicates you have to feature or promote the article in order to use this code to insert an icon. 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Lucy,

    Nicole is right.

     

     

    You just need to
    upload image in the assets in hc
    add image before {{title}} on article page
    no need to check ID, promoted,featured and all
    save and publish
    It's done

    If any other query feel free to ask :)

    Thank You

    0
  • Lucy Long

    Thank you! So if I want to choose which articles I want to display the icon, then I will need to supply the article ID? 

    0
  • Danny Koss

    Is it possible to add icons to the search_results.hbs template? Specifically, I'm looking to add the lock fas icon to search results that are set to "internal."

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Danny,

    Go to your search_results.hbs file.

    Find for 'results-list-item-link'

    Add the given code before the '{{title}}'

     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" 
                         class="icon-lock {{#if is_external}} hide {{/if}}" title="{{t 'internal'}}">
                      <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
                      <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
                    </svg>


    Screenshot for the same:



    0
  • Danny Koss

    Hi Ifra, thanks very much for the response.

    I receive an error when using is_external - I'm guessing this may be because we are using a v1.0 API guide theme. Do you know if that might be the issue? If so, is there a way to reference internal/external articles in the search_results template using v1.0 API?

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Danny Koss, I tried in V1 theme and it's not possible from my side.

    0
  • Ashley Boose

    Hey Ifra, I was reading all the responses and comments trying to figure out how I can add icons just to certain articles. I don't want to use the article id way, because we'll probably be posting a good bit of content that we'd like the icon applied to, which would mean we'd have to go add the article id code every time. I'm actually trying to add the lock icon that shows up on the "internal" articles to other articles in our HC that are considered internal, but since they have custom permissions, the icon doesn't show up. Do you have any ideas for me? PS -- I saw a link above that mentioned adding different icons to various articles, but when I clicked on it, the post was gone.

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Ashley Boose, icon will be show on the template if your article's setting is

    Visible to only Agents and Admin.

     

     

    And your section template has this code snippet for lock icon.

    {{#if internal}}
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
      <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
      <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
      </svg>
    {{/if}}



    Screenshot for same:





    OutPut:

     

     

    If any query feel free to ask.

     

    Have a good day!  :)

     

    0
  • Ashley Boose

    Thank you Ifra for your quick response! I understand that the lock icon will show up when article is visible to Agents and Admins only, and ours does this. However, we have created a custom segment called "Gated Access" that is visible to Agents and Admins AND a few other specific end-users that are partners of our company. We would like to be able to flag these articles as internal as well, but of course the lock icon doesn't show up for these articles. Also, there is no way to identify these articles, that I know of, in order to add the icon via Javascript or anything else. Do you have any ideas for me on this? Even if I just wanted to manually add the icon in each article title, I can't think of a way to add one that would work unless it's a symbol and even then it looks like this: 🔒.

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Ashley Boose,

    If you added a "Labels" to your articles for your "Gated Access"  users I mean like this,

     

     

    add the script code to the script.js file at the bottom area,

    $(".article-label:contains('gate_access')").html('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" ><rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/><path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/></svg>');


    Screenshot for the same:



     

     

    then check the label with the given code by adding to category, section and article page same as I shared the screenshots,

    Source Code

    <div class="article-label">
    {{#each labels}}
      {{identifier}}
    {{/each}}
    </div>

    -----------------------------------------------------------------------

    Screenshots For The Same-

    Category Page


    Output - Lock icon beside the promo article






    Section Page

    Output - Lock icon beside the promo article





    Article Page


    Output - Lock icon beside the promo article



     

    Try this and let me know :)

    Thanks

     

    0
  • Ashley Boose

    Hey Ifra, thank you so much for helping me with this, I really appreciate it. I am having one issue though. I added the code as you said, but I think instead of showing the icon on the article with the specific label, it is showing the labels for each article next to the titles for any/all articles that have them. (Screenshots of section page and article below). 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Ashley Boose

     

    Add this script code to your script.js file at the bottom as well  (I have mentioned in my above comment):

    $(".article-label:contains('gated_access')").html('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" ><rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/><path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/></svg>');


    Screenshot for the same:


     

    and make sure your document_head.hbs file has this CDN like below:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>



    Screenshot for the same:




     

    If any confusion, let me know :)

     

    0
  • Ashley Boose

    Hey Ifra, I have added all the code as you said. I added the following to my script.js file:

    $(".article-label:contains('gated_access')").html('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" ><rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/><path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/></svg>');

    I added the following to my section, category and article pages in the place(s) that you specified:

    <div class="article-label">{{#each labels}}{{identifier}}{{/each}}</div>

    Then I added the following to the document_head.hbs file:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> 

    Now the lock icon IS showing up on the article where that label has been added, but the only problem I'm still having is that all the other articles that have other labels are showing the label names by the titles in the category, section and article pages as well. (See screenshots.) From what I listed above, can you tell what I could've done to make this happen?

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Ashley Boose,

    Remove previous line of code and use this code snippet:

    var divs= document.getElementsByClassName('article-label');
     for (var i = 0, len = divs.length; i < len; ++i) {
       if(divs[i].innerHTML.indexOf("gate_access") !== -1) {
        divs[i].innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" ><rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/><path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/></svg>';
        } else {
           divs[i].style.display = "none";
        }
    }
    0
  • Ashley Boose

    Ifra, you're amazing! That worked perfectly. I appreciate you taking the time to help me with this so much--you have no idea. Thank you, thank you!

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Glad to hear that it worked for you!

     

    0
  • Marsy

    Hello, I am trying to add icons to sections before the title name.  Do you happen to have any suggestions on coding for this?  I tried a few variations that are not working for me.

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Marsy

    There is easy and simple way,

    Go to the section_page.hbs file.

    Check the section id.

    Add icon on section page like below:

    For font image

    {{#is section.id 123456789}} <img src="{{asset 'updatebutton50x21.png'}} "/>{{/is}}


    Screenshot for the same:




    For font icon

    {{#is section.id 123456789}} <i class="fas-fa-pencil"></i> {{/is}}



    123456789 -- Section ID
    updatebutton50x21.png -- Image name
    <i class="fas-fa-pencil"></i> -- Icon name

     

    If any confusion let me know :)

    Thanks

     

    0

サインインしてコメントを残してください。

Powered by Zendesk