How do I add a banner in a section? (Copenhagen Theme)

12 Kommentare

  • Trapta
    Community Moderator

    Hi Andreas Ribbfors,

    You can replace the code of category_page.hbs template in your Copenhagen theme with the below code:

    <div class="container-divider"></div>
    <div class="container">
    <nav class="sub-nav">
    {{breadcrumbs}}
    {{search submit=false}}
    </nav>

    <div class="category-container">
    <div class="category-content">
    <header class="page-header">
    <h1>{{category.name}}</h1>
    {{#if category.description}}
    <p class="page-header-description">{{category.description}}</p>
    {{/if}}
    </header>

    <div class="section-tree">
    {{#each sections}}
    <section class="section">
    <h2 class="section-tree-title">
    <a href="{{url}}">{{name}}</a>
    </h2>
    {{#if articles}}
    <ul class="article-list">
    {{#each articles}}
    <li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}" class="icon-star"></span>
    {{/if}}
    <a href="{{url}}" class="article-list-link">{{title}}</a>
    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </li>
    {{/each}}
    </ul>
    {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/if}}
    {{/if}}
    </section>
    {{else}}
    <i class="category-empty">
    <a href="{{category.url}}">{{t 'empty'}}</a>
    </i>
    {{/each}}
    </div>
    </div>

    {{#each sections}}
    {{#is id SECTION_ID}} /* Replace SECTION_ID with your section id */
    <div class="banner">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Top_read_sep_17_2017.png/300px-Top_read_sep_17_2017.png">
    </div>
    {{/is}}
    {{/each}}
    </div>
    </div>

    At the bottom of your style.css file add:

    img {max-width: 100%;}

    Let me know if this solves your issue.

    Thanks

    0
  • Andreas Ribbfors

    Sadly it doesn't work.

    The section name just moves abit like this:




    Do I need to specify the image source in the style.css like I need to in HTML?

    I replaced the "SECTION_ID" with 360001496772 which is the sections ID.

    Do you have any suggestions? 



     

    0
  • Trapta
    Community Moderator

    @Andreas Ribbfors, can you share the URL of your HC so that I can provide you the exact code snippet you need for your HC?

    Thanks

    0
  • Andreas Ribbfors

    Trapta

    Of course, thanks!

    https://soluno.zendesk.com/hc/en-gb

    0
  • Trapta
    Community Moderator

    @Andreas Ribbfors, in your style.css file at line no. 923 remove text-align: center; 

    It will align the section name in your HC. Also, I cannot see where you have added the banner? You need to upload the banner in assets and then use it in the template.

    Let me know if this solves your issue.

    Thanks

    0
  • Andreas Ribbfors

    I've added it like this:


    But I'm missing something, the centered part of the section  hearders are fixed, but there is still no banner.
    What am I missing?

    0
  • Trapta
    Community Moderator

    Andreas Ribbfors, replace {{asset 'unnamed.jpg'}} in your code with <img src="{{asset 'unnamed.jpg'}}" />

    Let me know how it goes for you.

    Thanks

    0
  • Andreas Ribbfors



    But the result still remains:


     :(

    0
  • Trapta
    Community Moderator

    Andreas Ribbfors, have you uploaded the banner in the assets folder? Your code is correct. It is weird why it is not showing banner.

    Thanks

    0
  • Andreas Ribbfors

    Yeah, it's uploaded:



    0
  • Trapta
    Community Moderator

    Andreas Ribbfors, please make the changes public so we will why the image is not loading.

    Thanks

    0
  • Andreas Ribbfors

    It should be public, everything is published and if I make any other changes I'll see them even when I'm not logged in.

    Do I need to do anything else?

    (Changed the page and changed back).

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk