Article header images

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>

Articles referenced:

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

Thanks
Nick

Ifra Saqlain

11 de maio de 2023 13:11
Editado

Community Moderator

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

Article header images

1 Comentários

Não encontrou o que estava procurando?