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.
Articles referenced:
- https://blueislands.zendesk.com/hc/en-gb/articles/6701953412509
- 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
-
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
Vous devez vous connecter pour laisser un commentaire.
1 Commentaires