Add HTML to the Category Description

21 Comments

  • Andrea Saez
    Comment actions Permalink

    Hi Marci,

    Yes, you would have to create a custom JS script that tells the Help Center when and how to replace text/images/headers.

    Here's an example

    0
  • Marci Abraham
    Comment actions Permalink

    Hi Andrea,

    Thanks for the direction...unfortunately that image is so small I can't read it. Did that come from another thread somewhere? Can you point me at it?  I'm just a hacker...I have to learn from other people's code and comments. Thanks!

    1
  • Andrea Saez
    Comment actions Permalink

    Here you go:

    | /* Replace images and text in categories*/ | |   | if ("Category1" == "Category1") { | |   | $(".large-main-image").css("background-image", "url('//p1.zdassets.com/hc/theme_assets/112345/123123/category1-image.png')").css("height", "351px").css("margin-top", "20px"); | |   | $(".subtext-stronger").html("Read everything you need to know about Category 1 here!."); | |   | } else if ("Category1" == "Category2") { | |   | $(".large-main-image").css("background-image", "url('//p1.zdassets.com/hc/theme_assets/16458/255345/API-pannel-new.png')").css("height", "351px").css("margin-top", "-50px"); | |   | $(".subtext-stronger").html("More stuff here!."); | |   |   | |   | } |

    0
  • Andrea Saez
    Comment actions Permalink

    ugh sorry, that didnt format properly...

     

    /* Replace images and text in categories*/
     if ("Category1" == "Category1") {
    $(".large-main-image").css("background-image", "url('//p1.zdassets.com/hc/theme_assets/112345/123123/category1-image.png')").css("height", "351px").css("margin-top", "20px");
     $(".subtext-stronger").html("Read everything you need to know about Category 1 here!.");
     } else if ("Category1" == "Category2") {
    $(".large-main-image").css("background-image", "url('//p1.zdassets.com/hc/theme_assets/16458/255345/API-pannel-new.png')").css("height", "351px").css("margin-top", "-50px");
    $(".subtext-stronger").html("More stuff here!.");

    1
  • Marci Abraham
    Comment actions Permalink

    Thanks, Andrea. I'll play around with that and see what I can make it do. :)

    0
  • Matthieu ETIENNE
    Comment actions Permalink

    HI,

    Will be happy to understand this solution but on a lower level.

    We want to know if there is a way, using  JS or CSS to format on the  text of every category description (bold, bullets, Italic, indent etc.).

    Thanks

     

    1
  • Peter Andersen
    Comment actions Permalink

    I would like the same as Mattieu.. :-) 

    Where would i enter that code ? i need to style both category and section..

    Regards ;-)

    1
  • Wes Drury
    Comment actions Permalink

    @Peter - Can you give me a little more details on what you are trying to accomplish.  You can easily style things using JQuery if needed but I would always try and style with CSS first.

    0
  • Rowan Walker
    Comment actions Permalink

    Wes - I think the jQuery is a work around - a hack. What Marci is trying to achieve would be pretty common (I'm trying to do the same); add some basic formatting to the section or category descriptions.

    I've tried both HTML and Markdown, but when published, both formats aren't parsed and are just verbatim outputted.

    1
  • Rowan Walker
    Comment actions Permalink

    OK - I've just come up with a fix.

    In your theme's JS file add the following code to allow you to use HTML in your section & category descriptions.

    $('.description').html( $('.description').text() );

    The class/container element will depend on your theme. You'll also need to make sure it's run after the required HTML is ready (call in your footer or within an window.onload function). It also assumes your theme is using jQuery (I think this might even be required by Zendesk - so you should be safe).

    3
  • Joshua Stewart
    Comment actions Permalink

    @Rowan

    Good find! I have been trying to use this in our theme with no luck. I've even added it as script in the section_page.hbs. Is there another trick to get it to work?

    Thanks!

    Edit: Nevermind! I had to change the class name.

    1
  • Jessie Schutz
    Comment actions Permalink

    I'm glad you got it figured out, Joshua!

    0
  • Becky Boyce
    Comment actions Permalink

    Hoping someone can help - I applied @Rowan fix above and it appears to work, but now I get an error screen at random times (when I don't get the message it actually displays the correct description that has HTML in it):

    502 Bad Gateway


    nginx

    any ideas?

    0
  • Amy Gracer
    Comment actions Permalink

    I appreciate the solution, but I don't 100% follow.

    The description class is page-header-description.

    So I added this to my script.js file.

    //Edit HTML in Description of category and section pages
    $('page.header.description').html( $('page.header.description').text() );

    But as I'm sure you know, it's not working :)

    What do I have to do to add line breaks, character formatting, and links to the Descriptions of Sections and Category pages?

     

    1
  • Karl Löfdahl
    Comment actions Permalink

    Rowan Walker
    This solution works good for me in Chrome, but it does not seem to work in Internet Explorer

    $('.description').html( $('.description').text() );

    If someone knows a fix for that, please let me know.

    1
  • Amy Gracer
    Comment actions Permalink

    Karl

    This is working on my site in Chrome and Explorer. I am only using it on the section page, but I imagine Category should be the same, just replacing section with category.

    $('section.description').html( $('section.description').text() );

    If it doesn't want on your category, try the section as above and see if that works. If that fails, too, then we might have it narrowed down to your IE settings?

    0
  • Karl Löfdahl
    Comment actions Permalink

    Amy Gracer

    I am indeed doing this for section descriptions, although in a different manner. 

    I am specific about which ones should use HTML by targeting IDs. I have good reason for doing it like this. 
    It works on modern browsers but displays the HTML as plain text in IE11. 

    example: 

    $('#desc_id_360001778878').html( $('#desc_id_360001778878').text() ); 

     

    0
  • Jason
    Comment actions Permalink

    I tried what has been suggested by placing the JS in the script file: 

     

    Next, I tried adding some sample html in a category description. The text is not rendered as expected:

     

    I also tried being more specific by using the desc_id as Karl suggested above but this didn't help in my case. Is there something else I need to do? I tested this in Chrome.

     

    0
  • Amy Gracer
    Comment actions Permalink

    Jason 

    Try eliminating the <DOCTYPE> <HTML> and <Body> tags and limit to just paragraph and character styles.

    1
  • Jason
    Comment actions Permalink

    Thanks, Amy but I still don't see the html being rendered. Am I doing all the things I need to do? I put the js line in the script.js file:

    $('category.description').html( $('category.description').text() );

    Then just put tags in the plain text edit field for the category. I didn't change the CSS or anything else.

     

    0
  • Amy Gracer
    Comment actions Permalink

    Jason

    Sorry for the late reply. When I first tried this, I had the same problem, and  it was due to an undiagnosed problem with my JS file. Zendesk didn't catch it.

     

    When it wasn't working, I ran the JS through a code checker and it identified the problems. Check out this one: https://jslint.com/

    Once the error was found and corrected, the code worked. 

    This is my code snippet, and it appears before the final });

      //starting custom code
    // HTML in section
    $(".page-header-description").html($(".page-header-description").text());
    $(".category-description").html($(".category-description").text());
    $(".section-description").html($(".section-description").text());

     

     

    0

Please sign in to leave a comment.

Powered by Zendesk