How can I change the header image per board id?

[shadav]

how would I be able to trigger for the header image to change according to the board id?

need some sort of if statement for

Code Select Expand

<header class="head-er" id="top">

not sure what or how something along the lines of

Code Select Expand

if board(some string here telling it to get the board id)<header class=head-er(some string here to get the board id) id="top"
else <header class="head-er" id="top">

and then in the css need to somehow get it to pull the info

Code Select Expand

.head-er01 {
    background: url("board1 background image") no-repeat scroll center center / cover ;
yada yada yada}
.head-er04 {
    background: url("board1 background image") no-repeat scroll center center / cover ;
yada yada yada}
ect

any help is greatly appreciated

[Sir Osis of Liver]

Board id is $board, you have to globalize it to make it available in templates.

Code Select Expand



function template_main()
{
global $context, $settings, $options, $scripturl, $modSettings, $txt, $board;

echo 'board = ' . $board;



[Antechinus]

Ok, remember how the other week you were grumbling about some daft code in my Mutant's index.template.php? Said daft code was specifically for situations like this.

Code Select Expand

// Allow setting body tag class by action or board.
$body_class = array();
if (!empty($context['current_action']))
$body_class[] = 'action_'. $context['current_action'];
elseif (!empty($context['current_topic']))
$body_class[] = 'action_display';
// elseif (!empty($context['current_board']))
// $body_class[] = 'board_'. $context['current_board'];
// elseif (!empty($context['current_topic']))
// $body_class[] = 'topic_'. $context['current_topic'];
if (!empty($context['max_menu_id']))
$body_class[] = 'area_' . $context['menu_data_' . $context['max_menu_id']]['current_area'];
if (!empty($context['current_subaction']))
$body_class[] = 'subaction_' . $context['current_subaction'];
if (empty($body_class))
$body_class[] = 'action_index';

echo '
</head>
<body', ($context['theme_variant'] != '') ? ' id="variant'. $context['theme_variant']. '"' : '', ' class="', implode(' ',$body_class), '">';
}

As it happens I commented out board ID, because I wasn't sure how many classes I should throw at the thing by default, but the code is there if anyone wants to use it (in any theme). If you want a simplified version that will only do board ID, this should do it:

Code Select Expand

<body', (!empty($context['current_board'])) ? ' class="board_'. $context['current_board']. '"' : '', '>';

This doesn't need $board in the globals. Globals for that function are:

Code Select Expand

// The main sub template above the content.
function template_html_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

And obviously you can make it assign an ID instead of a class, and you can throw the code at any other tag if you don't want it on the body tag.

ETA: Oh, you want head-er? Why the hyphen? Seems a bit bonkers. Anyway...

Use the same code to throw a class on the body tag if you are inside a board, then CSS:

Code Select Expand

.head-er {background: url(default_bugger.png) center cover;}
.board_1 .head-er {
    background-image: url(board_1_lolcat.jpg);}
.board_4 .head-er {
    background-image: url(board_4_dancing_bananas.gif);}


They should all pick up the initial positioning/cover/whatever crud, and just switch images according to the later declarations. If you're using cover you don't really need no-repeat (coz cover covers the whole kaboodle hey). Scroll is default, so never needs to be declared. You only need to declare background-attachment if you want something that won't scroll (ie: fixed background image or whatever).

[shadav]

yeah...success..... 
thank you both

lmfao er....the head-er was what the theme creator used (tearing apart the greeny theme  as it matched my sites theme pretty well)....it may eventually bug me enough to change it, but it works so oh well

if anyone wants to see it in action
normal header - http://shadav.com/forum/

a few board specific headers
http://shadav.com/forum/arrowverse/
http://shadav.com/forum/mcu/
http://shadav.com/forum/b5/
http://shadav.com/forum/bsg/

[shadav]

  hm...well....about that....
so it does work....but....when reading a post within that board it reverts to the normal header image.....any ideas on how to fix that?

[Antechinus]

Ah. Ok. Weird, since ['current_board'] is used by Display.php and for getting stuff for the linktree. Should be doable. That's going to require more coffee though (is Sunday morning here).

Looks like you might need $board after all. Globals for Display.php main function are:

Code Select Expand

