Rotating Custom Background Images

So bear with me on this…

I have another web application in which the login page is very similar to FileCloud - a simple login box on top of a single background image…

Our department controls a large number of picturistic buildings and parks. What I did there was to create a simple PHP script which returned a random picture of about 70+ images from with a directory as an image. Then I inserted a Alias command in the Apache config which redirected the background image to my script.

The result was that each user was presented with a different random image everytime they logged in, and they LOVED it! So much in fact I have to work with management because I was constant contributes from staff.

Since FileCloud already uses Apache and PHP, I thought it would be simple to insert an addiditonal conf file into the configuration and accomplish this. I was wrong.

The plan was to add a file called background.php and a folder called background to the root directory ( C:\xampp\htdocs ) and create a new conf file like ( C:\xampp\apache\conf\extra\httpd-background.conf ):
AliasMatch ".*/background.jpg" "C:/xampp/htdocs/background.php"
And add this to the main httpd.conf file…

Before I could even look for default background image, I found that I was unable to run my background.php script. I’m not an Apache guru, but I think the problem is that FileCloud’s Apache configuration is locked down and won’t let anything run from the root directory.

I also think that the background image is not just a simple file, rather it looks like it is the output of your own script…

Like I said, I’m not an Apache guru, and rather then keep hacking the default installation, I was hoping someone could give me some suggestions on how to accomplish this.

Thanks
Bob

@bob.brandt

Thank you for your interest in Filecloud.

I have discussed this with our support team and unfortunately, this is not currently supported in our Filecloud.
However, you can add a single custom background image for your Admin or user accounts from the admin panel. You can refer to the below URL to know more about this

https://www.getfilecloud.com/supportdocs/display/cloud/Login+Background+Image

You may also please post this in the ideas forum as this is a good idea and we can try implementing this.

1 Like

Interesting idea, @bob.brandt!

It’s true that there is no such feature built in to FileCloud, as stated by @somitha.syriac above. But fortunately the system is built with versatility in mind, so your plan is absolutely possible with some clever coding and configuration, very similar to what you’ve suggested.

Rather than trying to accomplish this with a special config file, you can instead use custom CSS to access your PHP script’s output.

First, create a PHP script in your xampp/htdocs directory, as you’ve suggested, and then reference that PHP script’s URL as if it were an image file using this line of CSS in your Administrator portal under Customization > Advanced > Custom CSS Entries:

table.login_wrapper { background-image: url('/background.php') !important; }

This will force the normal User login page to use the output of your background.php script as its background image, overriding that which has been selected using the normal background image customization in the Administrator portal.

In your background.php script you will need some code to read the contents of JPG files on your server and deliver those contents as normal image data. Note the header type being set to image/jpeg, which is required to ensure that all browsers see this as valid JPG data.

$file = './back' . rand(1,5) . '.jpg';
header('Content-Type: image/jpeg');
header('Content-Length: ' . filesize($file));
readfile($file);

In the above example I have five different background images in my htdocs directory: back1.jpg, back2.jpg, back3.jpg, back4.jpg, and back5.jpg. And one of these files is randomly selected every time the script is accessed. I suspect your background.php script does something similar, and can likely be used as a drop-in replacement for what I’ve listed.

Please let us know if this works for you. We hope this improves the experience for your FileCloud users!

2 Likes

Excellent! I inserted the CSS and unfortunately it shows a blank page. Troubleshooting I find this is most likely due to a permissions problem.

So I placed my PHP file in the root directory, as directed, and I also created a new directory called “background” in the root directory as well to hold all the images.
If I try to navigate to https://domain/background.php or https://domain/background/imagename.jpg I get a

HTTP/1.1 401 Unauthorized

Which seems to me to confirm that it is a permissions problem.

Perhaps, moving the php and folder to a different directory may solve the problem.

Also, in case someone else reads this thread, I found when originally creating the script that I needed to add this to the PHP script as well:

header(“Content-Type: image/jpeg”); //Assuming jpeg file, my script actually checks for type.
header('Content-Length: ’ . filesize($file));
header('Content-File: ’ . $file);

Thanks
Bob

Bob,

Let’s see if we can figure this out!

The first thing I forgot to mention (because I forgot about it entirely, myself!) is that you in order to run custom PHP scripts you will need to uncomment the following line in the .htaccess file in your htdocs directory:

#RewriteCond %{REQUEST_FILENAME} !-f

Just delete the # at beginning, save the file, Stop and then Start your web server using the FileCloud Control Panel.

If your script still isn’t running after that, can you tell me where you are putting your background.php file on your server’s local filesystem? It should be inside htdocs next to files like localconfig.php and favicon.ico

Thanks!
Zach

1 Like

That did the trick!

Thanks!

2 Likes

Excellent!

Thanks for working through this with us, @bob.brandt! This was a fun one!