WP Super Cache is caching my dynamic/random backgrounds.

Hello everyone!

I am having an issue with WP Super Cache. I've used both Super Cache, as well as W3 Total Cache, and I prefer Super Cache. It seems to have less of an impact on my server, and is easier to use.

That being said, I am having some trouble getting my dynamic random backgrounds to rotate, because the first background image is being cached, and there is nothing in place to tell Super Cache to re-cache ONLY my backgrounds.

I custom wrote my own random background code:

<?php

//* Add a random background to <body>

function hvw_random_backgrounds(){

	$hvw_bg_post = 1243;
	$args = array( 'post_type' => 'attachment', 'posts_per_page' => -1, 'post_status' =>'any', 'post_parent' => $hvw_bg_post );
	$attachments = get_posts( $args );

		$detect = new Mobile_Detect();

		// Check for any mobile device.
		if ($detect->isMobile() && $detect->isiOS() || $detect->isMobile() && $detect->isAndroidOS () ) {
					if ( $attachments ) {
		$hvw_total_attachments = -1;

		foreach ( $attachments as $attachment ) {
		  $hvw_total_attachments++;
		   $hvw_bg_link = wp_get_attachment_image_src( $attachment->ID, "medium" );
		  $hvw_backgrounds[] = array ('hvw_bg_link' => $hvw_bg_link);
		}

		$hvw_random_number = rand(0, $hvw_total_attachments); // generate random number size of the array

		echo "<style type='text/css'> .hvw-random-background {background:url(" .
			$hvw_backgrounds[$hvw_random_number][hvw_bg_link][0] .
			') no-repeat top center; background-size:cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; }</style>';
		echo "<div class='hvw-random-background'>";
		echo "</div>";

	}
		}
		else {

			if ( $attachments ) {
			$hvw_total_attachments = -1;

			foreach ( $attachments as $attachment ) {
			$hvw_total_attachments++;
			$hvw_bg_link = wp_get_attachment_image_src( $attachment->ID, "full" );
			$hvw_backgrounds[] = array ('hvw_bg_link' => $hvw_bg_link);
			}

			$hvw_random_number = rand(0, $hvw_total_attachments); // generate random number size of the array

			echo "<style type='text/css'> .hvw-random-background {background:url(" .
			$hvw_backgrounds[$hvw_random_number][hvw_bg_link][0].
			') no-repeat top center; background-size:cover; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;}</style>';
			echo "<div class='hvw-random-background'>";
			echo "</div>";
			}	

		}

}

add_action('genesis_before', 'hvw_random_backgrounds', 10);

?>

I am grabbing backgrounds that are attached to a specific post in Wordpress. I am also using Mobile_Detect (javascript library) to serve smaller backgrounds on Mobile.

So, on to the question:

How do I tell WP Super Cache to leave my backgrounds alone? If it is a matter of using another plugin, I'll take suggestions. My criteria for a caching plugin is that the plugin isn't a burden on the system, and that it is easy to use.

Thanks so much for your help!

  • mediastead

    Just an update. I wasting a good portion of time trying everything I thought would work.

    - I rewrote the PHP to include a jQuery call that inputs the image into the DIV, instead of using all PHP.

    - I wrote a little code that attached a random query string to the end of the images.

    - I tested a couple of other caching plugins.

    No luck...

    Ironically, the random string didn't do anything, because once the first random string image was cached, it just kept loading that one.

    The random string might be the most viable, and perhaps I wasn't writing it correctly? The issue is that the entire webpage is being cached as a static HTML page, so it doesn't matter how dynamic I make something, it won't be seen, because the HTML page is the one being looked at by the browser.

    Any thoughts?

  • Jose

    Hi there @mediastead!,

    Your code looks pretty fine.
    You are making just one mistake: the random number is being generated in PHP in the server side, therefore the number is also cached and will be always the same.

    The random index should be generated on the client side using javascript.

    I made this customization for you, using jQuery.css().

    (I didn't have the chance to test it, so they might be some syntax errors or some other bug, but this is definitively the way to go.)

    function hvw_random_backgrounds(){
    
    	$hvw_bg_post = 1243;
    	$args = array( 'post_type' => 'attachment', 'posts_per_page' => -1, 'post_status' =>'any', 'post_parent' => $hvw_bg_post );
    	$attachments = get_posts( $args );
    
    	if ( $attachments ) {
    
    		// Check for any mobile device.
    		$is_mobile = false;
    		$detect = new Mobile_Detect();
    		if ($detect->isMobile() && $detect->isiOS() || $detect->isMobile() && $detect->isAndroidOS () ) {
    			$is_mobile = true;
    		}
    
    		$attachment_size = $is_mobile ? "medium" : "full";
    
    		$hvw_backgrounds = array();
    
    		foreach ( $attachments as $attachment ) {
    		  $hvw_bg_link = wp_get_attachment_image_src( $attachment->ID, $attachment_size );
    		  $hvw_backgrounds[] = $hvw_bg_link;
    		}
    
    		?>
    
    		<script type="text/javascript">
    			// <![CDATA[
    				var backgrounds = <?php echo json_encode( $hvw_backgrounds ); ?>;
    				var imageUrl = attachments[Math.floor(Math.random() * backgrounds.length)];
    				jQuery( function( $ ) {
    					$( ".hvw-random-background" ).css('background-image', 'url(' + imageUrl + ')');
    				} );
    			// ]]>
    		</script>
    
    		<?php
    
    	}
    }
    
    add_action('genesis_before', 'hvw_random_backgrounds', 10);

    Also, I know this will work if you hook into 'wp_footer' or 'wp_head', but not sure about the genesis framework hooks. You should try a different one if this doesn't work.

    Please let me know if this makes the trick. :slight_smile:

    Cheers!
    JJ

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.