Article header images | The place for Zendesk users to come together and share
Skip to main content
Feedback submitted

Article header images

Related products:Knowledge
  • May 11, 2023
  • 1 reply
  • 23 views
N

Hi there

Hopefully someone can help :)

Seeking to serve a defined header image on article pages, and if no header image is defined then serve a default image.

Below serves the defined image of the first article (6701953412509) but the second article (6699434047005) header is the default:

  <div class="welcome__bg {{#if settings.welcome_mask_enable}}welcome__bg--with-mask{{/if}}">
          {{#is article.id 6701953412509}}
                  <img class="welcome__bg-image is-hidden--ui-dark" src="{{asset 'suitcasesatairport.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
                <img class="welcome__bg-image is-hidden--ui-light" src="{{asset 'suitcasesatairport.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
 

        {{#is article.id 6699434047005}}
                  <img class="welcome__bg-image is-hidden--ui-dark" src="{{asset 'cabin.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
                <img class="welcome__bg-image is-hidden--ui-light" src="{{asset 'cabin.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
                  {{/is}}    

           {{else}}
                  <img class="welcome__bg-image is-hidden--ui-dark" src="{{settings.welcome_bg}}" alt="{{settings.welcome_title}}" data-plugin-load-image>
                <img class="welcome__bg-image is-hidden--ui-light" src="{{settings.welcome_bg_dark}}" alt="{{settings.welcome_title}}" data-plugin-load-image>
              {{/is}}   

    </div>

 

 

This resolves, but obviously no default image when not defined as  {{else}} is removed.

    <div class="welcome__bg {{#if settings.welcome_mask_enable}}welcome__bg--with-mask{{/if}}">
      {{#is article.id 6701953412509}}
      <img class="welcome__bg-image is-hidden--ui-dark" src="{{asset 'suitcasesatairport.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
        <img class="welcome__bg-image is-hidden--ui-light" src="{{asset 'suitcasesatairport.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
 
{{/is}}
        {{#is article.id 6699434047005}}
      <img class="welcome__bg-image is-hidden--ui-dark" src="{{asset 'cabin.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
        <img class="welcome__bg-image is-hidden--ui-light" src="{{asset 'cabin.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
      {{/is}}
    </div>

Articles referenced:

  1. https://blueislands.zendesk.com/hc/en-gb/articles/6701953412509
  2. https://blueislands.zendesk.com/hc/en-gb/articles/6699434047005

I'm sure it's a simple fix! If anyone can help that would be amazing!

Thanks
Nick

    1 reply

    Ifra
    • Ifra
    • Newcomer
    • May 11, 2023

    Hi @nick,

    I worked around your query:

    i). Go to the article_page.hbs file and remove the conditions from images.

    <div class="welcome__bg {{#if settings.welcome_mask_enable}}welcome__bg--with-mask{{/if}}">

    <img class="default_image welcome__bg-image is-hidden--ui-light" src="{{asset 'suitcasesatairport.jpg'}}" alt="{{article.title}}" data-plugin-load-image>

    <img class="image_one welcome__bg-image is-hidden--ui-dark" src="{{asset 'suitcasesatairport.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
    <img class="image_one welcome__bg-image is-hidden--ui-light" src="{{asset 'suitcasesatairport.jpg'}}" alt="{{article.title}}" data-plugin-load-image>


    <img class="image_two welcome__bg-image is-hidden--ui-dark" src="{{asset 'cabin.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
    <img class="image_two welcome__bg-image is-hidden--ui-light" src="{{asset 'cabin.jpg'}}" alt="{{article.title}}" data-plugin-load-image>

     </div>

     

    ii). Add the code to your script.js file at the bottom area.

    if(window.location.href.indexOf("6701953412509") > -1) {
      $(".default_image").css('display','none');
      $(".image_one").css('display','block')
    }else{
      $(".image_one").css('display','none')
    }

    if(window.location.href.indexOf("6699434047005") > -1) {
      $(".default_image").css('display','none');
      $(".image_two").css('display','block')
    }else{
    $(".image_two").css('display','none')
    }

     

    Try the above code and it will definitely work :) and if any error accurs, let me know.

    Thanks

     

    If you need any help, feel free to ask :)
    Terms & ConditionsAccessibility statement