Random Image Rotation - Multiple Images

[claireym]

Hi everyone,

I need a bit of PHP help. I have created a wedding supplier directory website. I sent it off to be coded into a WordPress theme (I am more a designer than a coder!). All is great apart from one thing:

On one of the pages, there are multiple banner ads:

monaghanweddings.com/supplier-post-category/hotels-venues

I need to have the ads displaying randomly each time the page is landed on so that everyone who advertises on the site gets a chance to be at the top of the list.

I am really struggling with this and can't seem to figure out what to do. I can only find rotating banner scripts on the internet which displays one banner but loads a different image within it each time it is loaded so that is not exactly what I am looking for.

My WordPress file for this page lools like this:



<?php get_header('supplier'); ?>

<div id="two-columns" class="clearfix">

<?php $supplier_categories = wp_get_object_terms( get_the_ID(), 'supplier-post-category'); ?>

<div class="content-header">

<h2>

<?php

if($supplier_categories){

$pcat = array();

foreach($supplier_categories as $c){

$pcat[] = $c->name;

}

echo implode(', ',$pcat);

} ?>

</h2>

</div>



<div id="content">

<div id="supplier-directory-listing">


<ul>
<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<li>
<a target="_blank" href="<?php echo str_replace("\r", "", get_the_content('')); ?>">
<?php $attr['title'] = $attr['alt'] = get_the_title();
the_post_thumbnail('supplier-img', $attr );
?>
</a>
</li>

<?php endwhile; ?>

<?php endif; wp_reset_query();?>

</ul>

</div><!-- // end #supplier-directory-listing-->

</div>

<!-- // end #content -->



<?php get_sidebar('newcat'); ?>

</div>

<!-- // end #two-columns -->

<?php get_footer(); ?>


If anyone can help me I would really appreciate it, I am tearing my hair out with this one!

Thanks so much in advance.

[claireym]

Does anyone have any idea?

[jscheuer1]

See:

http://www.php.net/manual/en/function.shuffle.php

Like:


<?php
if($supplier_categories){
foreach($supplier_categories as $c){
$pcat[] = $c->name;
}
shuffle($pcat);
echo implode(', ', $pcat);
}
?>

[claireym]

Hi John,

Thanks so much for your reply! That looks like exactly what I need (however I am not great at PHP!).

I put that bit of code into my page so it now looks like this:


<?php get_header('supplier'); ?>

<div id="two-columns" class="clearfix">

<?php $supplier_categories = wp_get_object_terms( get_the_ID(), 'supplier-post-category'); ?>

<div class="content-header">

<h2>

<?php
if($supplier_categories){
foreach($supplier_categories as $c){
$pcat[] = $c->name;
}
shuffle($pcat);
echo implode(', ', $pcat);
}
?>

</h2>

</div>



<div id="content">

<div id="supplier-directory-listing">
<ul>





<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<li>
<a target="_blank" href="<?php echo str_replace("\r", "", get_the_content('')); ?>">
<?php $attr['title'] = $attr['alt'] = get_the_title();
the_post_thumbnail('supplier-img', $attr );
?>
</a>
</li>

<?php endwhile; ?>

<?php endif; wp_reset_query();?>

</ul>

</div><!-- // end #supplier-directory-listing-->

</div>

<!-- // end #content -->



<?php get_sidebar('newcat'); ?>

</div>

<!-- // end #two-columns -->

<?php get_footer(); ?>

However no shuffling or rotation is happening. Is there another file I need to upload or anything like that? I had a look through the website link you sent me, although I am not sure what parts extra I would need, if any?

Thankyou so much for your help, I really appreciate it!

[jscheuer1]

No, that should do it. However, random means random. That means that the same result can occur over and over again, especially in a small sample. Like if you have only 2 or 3 items to shuffle, they may come out the same a lot.

And you might still be viewing the old page. Clear the browser's cache and refresh the page.

[claireym]

Hi John, thanks for your help! I cleared my browsers cache, however the banner ads are still not changing order.

You can view the page here: monaghanweddings.com/supplier-post-category/hotels-venues

Each time I refresh the ads stay in the same order. Have you any other thoughts? Thanks again!

[jscheuer1]

That doesn't show much except that this:


<div class="content-header">

<h2>

<?php
if($supplier_categories){
foreach($supplier_categories as $c){
$pcat[] = $c->name;
}
shuffle($pcat);
echo implode(', ', $pcat);
}
?>

</h2>

</div>

Appears in the page's source code as:


<div class="content-header">

<h2>

Hotels &amp; Venues

</h2>

</div>

If you want to shuffle the images, you need code for that section of the page.

[claireym]

Thanks John, would you know what I would need to put into that page? Sorry I am not very good at PHP! Would PHP be the best way to shuffle the images?

Thanks so much!

[claireym]

Sorry John, I am trying to find were that file is located (the one you viewed the page source off). I am new to WordPress and can't seem to find that file, I can only find PHP files but I will keep looking! Thanks again! :)

[jscheuer1]

I'm sorry, I misunderstood the question. I didn't scroll your original code block. I thought it was only what was visible. The part where the images are generated is here (blank lines removed):


<div id="supplier-directory-listing">
<ul>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<li>
<a target="_blank" href="<?php echo str_replace("\r", "", get_the_content('')); ?>">
<?php $attr['title'] = $attr['alt'] = get_the_title();
the_post_thumbnail('supplier-img', $attr );
?>
</a>
</li>
<?php endwhile; ?>
<?php endif; wp_reset_query();?>
</ul>
</div><!-- // end #supplier-directory-listing-->

