{"id":2285,"date":"2020-05-24T10:37:44","date_gmt":"2020-05-24T15:37:44","guid":{"rendered":"https:\/\/xlinesoft.com\/blog\/?p=2285"},"modified":"2020-06-15T17:22:39","modified_gmt":"2020-06-15T22:22:39","slug":"dynamic-login-page-background","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2020\/05\/24\/dynamic-login-page-background\/","title":{"rendered":"Dynamic login page background"},"content":{"rendered":"

We have discussed the topic of making a beautiful login page in this post. What if we can take it to the next level automatically changing the login page background once a day? It is easier than you think. <\/p>\n

We are going to use of Reddit forums where people post pictures of our beautiful planet. There are communities there for every taste: cute animal pictures, wallpapers, abandoned buildings, astronomy pictures so you can find something that fits your website theme. Here is how the sample login page looks.<\/p>\n

\"\"<\/a><\/p>\n

CSS code<\/h2>\n

The following CSS code goes to Editor->Custom CSS section. It sets an image named images\/background.jpg as a background of the login page. It also pushes the login box a little bit down as it looks better this way with backgrounds like this. <\/p>\n

\r\nbody.function-login {\r\nheight:100%;\r\nbackground:transparent url(\"..\/..\/images\/background.jpg\") no-repeat center center fixed;\r\nbackground-size:cover;\r\n}\r\n\r\nbody.function-login .r-panel-page {\r\nposition: absolute;\r\ntop: 40%;\r\nleft: 50%;\r\n-moz-transform: translateX(-50%) translateY(-50%);\r\n-webkit-transform: translateX(-50%) translateY(-50%);\r\ntransform: translateX(-50%) translateY(-50%);\r\n}\r\n<\/pre>\n
Code to download a new image<\/h2>\n
The following code goes to AfterAppInit event. <\/p>\n
PHP code: <\/strong><\/p>\n
\r\n\t\/\/The path and filename that you want to save the file to\r\n\t$fileName = \"images\/background.jpg\";\r\n\r\n\t$download = false;\r\n\t\/\/ check if file exists and how old is it\r\n\r\n\tif (!file_exists($fileName)) {\r\n\t\t$download = true;\r\n\t} else {\r\n\t\t$time = filemtime($fileName);\r\n\t\t\/\/ previous file is more than 24 hours old?\r\n\t\tif ( time()-$time > 24*24*60 )\r\n\t\t\t$download = true;\t\r\n\t}\t\r\n\r\n\tif ($download) { \r\n\t\r\n\t\t\/\/ JSON feed URL\r\n\t\t$url = \"https:\/\/www.reddit.com\/r\/EarthPorn\/hot.json?limit=1\";\r\n\t\t \r\n\t\t$session = curl_init();\r\n\t\tcurl_setopt($session, CURLOPT_URL, $url);\r\n\t\tcurl_setopt($session, CURLOPT_HEADER, false);\r\n\t\tcurl_setopt($session, CURLOPT_RETURNTRANSFER, true);\r\n\t\tif(preg_match(\"^(https)\",$url)) curl_setopt($session,CURLOPT_SSL_VERIFYPEER,false);\r\n\r\n\t\t\/\/ get JSON feed\r\n\t\t$response = curl_exec($session);\r\n\t\tcurl_close($session);\r\n\r\n\t\tif ($response) { \r\n\t\t\t  \r\n\t\t\t\/\/ decode response and get the URL of the image\r\n\t\t\t$arr = json_decode($response);\r\n\t\t\t$url = $arr->data->children[0]->data->url; \r\n\t\t\t\r\n\t\t\t\/\/Download the image\r\n\t\t\t$downloadedFileContents = file_get_contents($url);\r\n\t\t\tif($downloadedFileContents === false)\r\n\t\t\t\texit();\r\n\t\t\t \r\n\t\t\t\/\/Save the data using file_put_contents.\r\n\t\t\tfile_put_contents($fileName, $downloadedFileContents);\r\n\t\t}\r\n\t}\r\n<\/pre>\n
C# code: <\/strong><\/p>\n
\r\nstring fileName = \"images\/background.jpg\";\r\nstring url = \"https:\/\/www.reddit.com\/r\/EarthPorn\/new.json?limit=1\";\r\nstring json;\r\nbool download = false;\r\n\r\nif (!MVCFunctions.file_exists(MVCFunctions.getabspath(fileName))) {\r\n\tdownload = true; \r\n} else {\r\nDateTime lastModified = System.IO.File.GetLastWriteTime(MVCFunctions.getabspath(fileName));\r\nif ((DateTime.Now - lastModified).TotalSeconds>24*60*60) \r\n\tdownload = true;\r\n}\r\n\r\nif (download) {\r\n\r\n\/\/ download JSON feed\r\nSystem.Net.WebClient wc = new System.Net.WebClient();\r\njson = wc.DownloadString(url);\r\n\r\n\/\/ parse JSON and get image URL\r\ndynamic obj =  XVar.Array();\r\nobj = MVCFunctions.my_json_decode(json);\r\nurl = obj[\"data\"][\"children\"][0][\"data\"][\"url\"];\r\n\r\n\/\/ download image and save to 'images' folder\r\nwc.DownloadFile(url, MVCFunctions.getabspath(fileName) );\r\n\r\n}<\/pre>\n
How it works and additional considerations<\/h2>\n
First of all we check if the background image exists already. If it doesn’t exist we should download one. If it exists and is older than 24 hours we should download the new one. <\/p>\n
First we get the list of new posts of that subreddit. We actually only need the latest post and this is why we add limit=1<\/strong>  to the URL. If you need to get the feed of another subreddit, like wallpapers<\/strong>, here is the URL you can use:<\/p>\n
\r\nhttps:\/\/www.reddit.com\/r\/wallpapers\/hot.json?limit=1\r\n<\/pre>\n
Once we downloaded the feed to parse it, get the URL of the actual image, and download it too. Once downloaded we replace the previous images\/background.jpg<\/strong> file with the new one. Since images are always in JPEG format here we do not need to worry about the file extension. <\/p>\n
Note that this is a barebones code that doesn’t take into account if picture vertical or horizontal, doesn’t reduce image size if the image is too big etc. It  <\/p>\n
Do not forget to set WRITE permissions on the images<\/strong> folder. Also, if you use PHP, make sure that allow_url_fopen<\/strong> variable is set to on<\/strong> in php.ini. <\/p>\n","protected":false},"excerpt":{"rendered":"
We have discussed the topic of making a beautiful login page in this post. What if we can take it to the next level automatically changing the login page background once a day? It is easier than you think. We are going to use of Reddit forums where people post pictures of our beautiful planet. There are communities there for every taste: cute animal pictures, wallpapers, abandoned buildings, astronomy pictures so you can find something that fits your website theme. Here is how the sample…<\/span>Continue Reading “Dynamic login page background”<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1,8],"tags":[],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2285"}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=2285"}],"version-history":[{"count":9,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2285\/revisions"}],"predecessor-version":[{"id":2297,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2285\/revisions\/2297"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=2285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=2285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=2285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}