Changing header image

Started by lesmond, Apr 26, 2019, 09:27 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

lesmond

Apr 26, 2019, 09:27 AM Last Edit: Apr 28, 2019, 06:05 AM by lesmond Reason: Updated theme zip
I haven't written this up yet, wanted to see if anyone here is interested.

The header image changes on refresh or page load, Just refresh the page to see the image in the header change, demo here

Just too add, I think this could also be used for the background too, although I have not tried it yet.

I didn't write the code I just added it to my smf theme.

This is where I got the code from.






Ok here's what I did on my demo.

In your index.css find an image you want to be random, in my case I used the header and change the background code like this, this can be your background image if you wish.
background: #fff url(../image/rotator.php) 100% 100% no-repeat;
Notice the url has a link to rotator.php you will need this file later.

next make a directory named "image" in your themes folder (you can use the smf image folder, but I found it easier to make my own, for easier adding image) and place all the images in this folder, including the rotator.php file.

Attached you will see the file rotator.txt download that and rename to rotator.php, there is one section that you may need to edit..

  $extList = array();
 $extList['gif'] = 'image/gif';
 $extList['jpg'] = 'image/jpeg';
 $extList['jpeg'] = 'image/jpeg';
 $extList['png'] = 'image/png';

I changed my to include the path to the images, because they are in my themes folder, I changed them like this. notice the ../ in front of the path, you can if you wish add a direct path to the images.

    $extList = array();
 $extList['gif'] = '../image/gif';
 $extList['jpg'] = '../image/jpeg';
 $extList['jpeg'] = '../image/jpeg';
 $extList['png'] = '../image/png';

On my demo site there's a lot more involved to get the header image, I have added the theme below with all the edits I made below, if you wish to have a play.

Let me know if you get stuck, I wont help but you can ask ;)

The only person who got all his work done by Friday was Robinson Crusoe

Bigguy

That's very cool. I'd like to know for sure.

lesmond

Edited first post to include edits.

The only person who got all his work done by Friday was Robinson Crusoe

Bigguy

What is the image-changer file. A mod. or a theme :ques

LandyVlad

I just tried your link and nothing changes for me.  ???
I reject your reality, and substitute my own.

lesmond

Jun 06, 2019, 02:43 AM #5 Last Edit: Jun 06, 2019, 02:46 AM by lesmond
Quote from: Bigguy on Jun 05, 2019, 05:26 PMWhat is the image-changer file. A mod. or a theme :ques
Its a theme, just basic with all the edits to make the image change in the header.

Quote from: LandyVlad on Jun 06, 2019, 12:40 AMI just tried your link and nothing changes for me.  ???
sorry I change the theme in the link for the demo

The only person who got all his work done by Friday was Robinson Crusoe