And there isn't an array to shuffle, so I'm not sure what to do. Perhaps they could be put into an array, and then shuffled and then written, but I'm not sure how to do that or if it's the best approach.

I think you should start a new thread and ask about that or any method for randomizing the order in which the_post() gets run.

Javascript could be used to shuffle them after they're written to the page, but it would be better to do it in PHP.

[claireym]

Thanks John, I really appreciate all your help, I'll do that! :)

[jscheuer1]

Great. Now bear in mind I'm not sure if this will work, so keep a copy of what you have now. But I'd try this:


<div id="supplier-directory-listing">
<ul>
<?php if (have_posts()) :
while (have_posts()) : the_post();
$some_posts[] = '<li><a target="_blank" href="' . str_replace("\r", "", get_the_content('')) . '">' . $attr['title'] = $attr['alt'] = get_the_title() . the_post_thumbnail('supplier-img', $attr ) . '</a></li>';
endwhile;
shuffle($some_posts);
echo implode("\n", $some_posts);
endif; wp_reset_query();?>
</ul>
</div><!-- // end #supplier-directory-listing-->

[claireym]

Hi John, Thanks for that, I put it in but it still hasn't shuffled the ads... I again cleared my browsers cache and refreshed the page multiple times, still no movement at all. It's a bit of a head scratcher!! Thanks so much for the help though! I am thinking it may be a WordPress problem or something.

[jscheuer1]

Wow, I'm surprised it didn't cause an error! As long as the images show up, they should be shuffled. Problem could now just be what I mentioned before, small sample size.

[claireym]

The images showed up, the only thing that changed was the spacing between them and their links weren't working. I did refresh multiple times but still nothing!

I have found lots of scripts for shuffling but it talks about having whatever you are shuffling (e.g. posts) in an array. I am assuming I can't put mine in a array since I don't have names for these "posts"?? This is what I found: http://www.w3schools.com/php/func_array_shuffle.asp

I could be totally wrong here... I really am relatively new to PHP!!

[jscheuer1]

You're not totally wrong. That was my general thinking as well, and I'm not all that much more advanced at PHP than you are. Also I have no experience with Wordpress.

But I don't think you need an associative array (an array with names for the items it contains), as shuffle() says it works as well on an indexed array (an array with only items in it). In fact, it says that shuffle will remove the keys (names) of an associative array and you wind up with an indexed array anyway.

The problem appears to me to get the posts into an array, shuffle it and then echo it to the page, either one at a time, or by imploding it as I did in my attempt there.

But there may be a more elegant solution not involving array or involving an array of numbers as a guide to the process.

Or the array idea we have may be fine, if so it just has to be implemented in a better fashion, one where the output markup survives and the array is actually shuffled.

That's why I suggested opening a new thread, as it's unlikely others will chime in here once they see I'm working on it. And it will probably take someone more versed in PHP and Wordpress to work it out.

A Wordpress forum might be able to help more too, if you can find one where they deal with the PHP side of operations like this.

Javascript could be used though. I'm real good at that. If you want a Javascript solution, let me know.

[claireym]

Javascript would be brilliant John! I thought PHP would be the only way to go since the page is wrote in PHP but again I am not a great coder, more of a designer, so I am way in over my head already!

If you can do something with Javascript, or any type of code, I would really appreciate that, otherwise I can open a new thread! Thankyou so much John, you're brilliant! :)

[jscheuer1]

Non-javascript users will see the un-shuffled list.

Add this script to the head of the page:


<script type="text/javascript">
jQuery('head').append('<style type="text/css">#supplier-directory-listing{visibility:hidden;}<\/style>');
jQuery(function($){
var lis = [];
$('#supplier-directory-listing ul li').each(function(){
lis.push($(this).clone('true'));
});
lis.sort(function(){return 0.5 - Math.random()});
$('#supplier-directory-listing ul li').each(function(i){
$(this).replaceWith(lis[i]);
});
$('#supplier-directory-listing').css({visibility: 'visible'});
});
</script>

Put it anywhere after this line:


<script type="text/javascript" src="http://www.monaghanweddings.com/wp-content/themes/monaghan-weddings/carousel/lib/jquery-1.4.2.min.js"></script>

Tested and works in a local mock up of the page.

If you want the 'Your Ad Here' to always appear last, use this version:


<script type="text/javascript">
jQuery('head').append('<style type="text/css">#supplier-directory-listing{visibility:hidden;}<\/style>');
jQuery(function($){
var lis = [];
$('#supplier-directory-listing ul li').each(function(){
lis.push($(this).clone('true'));
});
lis.pop();
lis.sort(function(){return 0.5 - Math.random()});
$('#supplier-directory-listing ul li').each(function(i){
if(lis[i]){
$(this).replaceWith(lis[i]);
}
});
$('#supplier-directory-listing').css({visibility: 'visible'});
});
</script>

[claireym]

John, that has worked so so well, it is exactly what I was after! It is absolutly perfect!! :) A massive thankyou to you, I really appreciate your help! Just wondering if you have a PayPal account, if you do can you PM me your email address for it please? Thankyou so much! :)

[jscheuer1]

I will PM my email address. However, you can always click the last link in my signature below:

[claireym]

Ah, just saw that!! :) Just sent you a wee something, I know it's not much but I really appreciate your help!! Thanks so much! Have a good weekend!

[jscheuer1]

Ah, just saw that!! :) Just sent you a wee something, I know it's not much but I really appreciate your help!! Thanks so much! Have a good weekend!

You're welcome! And thank you. And good weekend to you as well.