0

Customer ask me to build him the following functionality for his website:

  • Be able to change the background image for his website from the back office. (PHP & MySql)

Can anyone recomend elegant yet easy to build solution?

I am thinking of adding the image in the database table, and then read from table and apply the background directly to <body> like <body background="<?php echo $mybackground;?>"> but I guess that there should be more elegant solution. Any ideas?

1
  • 1
    Sounds like as good a method as any (as long as you use the CSS background-image property instead of the outdated background HTML property). You may be able to save time by using an existing CMS, though - that'll take the pain out of programming the upload, resizing, etc.
    – Pekka
    Dec 18, 2012 at 23:06

2 Answers 2

1

The simplest approach might be to use a site-wide style sheet that sets background on body using a fixed filename and set up a simple form uploading a file, which then will be stored on the server, in the appropriate folder, under that fixed filename. The would need to have just a file input field and some authentication (maybe just a simple password). The form could then have some basic checking to see that the file is of an image type.

This assumes that the suitability of the image for background has been checked and is the responsibility of the person who submits it.

There’s a small downside. If the background image is changed infrequently (a usual scenario), normal cache mechanism assign a rather long freshness time to it. This means users may get the old background image from a cache for some time. But if this is serious, you could modify server settings so the background image is set to be non-cacheable or has a short lifetime.

3
  • Hi Jukka. CSS option means that I must limit the user on lets say 3 images only and then prepare 3 css, and switch between them on base on which one is the current in my database table. He will have page in the back office where he can select which one he want to use now. But, customers doesn't like any limits...
    – Zoran
    Dec 18, 2012 at 23:38
  • @Zoran, I don’t see what you mean by “CSS option” (you could deploy my approach even using old-style <body background="bg.jpg">) and how the approach would impose such limitations. No database is needed in my approach, and no change in CSS or HTML when the background image is changed. Admittedly, it has the practical limitation that the type of the background image is fixed, since in practice the filename suffix sets it. Dec 18, 2012 at 23:46
  • @Zoran so you're saying the user needs to be able to upload a new image as well as be able to change the background image to any previously uploaded image? I would recommend having an "archives" directory containing every image, then copy the one you want to be active to another location when the user decides to change it. That way you don't have to poll the DB with every request and you can take advantage of cached CSS (which always references the "active" image).
    – cimmanon
    Dec 19, 2012 at 0:33
0

There's not going to be a quick cut-paste snippet to do this.

Assuming you don't want to go with a CMS, you'll have to set up a database, create an html form and some php code to deal with updating the database, etc...

to get you started, google "creating a database with phpmyadmin", and then check out http://php.net/manual/en/book.mysqli.php for the php code to connect to it and run sql scripts against it.

3
  • Hi Zach. All this (back office, database, cms...) is already in place, just looking for more elegant way then I have thinked of. Fresh mind may propose much more elegant solutions than those that i have in my mind now..
    – Zoran
    Dec 18, 2012 at 23:35
  • Well in that case, just put a file upload field into your backend (never heard it as 'back office' hah), and store the filename in the database. You can spit out the value in a <style> element - like <style>body{background:url(<?php echo $imgUrl;?>)}</style> Dec 18, 2012 at 23:52
  • actually, use Jukka's answer. Just replace the image file (same filename) with the one from the file-upload. Dec 18, 2012 at 23:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.