// The central part of the board - topic display.
function Display()
{
global $scripturl, $txt, $modSettings, $context, $settings;
global $options, $sourcedir, $user_info, $board_info, $topic, $board;
global $attachments, $messages_request, $topicinfo, $language, $smcFunc;

Will have more covfefe and think about it.

[Antechinus]

Ah yes.  You're running all the whatsits up in function template_html_above()

I was assuming you wouldn't want all of those, and would only want the ternary to assign class via board ID. That should work on its own, without all of this:

Code Select Expand

// Allow setting body tag class by action or board.
$body_class = array();
if (!empty($context['current_action']))
$body_class[] = 'action_'. $context['current_action'];
elseif (!empty($context['current_topic']))
$body_class[] = 'action_display';
elseif (!empty($context['current_board']))
$body_class[] = 'board_'. $context['current_board'];
// elseif (!empty($context['current_topic']))
// $body_class[] = 'topic_'. $context['current_topic'];
if (!empty($context['max_menu_id']))
$body_class[] = 'area_' . $context['menu_data_' . $context['max_menu_id']]['current_area'];
if (!empty($context['current_subaction']))
$body_class[] = 'subaction_' . $context['current_subaction'];
if (empty($body_class))
$body_class[] = 'action_index';

However, if you want to keep all of those for extra styling possibilities then the best arrangement would be this:

Code Select Expand

// Allow setting body tag class by action or board.
$body_class = array();
if (!empty($context['current_action']))
$body_class[] = 'action_'. $context['current_action'];
elseif (!empty($context['current_board']))
$body_class[] = 'board_'. $context['current_board'];
if (!empty($context['current_topic']))
$body_class[] = 'action_display';
if (!empty($context['max_menu_id']))
$body_class[] = 'area_' . $context['menu_data_' . $context['max_menu_id']]['current_area'];
if (!empty($context['current_subaction']))
$body_class[] = 'subaction_' . $context['current_subaction'];
if (empty($body_class))
$body_class[] = 'action_index';

And then you'd use this on the body tag:

Code Select Expand

<body class="', implode(' ',$body_class), '">';

[shadav]

  that seems to work
thank you again

[shadav]

ok well.....

sory.....well testing some responsiveness noticed that it doesn't appear to work on mobiles 

[Antechinus]

Sounds amusing. Does your theme, or one of your scripts, do anything odd to the body tag on mobile?

[shadav]

not that I'm aware of

the only thing I know that touched the body tag was the multi quote mod

[Antechinus]

Ok. Bit hard for me to diagnose. I don't use mobile online myself, although I suppose I could try user agent switching. Thing is, if the body tag class isn't being messed with, and the header tag/class isn't being messed with, then it should work. I'm still getting your example header images even in a mobile-sized window on desktop, which implies something is going on with your device, or with how it's being detected by your site.

Can you run the document inspector on mobile and see what the markup and CSS is doing?

[shadav]

can't figure out how to get inspector on mobile

strange...so i checked with safari (I hate safari) and it works.....but when using chrome it doesn't work....so guess it's just something with my phone

eh too bad lolol

I don't really use my phone either but I do try to test every now and then and make sure things appear to be working on mobile  that I didn't completely break something somewhere 

[Antechinus]

Ok, I'll try Chrome (bleh ) on desktop and see what happens.

ETA: Still works.

[shadav]

desktop works just fine.....but mobile doesn't for some reason.....
oh well....it's ok, thank you though....
seems to be an issue with the chrome app as it appears to work on safari.....

thank you again

[Antechinus]

https://dev.to/dev0x0/using-google-chrome-console-on-any-mobile-device-9ec

https://www.browserstack.com/question/660

Might help.

[Antechinus]

Had a thought about this one. It's an interesting case, because it implies problems with the way 2.1 does the same thing with body class.

Taking a guesstimate at it, I think Chrome on iOS (which I assume is what we are talking about) is messing with the body tag itself. It's about the only way you would get this result. Often on websites you'll see all sorts of classes thrown at high level tags for various purposes, so if Chrome is forcibly doing something like this:

Code Select Expand

<body class="oh_hai i_iz_chrome iz_my_tag_not_yours so_there mawhahaha dont_be_evil gimme_all_your_data">

...then this would screw up the calling board ID for setting banners by board. If that's what is happening, the way to outsmart the fiendish little bugger would be to forget about assigning classes to the body tag and use another tag which Chrome doesn't know about.

Since you only want to swap banners by board, the controlling classes don't need to be on the body tag. You can use any tag you like as long as it's a parent of .head-er (like #intro in your case) or you can use .head-er itself.

Suggestion. Change this back to a boring old vanilla body tag:

Code Select Expand

<body class="', implode(' ',$body_class), '">';

And try this instead:

Code Select Expand

<header class="head-er ', implode(' ',$body_class), '" id="top">

With CSS:

Code Select Expand

.head-er {background: url(default_bugger.png) center cover;}
.head-er.board_1 {
    background-image: url(board_1_lolcat.jpg);}
.head-er.board_4 {
    background-image: url(board_4_dancing_bananas.gif);}


[shadav]

 
between the oh hai i iz chrome and the dancing banana
bwahahahaha

but sadly that didn't work.....now it's not even working on desktop....

eh oh well....thank you for trying some more

it seemingly works everywhere else but ios chrome so meh....

[Antechinus]

Hmmph. It's annoying me now. Ok, probably because the $body_class shiz is up in function template_html_above() and the header is down in function template_body_above(). Should have thought of that.

Forget body tag and forget fancy shiznit above it. Can leave fancy shiznit there if you like (shouldn't mess with anything) but isn't necessary. Doing it the easy way, if you are only wanting to switch banners by board:

Code Select Expand

<header class="head-er', (!empty($context['current_board'])) ? ' board_'. $context['current_board'] : '', '" id="top">

This works on my test site. Since it's not messing with the body tag it will hopefully escape Chrome's notice. CSS would be done the same way as preceding example (ie: chaining the classes - .header.board_1 etc).

[shadav]

hey....that works.... WOOOOOOOO