Hello Team Couch.

I have a set of 4 images on my front index page and i'm looking to see if couch can work it rather than me having to keep going into the code and adding new photos.

what i want.
Okies in the couch folder where my images are kept i have a folder called random-images that i want to upload photos into, now what i want couch todo is select randomly images from that folder and display them on my front page where the 4 image placements are.

Bit like facebook when you re-fresh the page or re-load it they change to different ones, can this be done?

[KK]

Hi Simon,

The 'random-images' folder you mentioned - will you be using Couch 'image' editable region to upload images into it through the admin-panel or are you manually going to do it?
Please let me know.
Thanks

Hi Simon,

The 'random-images' folder you mentioned - will you be using Couch 'image' editable region to upload images into it through the admin-panel or are you manually going to do it?
Please let me know.
Thanks

i can do both really, upload via couch or via my main hosting Cpanel.

[KK]

Couch's 'pages' tag natively does not support fetching random entries so we'll go with the manual approach.
We'll require raw PHP to choose random images from your folder.
Copy and save the following snippet into a file named, say, 'random_images.html' and place the file in your snippets folder -

Code: Select all

<cms:php>

   $path_to_images = 'uploads/image/random-images/';
   $count_rand = 4; // Number of random images to pick
   
   // Valid extensions
   $extensions = array( 'jpg','jpeg','gif','png','bmp' );
   
   // Open folder and get files
   $images = array();
   if( $handle = opendir('<cms:show k_admin_path />' . $path_to_images) ){
      while (false !== ($file = readdir($handle))) {
         if( $file != "." && $file != ".." ){
            $ext = strtolower( substr(strrchr($file, "."), 1) );
            if( in_array($ext, $extensions) ){
               $images[] = '<cms:show k_admin_link />' . $path_to_images . $file;
            }
         }
      }
      closedir($handle);
   }
   
   // Select the indicated number of random images
   $count_rand = ( count($images)<$count_rand ) ? count($images) : $count_rand;
   $rand_keys = array_rand( $images, $count_rand );
   for( $x=0; $x<count($rand_keys); $x++ ){
      echo '<img src="'.$images[$rand_keys[$x]].'" /><br/>';
   }

</cms:php>

You can now place the following anywhere in your template to display 4 random images-

Code: Select all

<cms:embed 'random_images.html' />

You'll want to modify the ouput at the following point in the snippet -

Code: Select all

echo '<img src="'.$images[$rand_keys[$x]].'" /><br/>';

Also turn off caching if you have it on.

Let me know if this helps.

think i understand what you mean.. whatabout the image size? because the image size is for each image are 90 high by 140 wide pixels.

the echo part do i change that on my index.php template?

thats my code

<div class="image-area-1"><img src="<cms:embed 'random_images.html' />" width="140" height="90" /></div>
<div class="image-area-1"><img src="<cms:embed 'random_images.html' />" width="140" height="90" /></div>
<div class="image-area-1"><img src="<cms:embed 'random_images.html' />" width="140" height="90" /></div>
<div class="image-area-1"><img src="<cms:embed 'random_images.html' />" width="140" height="90" /></div>

[KK]

Change this in the snippet-

Code: Select all

   for( $x=0; $x<count($rand_keys); $x++ ){
      echo '<img src="'.$images[$rand_keys[$x]].'" /><br/>';
   }

- to this -

Code: Select all

   for( $x=0; $x<count($rand_keys); $x++ ){
      echo '<div class="image-area-1"><img src="'.$images[$rand_keys[$x]].'" width="140" height="90" /></div>';
   }

Instead of doing this in your template-

Code: Select all

<div class="image-area-1"><img src="<cms:embed 'random_images.html' />" width="140" height="90" /></div>
<div class="image-area-1"><img src="<cms:embed 'random_images.html' />" width="140" height="90" /></div>
<div class="image-area-1"><img src="<cms:embed 'random_images.html' />" width="140" height="90" /></div>
<div class="image-area-1"><img src="<cms:embed 'random_images.html' />" width="140" height="90" /></div>

- do this -

Code: Select all

<cms:embed 'random_images.html' />

that is AMAZING DUDE!!! Pure amazing...

does couch support any slideshows?

As before we have that section on my website with Random images. Now i want a second set this time for Fan photos so this is my code edit.

i have a folder called fan-images and setup the page called fans_images.html
and ive uploaded both like before. only wanting to show the one image.

Thanks.

Code: Select all

<cms:php>

   $path_to_images = 'uploads/image/fan-images/';
   $count_rand = 1; // Number of fan images to pick
   
   // Valid extensions
   $extensions = array( 'jpg','jpeg','gif','png','bmp' );
   
   // Open folder and get files
   $images = array();
   if( $handle = opendir('<cms:show k_admin_path />' . $path_to_images) ){
      while (false !== ($file = readdir($handle))) {
         if( $file != "." && $file != ".." ){
            $ext = strtolower( substr(strrchr($file, "."), 1) );
            if( in_array($ext, $extensions) ){
               $images[] = '<cms:show k_admin_link />' . $path_to_images . $file;
            }
         }
      }
      closedir($handle);
   }
   
   // Select the indicated number of fan images
   $count_rand = ( count($images)<$count_rand ) ? count($images) : $count_rand;
   $rand_keys = array_rand( $images, $count_rand );
   for( $x=0; $x<count($rand_keys); $x++ ){
      echo '<div class="fans-image-area-1"><img src="'.$images[$rand_keys[$x]].'" width="148" height="92" /></div>';
   
   }

</cms:php>

i noticed i shouldnt of changed some codes. so here is an update..

Still wont work i just dont understand why?

echo '<div class="fans-image-area-1"><img src="'.$images[$rand_keys[$x]].'" width="148" height="92" /></div>';

code

Code: Select all

<cms:php>

   $path_to_images = 'uploads/image/fan-images/';
   $count_rand = 1; // Number of random images to pick
   
   // Valid extensions
   $extensions = array( 'jpg','jpeg','gif','png','bmp' );
   
   // Open folder and get files
   $images = array();
   if( $handle = opendir('<cms:show k_admin_path />' . $path_to_images) ){
      while (false !== ($file = readdir($handle))) {
         if( $file != "." && $file != ".." ){
            $ext = strtolower( substr(strrchr($file, "."), 1) );
            if( in_array($ext, $extensions) ){
               $images[] = '<cms:show k_admin_link />' . $path_to_images . $file;
            }
         }
      }
      closedir($handle);
   }
   
   // Select the indicated number of random images
   $count_rand = ( count($images)<$count_rand ) ? count($images) : $count_rand;
   $rand_keys = array_rand( $images, $count_rand );
   for( $x=0; $x<count($rand_keys); $x++ ){
      echo '<div class="fans-image-area-1"><img src="'.$images[$rand_keys[$x]].'" width="148" height="92" /></div>';
   
   }

</cms:php>