- Compatible XF 2.x versions
- 2.0
- 2.1
- 2.2
- 2.3
- Visible branding
- No
WP Seasonal Logo Rotator (Auto-Scan Hack)A lightweight template hack to automatically rotate forum logos for seasons, events, or subtle brand refreshes simply by dropping images into a folder.
No add-ons.
No filename editing.
No maintenance.
What This Does
- Scans a logo folder automatically
- Selects one image at random on each page load
- Updates instantly when images are added or removed
- Ideal for seasonal or event-based branding
Installation
1. Create a logo folder
Create this folder on your server:
Code:
/styles/season_logos/Upload your logos there.
Supported formats: webp, png, jpg, jpeg, gif, svg
All logos should be the same dimensions.
Example:
Code:
/styles/season_logos/
├─ spring.webp
├─ summer.png
├─ winter.jpg
└─ christmas.webp2. Add list.php
Create list.php inside the same folder.
PHP:
<?php
header('Content-Type: application/json');
$allowed = ['webp', 'png', 'jpg', 'jpeg', 'gif', 'svg'];
$files = [];
foreach (scandir(__DIR__) as $file) {
if ($file === '.' || $file === '..' || $file === 'list.php') continue;
if (in_array(strtolower(pathinfo($file, PATHINFO_EXTENSION)), $allowed, true)) {
$files[] = $file;
}
}
echo json_encode($files);Optional check:
Code:
https://yourforum.com/styles/season_logos/list.php3. Add CSS
Admin Panel → Appearance → Styles → Templates → extra.less
CSS:
.p-header-logo {
position: relative;
width: 350px;
height: 300px;
}
.p-header-logo img {
visibility: hidden;
}
.p-header-logo::before {
content: "";
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}Adjust width/height to match your logo.
4. Add JavaScript
Admin Panel → Appearance → Templates → PAGE_CONTAINER
Paste after {$ldJsonHtml|raw}
HTML:
<script>
(async function () {
const folderPath = '/styles/season_logos/';
try {
const res = await fetch(folderPath + 'list.php');
if (!res.ok) return;
const logos = await res.json();
if (!logos.length) return;
const logo = logos[Math.floor(Math.random() * logos.length)];
const style = document.createElement('style');
style.textContent = `
.p-header-logo::before {
background-image: url("${folderPath}${logo}");
}
`;
document.head.appendChild(style);
} catch (e) {}
})();
</script>Notes
- Logo changes on each page load
- Clear browser cache after setup
- Mobile sizing may need adjustment in extra.less
- list.php exposes image filenames only
Disclaimer
This is a simple template hack, not an add-on.
Use only if you are comfortable exposing logo filenames via list.php.
Done. Upload logos → refresh page → logo rotates automatically.
