0

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>

1 Answer 1

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...

6
  • It does not have caption functionality. But I believe, it can be added by putting a 1. wrapper around the img tag 2. printing caption in span or div 3. implementing css of the caption 4. changing js and css above for the div element instead of img tags.
    – M-R
    Jul 23, 2013 at 19:37
  • Thanks so much. That looks like what I'm after. If nothing else, this gives me a great starting point to refine it. I'll test and report back so the community knows what works for this.
    – Andrew
    Jul 23, 2013 at 19:51
  • 1
    @M-R var desc = $active.data('desc'); this variable will contain the caption (setted in media manager as the attachment excerpt. I've just alerted it, you can use jQuery.html() to put it everywhere you want. Of course, if you prefer, you can print the caption (excerpt) in the markup and then work on it.
    – gmazzap
    Jul 23, 2013 at 19:55
  • I have a quick question on this. Why set posts_per_page to -1, which loads all of the images? Why not just set it to 1 so it randomly loads one image? In particular, I'm worried about load time for the page.
    – Andrew
    Sep 11, 2013 at 13:03
  • @Andrew setting to 1, you will load an image, but it doesn't change for all the time you stay on the page. In your question you have a setInterval function to change the bg images, if the image is 1 you have nothing to change and the js is not needed at all. Make a choose: if you want only one random page that change only after change page use posts_per_page = 1 and remove javascript. Otherwise, if you want some images changing use the code as is.
    – gmazzap
    Sep 11, 2013 at 13:09

Your Answer

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

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