Random home page background images with caption text

Question

all. I am developing a Wordpress theme and I need to have a random background image display on the home page with specific text for each image.

I have installed the Background Manager plugin (http://wordpress.org/plugins/background-manager/), but it only supports displaying an overlay on image sets, and I don't see an easy way to customize it.

As an alternative, I found this website article (http://wpdevsnippets.com/full-page-screen-background-image-slideshow-easy/), which covers a basic script to show random background images. The only way I can imagine to make it work for the site is to add a custom content type to Wordpress for background images, and then allow for a featured image and an excerpt for those content items.

Where I'm lost is in how to call these images from a template page (outside of the loop), and then later on, within the page content, call the title or caption from the image that was randomly selected.

Here's all of the code from that other site's example. Any help or pointers would be a huge help.

HTML:

<div id="full-bg">
<img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg1.jpg" />
<img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg2.jpg" />
<img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg3.jpg" />
<img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg4.jpg" />
</div>

CSS:

html, body {
    height: 100%;
}
#full-bg img {
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:-10;
    opacity: .9;
}

Javascript:

<script type="text/javascript">
jQuery(document).ready(function($) {

/* random ordering of images */
var $fullBGs = $("#full-bg img"),
    $copies = $fullBGs.clone(true);

[].sort.call($copies, function() { return Math.random() - 0.5; });

$copies.each(function(i){
    $fullBGs.eq(i).replaceWith(this);
});

    setInterval(function(){
        $('#full-bg img.active').animate({opacity:0},500, function(){
            $(this).removeClass('active');
        })
        if($('#full-bg img.active').next().length>0)
            $('#full-bg img.active').next().animate({opacity:1},500).addClass('active');
        else
            $('#full-bg img:first').animate({opacity:1},500).addClass('active');

    } ,4000);
    $('#full-bg img:first').animate({opacity:1},400).addClass('active');
});
</script>

Answer 1

First of all I don't think that create a custom post type only for backgrounds is a right choose: backgrond are images and images already have their post type: attachment.

If you have Worpress 3.5+ you can register a custom taxonomy for attachments, call it, e.g. 'image_scope' :

register_taxonomy('image_scope', 'attachment', $args );

for the $args array see the codex, but ensure you have

• $args['public'] = true
• $args['show_ui'] = true
• $args['show_admin_column'] = true
• $args['update_count_callback'] = '_update_generic_term_count'

In your media manager you will set this taxonomy to a specific term, fo example ' background'.

Now, in your template file, you can use a custom wp_query, using tax_query to select only backgrounds with the taxonomy image_scope setted to 'background':

$args = array(
  'post_type' => 'attachment',
  'post_status' => 'inherit',
  'posts_per_page' => -1,
  'orderby' => 'rand',
  'tax_query' => array(
      array(
        'taxonomy' => 'image_scope',
        'field' => 'slug',
        'terms' => 'background'
      )
  );
);
$bg_query = new WP_Query( $args );

As you can see, the order is already randomized, so when you print it on the template you don't need to randomize via js.

So in the template you will have, after the query:

if ( $bg_query->have_posts() ) :
  echo '<div id="full-bg">';
  $i = -1;
  while( $bg_query->have_posts() ) :
    $i++;
    $bg_query->the_post();
    $url = wp_get_attachment_url( get_the_ID() );
    $class = $i == 0 ? 'full-bg active' : 'full-bg';
?>
<img class="<?php echo $class; ?>" src="<?php echo $url; ?>" alt="<?php the_title; ?>" data-desc="<?php the_excerpt(); ?>" />
<?php
endwhile;
echo '</div>';
endif;
wp_reset_postdata();
?>

And the javascript:

jQuery(document).ready(function($) {

function handle_active() {
  var $active = $("#full-bg img.active");
  var title = $active.attr('alt');
  var desc = $active.data('desc');
  alert('Active title is' + title + ' and active description is ' + desc);
}

setInterval(function(){
  var $active = $("#full-bg img.active");
  $active.animate( {opacity:0}, 500, function(){
    $(this).removeClass('active');
  });
  if( $active.next('img').length > 0 ) {
    $active.next('img').addClass('active').animate( {opacity:1}, 500, function() {
      handle_active();
   });
  } else {
    $('#full-bg img').eq(0).addClass('active').animate( {opacity:1}, 500, function() {
      handle_active();
   });
  }
}, 4000);

handle_active();

}

Of course change the handle_active() function to fit your needs.

Hope it helps, but please note that the code is not tested and I'm not a js developer...