• Ifra Saqlain

  • 29 février 2020 19:12
  • Modifié

  Community Moderator

  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

• Lisa Sedlak

  • 26 février 2020 20:26

  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. 

• Ifra Saqlain

  • 29 février 2020 19:13
  • Modifié

  Community Moderator

  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

• Lisa Sedlak

  • 27 février 2020 19:28

  That did it! 

   

  Thank you so much! 

• Ifra Saqlain

  • 28 février 2020 16:34

  Community Moderator

  :D Enjoy

• Lisa Sedlak

  • 2 mars 2020 15:34

  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>

   

   

   

  

  

• Ifra Saqlain

  • 2 mars 2020 19:29

  Community Moderator

  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

   

• Lisa Sedlak

  • 2 mars 2020 19:47

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

• Ifra Saqlain

  • 2 mars 2020 20:15

  Community Moderator

  :)

   

• Lucy Su

  • 26 mars 2020 18:23

  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!

• Nicole S.

  • 26 mars 2020 18:36

  Zendesk Community Team

  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. 

• Ifra Saqlain

  • 26 mars 2020 19:02
  • Modifié

  Community Moderator

  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

• Lucy Su

  • 26 mars 2020 19:10

  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? 

• Ifra Saqlain

  • 26 mars 2020 19:50
  • Modifié

  Community Moderator

  Yes :)

   

  Go through this article

   

  https://support.zendesk.com/hc/en-us/community/posts/360042268273-How-to-add-icons-symbols-to-article-titles?page=1#community_comment_360010851494

Vous devez vous connecter pour laisser un commentaire.