Template:Page Header: Difference between revisions
From KB42
No edit summary |
No edit summary Tag: Manual revert |
||
| (11 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
== Usage == | == Usage == | ||
| Line 9: | Line 8: | ||
}} | }} | ||
</pre> | </pre> | ||
---- | ---- | ||
</noinclude><includeonly><div style="position: relative; width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box;"> | </noinclude><includeonly><div style="position: relative; width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; line-height: 0;"> | ||
<!-- | <!-- | ||
{{#if:{{{header_img|}}}|<div style="width: 100%; line-height: 0;">[[File:{{{header_img|}}}| | header_img responsive technique: | ||
MediaWiki renders [[File:X|600px]] as a fixed <img width="600">. | |||
To make it fluid we: | |||
1. Pass a large pixel value (1200px) so MW generates a | |||
high-res src — this just controls the source file resolution, | |||
NOT the display size. | |||
2. Wrap it in a div with width:100%. | |||
3. Override the img tag with CSS: width:100%; height:auto; | |||
so it scales to fill whatever the page width is. | |||
The upright= parameter is omitted intentionally — we let CSS | |||
handle all sizing. | |||
--> | |||
{{#if:{{{header_img|}}}| | |||
<div style="width: 100%; line-height: 0; font-size: 0;"> | |||
<div class="header-img-wrap">[[File:{{{header_img|}}}|1400px|link=]]</div> | |||
</div>}} | |||
<!-- Title overlay --> | <!-- Title overlay — centred over the image --> | ||
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: | <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: left; pointer-events: none; box-sizing: border-box;"> | ||
<div style="text-align: center; padding: 0.75em 1em; box-sizing: border-box; max-width: 60%;"> | <div style="text-align: center; padding: 0.75em 1em; box-sizing: border-box; max-width: 60%;"> | ||
<div style="font-size: | <div style="font-size: 2em; font-weight: bold; margin: 0; line-height: 1.2;">{{{title|}}}</div> | ||
{{#if:{{{title2|}}}|<div style="font-size: | {{#if:{{{title2|}}}|<div style="font-size: 1.25em; margin-top: 0.25em;">{{{title2}}}</div>}} | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 25: | Line 39: | ||
</div> | </div> | ||
<!-- Footer bar | <!-- Footer bar --> | ||
<div style="width: 100%; box-sizing: border-box; padding: 0.25em 0.5em; display: flex; justify-content: space-between; align-items: center; font-size: 0.9em;"> | <div style="width: 100%; box-sizing: border-box; padding: 0.25em 0.5em; display: flex; justify-content: space-between; align-items: center; font-size: 0.9em; line-height: 1.4;"> | ||
<div class="header_left_text">{{CURRENTDAYNAME}}, {{CURRENTMONTHNAME}} {{CURRENTDAY}}, {{CURRENTYEAR}} {{#time:H:i|{{CURRENTTIME}}}} ([[w:Coordinated Universal Time|UTC]])</div> | <div class="header_left_text">{{CURRENTDAYNAME}}, {{CURRENTMONTHNAME}} {{CURRENTDAY}}, {{CURRENTYEAR}} {{#time:H:i|{{CURRENTTIME}}}} ([[w:Coordinated Universal Time|UTC]])</div> | ||
<div>There are '''[[Special:Statistics|{{NUMBEROFPAGES}}]]''' published articles.</div> | <div>There are '''[[Special:Statistics|{{NUMBEROFPAGES}}]]''' published articles.</div> | ||
</div></includeonly> | </div> | ||
<!-- | |||
Required CSS — add this to MediaWiki:Common.css | |||
(Special:MyPage/common.css for personal testing first) | |||
.header-img-wrap { | |||
width: 100%; | |||
line-height: 0; | |||
font-size: 0; | |||
} | |||
.header-img-wrap img { | |||
width: 100% !important; | |||
height: auto !important; | |||
max-width: 100% !important; | |||
display: block; | |||
} | |||
The !important overrides MediaWiki's inline width/height | |||
attributes that are baked into the generated <img> tag. | |||
Without !important the fixed pixel dimensions win and the | |||
image does not scale. | |||
--></includeonly> | |||
Latest revision as of 20:00, 10 May 2026
Usage
[edit source]{{Header
|header_img = YourBanner.png
|title = My Wiki Title
|title2 = Optional subtitle line
}}
