I recently saw an admin panel that had options to set background images for a page.

The option was found on from clicking pages and then a "main page". Under the description was a form that allowed you to upload up to 5 different images. You could reorder them etc.

This in turn uses those images to rotate through background images on the "main page"

I was wondering how you would replicate this? I'm a huge wp noob when it comes to editing admin stuff. If it's a just bunch of PHP hooks and stuff no problem, but I have a feeling it's more than that. I realize one solution is to create a post and then attach a bunch of images to that post, but the client saw this panel and wants something just like it. Where they can change the images from the page configuration (which makes sense). As for the delivery end (the css and javascript) that's no problem, I'm just wondering about this piece right here.

here's the setup: enter image description here

Any help would be phenomenal.

Thank you

Example of the result http://www.honolulufurniturecompany.com

  • 1
    close voted - "under a tight deadline" will likely not bring up a good result/good answers. But to answer your question: If you consider yourself a "huge noob", then no, it won't be easy. – kaiser Nov 9 '12 at 8:24
  • 1
    I don't understand why my deadline would effect the quality of answers provided from the community. As for the noob part it's true im only familiar wit basic themeing, etc. But I've edited my question so it's more clear – Brodie Nov 9 '12 at 15:51
  • Because you'd accept any question that even just nearly solves the problem, avoiding that the question (and possible answers) can grow and get better. The idea behind this site is that it should be a constant source that gets better over time (hint: Community edits). – kaiser Nov 9 '12 at 16:42
  • /agree w/ this. But from the screenshot above and the ones provided w/ 'attachments' it's clear that it's just an edited version of the same plugin. That's why I accepted the answer. I'm all for elaboration on this and drilling down into making a custom plugin, but i'm not for reinventing the wheel. – Brodie Nov 9 '12 at 16:45
  • 1
    No one said that a plugin can't be a valid answer. Hint: There's background-size:contain;. So there's no JS needed to scale the background image. Only a workaround on how to "rotate/slide/whatever" the image and a valid idea where to retrieve the images from. – kaiser Nov 9 '12 at 16:48

i would try the plugin "attachments" for the images. use it all the time for making page-specific galeries, downloads, etc.

afterwards, you can use the script "supersized"

Enqueue the Javascript from the Plugin, and place the following Code into the <head>:

<script type="text/javascript">  


                            //Functionality gnav != true
                slideshow               :   1,        //Slideshow on/off
                autoplay                :   1,        //Slideshow starts playing automatically
                start_slide             :   1,        //Start slide (0 is random)
                random                  :   0,        //Randomize slide order (Ignores start slide)
                slide_interval          :   5000,    //Length between transitions
                transition              :   1,         //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   2500,    //Speed of transition
                new_window              :   1,        //Image links open in new window/tab
                pause_hover             :   0,        //Pause slideshow on hover
                keyboard_nav            :   1,        //Keyboard navigation on/off
                performance             :   1,        //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,        //Disables image dragging and right click with Javascript
                image_path              :   '', //Default image path

                //Size & Position
                min_width               :   0,        //Min width allowed (in pixels)
                min_height              :   0,        //Min height allowed (in pixels)
                vertical_center         :   1,        //Vertically center background
                horizontal_center       :   1,        //Horizontally center background
                fit_portrait            :   0,        //Portrait images will not exceed browser height
                fit_landscape           :   0,        //Landscape images will not exceed browser width
                navigation              :   0,        //Slideshow controls on/off
                thumbnail_navigation    :   0,        //Thumbnail navigation
                slide_counter           :   0,        //Display slide numbers
                slide_captions          :   0,        //Slide caption (Pull from "title" in slides array)
                            slides                  :   [        //Slideshow Images
                                                { image : "URLTOIMAGE", thumb : "URLTOTHUMB" , title : "TITLE" }, ...                                       ]



you can use as many images as you want. I recommend them to have a resolution of about 1600x900, to have beautiful images evven on a big screen, while not having a too big filesize.

  • What's the point of using Attachments and then including a static piece of code in the head for every single page? – Daniel Nov 9 '12 at 15:52
  • I agree here. I think I understand what you mean, use attachments so I can get all the images into the post. This is a huge and heavy piece of script though. All you need to do is add use CSS to make the images go full screen and then a few lines of js to switch out the images. I was more concerned about the actual options in the admin panel. I appreciate the thought though. – Brodie Nov 9 '12 at 16:03
  • Actually it looks like the module created is just a refactored version of attachments. Awesome, Ty! – Brodie Nov 9 '12 at 16:27
  • i use the supersized script, because it gives me the flexibility of the navigation for the single slides. and it works really well for this purposes. you don't have to make the code static - you might aswell include it only on the pages with attachments used, but i did not want to go into detail on how to implement and optimize it from scratch, just my way of solving the rotating backgroundimages task. on many sites i use the supersized/attachments combination as a gallery too - i just hide most of the content on click, and get a great fullscreen gallery with navigation and everything. – fischi Nov 10 '12 at 12:10
  • also, the image you posted is exactly a box created by attachmentsPro. so, there you go :) – fischi Nov 10 '12 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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