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

[Antechinus]

Good. Now (or actually a tad later) I'll head over to GitHub (may its name be cursed forever) and see if anyone has tested body classes as styling parents with Chrome on iOS (I bet nobody has).

[drewactual]

question: I do this same thing but using URL's to control it... what is the advantage to using $boardid? what is the disadvantage to using URL's? 

[Antechinus]

Doesn't really matter much, I suppose. Board ID is just a handy and tidy thing to call, but there's nothing really wrong with using URL's as far as I know.

When this code was originally requested some years back people were asking for the ability to style by board, so board ID just seemed like the natural way of doing it. If you use the URL you have to include the board ID as part of that anyway, so all the rest is just extra stuff to throw into your logic.

[drewactual]

fair enough- thanks for the response. 

[Antechinus]

After posting that I did think of one advantage, depending on what you want to do. If you want to keep the custom board banner for all topics inside that board (ie: when viewing Display.template) then the current board stuff in Sources keeps track of that for you, so that makes board ID the easy way to get what you want.

If you want to change the banner according to topic, then a URL is probably as good for all practical purposes. But at the time this code was written it just seemed to make sense to have one chunk that did all possible body tag classes, and use the actions, board ID's, topics ID's, etc to do it.

[drewactual]

i run with an include file- and have different styling for each and every board... some with a header, some without... the main page with a random image (one of several hundred)... different functions.... different metatags and different OG: and twitter cards.. i kind of took the concept to an extreme... i use the same device to interject styled WP articles or not... it's a dang handy tool.   i guess i could have used $board, and it still 'kinda' does, but the css issue doesn't exist in this manner of doing it. 

problem: i understand php8 (when we're finally forced there) changes the functions or antiquates it, so... i'll be re-drafting.... and i may use $board... which puts me in the same boat as this thread here and is something to think about before that day comes.... have a plan, right?

[Seedorfbiggy]

Please how can I set Logo image URL to show my desire logo above

[shadav]

Please how can I set Logo image URL to show my desire logo above

um...that doesn't actually have anything to do with the topic of this thread....it'd be best to either search or create your own post

without knowing exactly what you mean....or what template you are using....or what version of smf you are using.....have you gone into your admin?
in admin under configurations and then current theme
you will find
Logo image URL:
(leave blank to show forum name or default logo.)

if that is not what you are wanting then you will need to be a bit more specific and within your own thread not randomly asking in an unrelated thread

[Antechinus]

Had a thought about this. If you don't mind running another test with Chrome on iShiz: it would be worth checking if applying the class to the html tag instead of the body tag keeps Chrome/iOS happy.

So instead of this:

Code Select Expand

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

You'd use this:

Code (index.template.php - Line 84) Select Expand

<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '  class="', (!empty($context['current_board'])) ? ' board_'. $context['current_board'] : '', '">

Globals for function template_html_above() would be:

Code Select Expand

global $context, $settings, $options, $scripturl, $txt, $modSettings;

With .head-er defaulting back to:

Code Select Expand

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

And with CSS for the banners-by-board done as:

Code Select Expand

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


If that works on Chrome/iOS as well as on anything saner, it would allow styling any tag by board_id, not just one tag. This would make it the best fix for the 2.1 repo.

[shadav]

i'll play with this probably tomorrow...today my concentration isn't really here...what...squirrel....oh what's that over there, it's shiny.... 

[shadav]

Had a thought about this. If you don't mind running another test with Chrome on iShiz: it would be worth checking if applying the class to the html tag instead of the body tag keeps Chrome/iOS happy.

So instead of this:

Code Select Expand

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

You'd use this:

Code (index.template.php - Line 84) Select Expand

<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '  class="', (!empty($context['current_board'])) ? ' board_'. $context['current_board'] : '', '">

Globals for function template_html_above() would be:

Code Select Expand

global $context, $settings, $options, $scripturl, $txt, $modSettings;

With .head-er defaulting back to:

Code Select Expand

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

And with CSS for the banners-by-board done as:

Code Select Expand

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


If that works on Chrome/iOS as well as on anything saner, it would allow styling any tag by board_id, not just one tag. This would make it the best fix for the 2.1 repo.

sorry forgot about this....



not quite
it did sort of work but um....about that....
it didn't change the header image, it changed the body/background image

[shadav]

nevermind...i'm an idiot 

it does work

i put .board_12 and forgot the .head-er after it....that's why it changed the background and not the header....

*I need coffee*

[Antechinus]

Cool. Coffee is always good. I'm into some now. Looks like that's a bulletproof fix for all browsers then. I'll post a note on PitGlub.

[live627]

Did you misspell ButtPlug?

[shadav]

Did you misspell ButtPlug?

ya know I wouldn't put it past ante to sneak that into the code somewhere

[Antechinus]

I used to call it ButtPlug, but I kinda like to think up new insults for it.

I did put a stealth wombat into Elk's CSS. Found this awesome ASCII wombat in some strange place somewhere on the web, and thought it was perfect for the job. The index at the start of the file has various sections listed (@HEADER, @LISTS, @BUTTONS, etc) so that searching for any tag takes you straight to that area of the file. Good system (found that one on GitHub even). So at the end of the index I added @WOMBATZ, and when you search for that tag you get taken to the ASCII wombat and there's a comment that says "See. I told you there were wombatz here".

Small thing amuse small minds, y'know.