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.