Add Random Unsplash Background Image on Login Page

Here is how to add a random background image from the popular open source image website unsplash.com

Notes:

  • Set [tt]ADD_UNSPLASH_LOGIN_BACKGROUND[/tt] to 1 in [tt]Setup>Other[/tt]
  • The background image will be refreshed on every login
  • If an already saved background image exists, then this code will override it (but not delete the saved image).
  • To return to using a saved background image, set [tt]ADD_UNSPLASH_LOGIN_BACKGROUND[/tt] to 0 in [tt]Setup>Other[/tt]
  • This code snippet has been tested on Dolibarr v7 but should work with any version. The actual background image feature on the login page was introduced in v6.

File:

/core/tpl/login.tpl.php[/code]

[b][size=3]Find:[/size][/b] [i](around line 60)[/i]
[code]
<body class="body bodylogin"<?php print empty($conf->global->MAIN_LOGIN_BACKGROUND)?'':' style="background-image: url(

[b][size=3]Replace With:[/size][/b]
[code]
<?php if (!empty($conf->global->ADD_UNSPLASH_LOGIN_BACKGROUND)) { ?>
	<body class="body bodylogin" style="background-image: url('https://source.unsplash.com/random'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; background-color: #ffffff;">
	<?php }
	else { ?>
	<body class="body bodylogin"<?php print empty($conf->global->MAIN_LOGIN_BACKGROUND)?'':' style="background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-image: url('.DOL_URL_ROOT.'/viewimage.php?cache=1&noalt=1&modulepart=mycompany&file='.urlencode($conf->global->MAIN_LOGIN_BACKGROUND).'

[b][size=3]Replace With:[/size][/b]
[!--###kunena-codeblock-2###--])"'; ?>>
[/code]

[b][size=3]Replace With:[/size][/b]
[!--###kunena-codeblock-2###--]'.DOL_URL_ROOT.'/viewimage.php?cache=1&noalt=1&modulepart=mycompany&file='.urlencode($conf->global->MAIN_LOGIN_BACKGROUND).''.DOL_URL_ROOT.'/viewimage.php?cache=1&noalt=1&modulepart=mycompany&file='.urlencode($conf->global->MAIN_LOGIN_BACKGROUND).'

[b][size=3]Replace With:[/size][/b]
[!--###kunena-codeblock-2###--])"'; ?>>
[/code]

[b][size=3]Replace With:[/size][/b]
[!--###kunena-codeblock-2###--])"'; ?>>
	<?php } ?>
[/code]'.DOL_URL_ROOT.'/viewimage.php?cache=1&noalt=1&modulepart=mycompany&file='.urlencode($conf->global->MAIN_LOGIN_BACKGROUND).'

[b][size=3]Replace With:[/size][/b]
[code]
<?php if (!empty($conf->global->ADD_UNSPLASH_LOGIN_BACKGROUND)) { ?>
	<body class="body bodylogin" style="background-image: url('https://source.unsplash.com/random'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; background-color: #ffffff;">
	<?php }
	else { ?>
	<body class="body bodylogin"<?php print empty($conf->global->MAIN_LOGIN_BACKGROUND)?'':' style="background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-image: url()"'; ?>>
[/code]

[b][size=3]Replace With:[/size][/b]
[!--###kunena-codeblock-2###--]'.DOL_URL_ROOT.'/viewimage.php?cache=1&noalt=1&modulepart=mycompany&file='.urlencode($conf->global->MAIN_LOGIN_BACKGROUND).')"'; ?>>

Replace With:
[!–###kunena-codeblock-2###–])"’; ?>>
<?php } ?>
[/code])"’; ?>>
[/code]

Replace With:

<?php if (!empty($conf->global->ADD_UNSPLASH_LOGIN_BACKGROUND)) { ?>
	<body class="body bodylogin" style="background-image: url('https://source.unsplash.com/random'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; background-color: #ffffff;">
	<?php }
	else { ?>
	<body class="body bodylogin"<?php print empty($conf->global->MAIN_LOGIN_BACKGROUND)?'':' style="background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-image: url('.DOL_URL_ROOT.'/viewimage.php?cache=1&noalt=1&modulepart=mycompany&file='.urlencode($conf->global->MAIN_LOGIN_BACKGROUND).')"'; ?>>
	<?php } ?>
2 Likes

Hello friend, I tested it now on version 18.0.4 and it didn’t work. I checked the “login.tpl.php” file and it seems to be very different from what I mentioned.

Hello,

This not needed anymore :
ADD_UNSPLASH_LOGIN_BACKGROUND â–ș The background image will be refreshed on every login page refresh. Background image is pulled from the popular open source image website Unsplash. If an already saved static background image exists, then this code will override it (but not delete the saved image). Warning: Using this may allow this external website to steel your login credentials â–ș (v10.0)

But to appear random images on the login page what would be the other option then. In the main installation it is possible to select an image, but it does not give the system the option to use UNSPLASH images.

Sometimes what’s trivial for programmers may not be so for the majority of users. After some effort, I figured out how to address the issue of random images on the login page. The development team has done a remarkable job. However, it would be beneficial if the implementation process was more clearly explained to users. I propose the following amendment to the setup page text on the Dolibarr Wiki:

To implement random images, follow these steps:
1- Go to Home â–ș Settings â–ș Other Settings and enter the parameter “ADD_UNSPLASH_LOGIN_BACKGROUND”;
2- In the value field, fill in ‘https://source.unsplash.com/random’;
3- Confirm the changes in the system by clicking on the ‘Modify’ button.

1 Like

Thanks for your reply : I have updated the wiki accordingly : Setup Other - Dolibarr ERP CRM Wiki