Adding images/icons into the Copenhagen Theme

Answered

15 Comments

  • Trapta
    Comment actions Permalink

    @Wes, looks like someone beat you to it. :-)
    Great tip @anonymous. Thanks for sharing it.

    4
  • Jennifer Rowe
    Comment actions Permalink

    Well, we are glad that you stopped lurking and posted such a great tip! Moderator Wes inspires a lot of people. :)  

    As thanks for your contribution, look for a link for a Zendesk t-shirt in your inbox! 

    Thanks for sharing this!

    3
  • Anonymous
    Comment actions Permalink

    @Jennifer, yes he sure does and thanks for the t-shirt :)

    2
  • Wes Drury
    Comment actions Permalink

    @Anonymous - Great tip and glad you were able to piecemeal my code snippets together from the various post.  I know the community members will be grateful that everything is in one post.  Keep up the great work!

    1
  • Christen Bejar Sandbox
    Comment actions Permalink

    Thank you for this tip! It's helped a ton!

    0
  • Deb Chatigny
    Comment actions Permalink

    @Anonymous, this is great! I was trying to find out why my images weren't showing up in both our English and Spanish categories, but I was using English words to identify the categories:

    {{#is name 'category name'}}<img src="{{image_name.png'}}" alt="alternative text here" />
    {{/is}}

    Now, using the category IDs instead, the images are appearing in both help centers.

    {{#is id 115008316527}}<img src="{{image_name.png'}}" alt="alternative text here" />
    {{/is}}

    Thank you!!

    0
  • Anonymous
    Comment actions Permalink

    @Deb I'm glad you were able to resolve your issue with the ID.  I'm glad you found the code useful and easy to implement.  Best of luck with your Help Center.

    0
  • Nicole - Community Manager
    Comment actions Permalink

    Thanks for being so helpful, @Anonymous!

    0
  • Robert Koch
    Comment actions Permalink

    is there a way to hide the description with this, aside from deleting the description? Maybe only have the description show when hovering over the category?

    0
  • Jessie Schutz
    Comment actions Permalink

    Hey Robert!

    I can't give detailed info on how to do it, not being familiar enough with Javascript, but I'm fairly certain you can use JS to manipulate the way that content displays (or not). We don't have any tips that address that specifically but we have lots of coding gurus here in the Community that may be able to help!

    0
  • Robert Koch
    Comment actions Permalink

    @Jessie - we actually figured out how to do it. It just requires adding some code to the sytles.css file - super easy actually and does not need to involve JS. 

    0
  • Jessie Schutz
    Comment actions Permalink

    Fantastic! I'm glad you got it figured out!

    0
  • Lucas
    Comment actions Permalink

    When using the jQuery method, if no image exists for a category a blank box is displayed.

    Is there a code modification which will display images if they exist in the document head, but show only the heading if there is no image.

    0
  • Trapta
    Comment actions Permalink

    Hi Lucas

    As per the code, in your template replace

    <img src="{{asset 'ajax-loader.gif'}}" class="icon" data-title="{{id}}">

    with 

    <img src="{{asset 'ajax-loader.gif'}}" class="icon hide" data-title="{{id}}">

    and at the bottom of your style.css file add:

    .hide {display: none;}

    In your script code replace:

    <script>
      $('.icon').each(function (idx, itm){
        var categoryID = $(this).attr('data-title');
        $(itm).attr('src', categoryIcons[categoryID]);
        $(itm).removeClass('hide');
      });
    </script>

    Let me know if this solves your issue.

    Team Diziana

    0
  • Lucas
    Comment actions Permalink

    Trapta - Perfect, thanks!

    0

Please sign in to leave a comment.

Powered by Zendesk