Adding images/icons into the Copenhagen Theme

Respondida

18 Comentarios

  • Trapta
    Acciones de comentarios Permalink

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

    4
  • Jennifer Rowe
    Acciones de comentarios 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
    Acciones de comentarios Permalink

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

    2
  • Wes Drury
    Acciones de comentarios 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
    Acciones de comentarios Permalink

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

    0
  • Deb Chatigny
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios Permalink

    Thanks for being so helpful, @Anonymous!

    0
  • Robert Koch
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios Permalink

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

    0
  • Lucas
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios Permalink

    Trapta - Perfect, thanks!

    0
  • Sophie Weckemann
    Acciones de comentarios Permalink

    Hey all, for some reason neither of the methods works for me, the icons are not being displayed. Does anyone have any general suggestions for troubleshooting? I know this is fishing broadly but maybe anyone else has come across issues while trying this out?

    Thanks in advance!

    0
  • Ruthy Licht
    Acciones de comentarios Permalink

    Sophie Weckemann

    I had a similar issue last week- 

    after playing with it a lot I found a <sections> part on the hbs file

    We do not have sections included in our subscription, so I removed it to un-clutter- and this did the trick!

     

    0
  • Sophie Weckemann
    Acciones de comentarios Permalink

    Ruthy Licht thanks a lot! 

    I took another look at the sections part of our hbs file and noticed that we actually use sections on our home page. Adding the code to the sections part of the file instead of the categories part did the trick for me. Thanks for the nudge :)

    1

Iniciar sesión para dejar un comentario.

Tecnología de Zendesk