[nick2price]

Hi guys. You may have seen the exact same topic I made on the javascript forum a while back, but I have since realised it will be safer doing this in php incase users have javascript turned off. So, I have found a nice simple way of making my images change. My images are named price1, price2 etc etc so I do the following

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/price<?php $random = rand(1,8); echo $random; ?>.jpg" height="114px" width="156px"/>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/price<?php $random = rand(1,8); echo $random; ?>.jpg" height="114px" width="156px"/>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/price<?php $random = rand(1,8); echo $random; ?>.jpg" height="114px" width="156px"/>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/price<?php $random = rand(1,8); echo $random; ?>.jpg" height="114px" width="156px"/>

I do this 4 times in total, and there are 8 images for them to choose from. At the moment it works, but I was wondering if there was any way I could stop the images from duplicating?

Cheers

[StefanOnRails]

Hmm, my idea is to create and array who holds numbers from 1 to 8 and shuffle() it. Then you can loop through the first 4 elements.

$numbers = range(1, 8);
shuffle($numbers);
for($i = 0; $i < 4; $i++) echo '<img src="price', $numbers[$i], '.jpg" />';

This post has been edited by StefanOnRails: 17 September 2012 - 11:03 AM

[nick2price]

Kool, I can see where your going with that, and I may be able to tweak it into my code. I didnt actually show the full code, but really each image is wrapped in an anchor

<a href="http://www.example.com/">
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/price<?php $random = rand(1,8); echo $random; ?>.jpg"/>
</a>

So I dont think I could do it through a for loop.

[KingCuddles]

nick2price, on 17 September 2012 - 06:45 PM, said:

Kool, I can see where your going with that, and I may be able to tweak it into my code. I didnt actually show the full code, but really each image is wrapped in an anchor

<a href="http://www.example.com/">
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/price<?php $random = rand(1,8); echo $random; ?>.jpg"/>
</a>

So I dont think I could do it through a for loop.

Could you not include the image and link as values in an array eg:

$images = array(
  1 => array('image' => 'image1.jpg', 'url' => 'example1.com'),
  2 => array('image' => 'image2.jpg', 'url' => 'example2.com'),
  3 => array('image' => 'image2.jpg', 'url' => 'example3.com'),
);

$rand_img = array_rand($images, 2);

foreach ($rand_img as $img) {
  echo '<a href="'. $images[$img]['url'] .'">';
  echo '<img src="'. $images[$img]['image'] .'" />';//Do not forget your path etc here.
  echo '</a>';
}

This will break if you request more/less keys than there are in the array, for example $rand_img = array_rand($images, 10); would return "Second argument has to be between 1 and the number of elements in the array" in the above example. You could use a count() or an if(){}else{} statement to deal with these situations if you felt the need.

Would that work for your situation?

- Fixed my atrocious syntax errors!

This post has been edited by KingCuddles: 17 September 2012 - 12:19 PM

[nick2price]

Just having a look at it, I have never used things like => before so just trying to work out what they are. Just out of interest, if I fill the array up with 8 images, would I be able to just print 4 random ones out at a time? From what I can tell (although I am probably wrong) at the moment it will print out all images in the array.

[KingCuddles]

nick2price, on 17 September 2012 - 07:35 PM, said:

Just having a look at it, I have never used things like => before so just trying to work out what they are. Just out of interest, if I fill the array up with 8 images, would I be able to just print 4 random ones out at a time? From what I can tell (although I am probably wrong) at the moment it will print out all images in the array.

Using => allows you to specify an associative array in the format key => value. So, in our case 1 => array('image' => 'image1.jpg', 'url' => 'example1.com'); we have said that the first element in the array, is itself an array 1 => array. Then within that array, the image value is equal to 'image1.jpg' 'image' => 'image1.jpg'. This allows us to do $images[1]['image'] this would return the image value for the first element in our array, in this case 'image1.jpg'.

I am not the best at explaining things, I am sure somebody could do a much better job. TuxRadar's book, Practical PHP has a great section on arrays, as does the PHP Manual.

You can modify the array_rand(), so to display 4 random images from the array you would do: $rand_img = array_rand($images, 4);. This would grab 4 random keys from the array which would then be used in the foreach(){} loop to build the HTML.

You need to ensure that there are at least 4 unique entries in the array in order to prevent the error I discussed in my previous post!

This post has been edited by KingCuddles: 17 September 2012 - 12:57 PM

[nick2price]

Kool, I understand what you mean. I am nearly there, just trying to figure out the last part

echo '<img src="get_stylesheet_directory_uri();'. $images[$img]['image'] .'" />';

When I check the source, it actually prints out get_stylesheet_directory_uri() rather than the directory location, so I think I must be printing it out a bit wrong.

[KingCuddles]

nick2price, on 17 September 2012 - 08:11 PM, said:

Kool, I understand what you mean. I am nearly there, just trying to figure out the last part

echo '<img src="get_stylesheet_directory_uri();'. $images[$img]['image'] .'" />';

When I check the source, it actually prints out get_stylesheet_directory_uri() rather than the directory location, so I think I must be printing it out a bit wrong.

That's an easy one

You would need to do echo '<img src="'. get_stylesheet_directory_uri() . $images[$img]['image'] .'" />';.

Apologies, I should probably have explained this rather than just answering it, as CTphpnwb pointed out below, mixing languages (in this case PHP & HTML) can lead to confusion like it did here. In fact CTphpnwb has a nice tutorial, with lots of great resources on Code Separation.

This post has been edited by KingCuddles: 17 September 2012 - 01:28 PM

[CTphpnwb]

The problem with mixing languages is that everything can seem right but not work because it's being executed by the wrong computer. If get_stylesheet_directory_uri() is a php function then you don't want to sent it to the browser, only its results.

[nick2price]

get_stylesheet_directory_uri() is actually from my original code seen in the OP. I know its a php function, and I am pretty sure it comes from wordpress (thats what I am using). What it should do is return the home directory path, which it does in my OP, but not the way I have it now. I suppose there is no harm in hardcoding the url though.

[nick2price]

I have actually just though of something I am missing, which may be hard to get in, although it may not. At the moment, 4 images are displayed randomly out of 8 possible images. Would it be possible to bind a css class to each image, so the first image displayed would have class="tab-image1", second image class="tab-image2" etc. There would only be 4 css classes though, to whatever 4 images which are displayed.

I have actually just thought of something else, which may restrict me from using this method altogether. Before I made any changes to my code, each image set looked like

<a href="http://www.test.example.com/#">
    <img class="tab-image2" src="<?php echo get_stylesheet_directory_uri(); ?>/images/price<?php $random = rand(1,8); echo $random; ?>.jpg"/>
    <img class="tab-image2a" src="<?php echo get_stylesheet_directory_uri(); ?>/images/price2tab.jpg" />
</a>

The reason 2 images are there for one space is due to my media queries. To start with, the second image is hidden using css. If the screen resolution changes to a tablet size, the second image is displayed and the first one hidden (images have different dimensions). All of this is handled through css, so it may work if I can use the approach you have suggested, but to somehow get the correct class names in there.

What do you think?

[KingCuddles]

nick2price, on 17 September 2012 - 08:34 PM, said:

get_stylesheet_directory_uri() is actually from my original code seen in the OP. I know its a php function, and I am pretty sure it comes from wordpress (thats what I am using). What it should do is return the home directory path, which it does in my OP, but not the way I have it now. I suppose there is no harm in hardcoding the url though.

I would avoid hard coding the URL, as I am sure get_stylesheet_directory_uri() was created for a reason, it should return the same now as it did before though. But I am no expert on Wordpress, but their Codex may be of more help.

nick2price, on 17 September 2012 - 08:57 PM, said:

I have actually just though of something I am missing, which may be hard to get in, although it may not. At the moment, 4 images are displayed randomly out of 8 possible images. Would it be possible to bind a css class to each image, so the first image displayed would have class="tab-image1", second image class="tab-image2" etc. There would only be 4 css classes though, to whatever 4 images which are displayed.

I have actually just thought of something else, which may restrict me from using this method altogether. Before I made any changes to my code, each image set looked like

<a href="http://www.test.example.com/#">
    <img class="tab-image2" src="<?php echo get_stylesheet_directory_uri(); ?>/images/price<?php $random = rand(1,8); echo $random; ?>.jpg"/>
    <img class="tab-image2a" src="<?php echo get_stylesheet_directory_uri(); ?>/images/price2tab.jpg" />
</a>

The reason 2 images are there for one space is due to my media queries. To start with, the second image is hidden using css. If the screen resolution changes to a tablet size, the second image is displayed and the first one hidden (images have different dimensions). All of this is handled through css, so it may work if I can use the approach you have suggested, but to somehow get the correct class names in there.

What do you think?

Should be really simple to add a bit of code to the foreach loop which adds a class to the image if its the first image. It should also be easy to extend this counter to add class of image-1, image-2, image-3 and image-4 to the image.

Give it a stab, as there is no point me writing all of the code for you, you will learn nothing that way .

Edit, I misread what you where looking for, updated post accordingly.

This post has been edited by KingCuddles: 17 September 2012 - 02:16 PM

[nick2price]

Kool, I have an idea of how to do this, so it shouldnt be too difficult. What about adding another image though which would be hidden or displayed depending on the browser size. The hiding and displaying shouldnt be a problem as this is handled by the css, but actually getting the image there, would it be a case of just adding another echo which acts like the one now does, but just providing it a different css class? So faguly speaking, it would take the form of (not finished code)

foreach ($rand_img as $img) {
      echo '<a href="'. $images[$img]['url'] .'">';
      echo '<img class ="classA" src="'. $images[$img]['image'] .'" />'; /*hidden when tablet*/
      echo '<img class ="classB" src="'. $images[$img]['image'] .'" />'; /*displayed when tablet*/     
      echo '</a>';
}

[KingCuddles]

nick2price, on 17 September 2012 - 09:28 PM, said:

Kool, I have an idea of how to do this, so it shouldnt be too difficult. What about adding another image though which would be hidden or displayed depending on the browser size. The hiding and displaying shouldnt be a problem as this is handled by the css, but actually getting the image there, would it be a case of just adding another echo which acts like the one now does, but just providing it a different css class? So faguly speaking, it would take the form of (not finished code)

foreach ($rand_img as $img) {
      echo '<a href="'. $images[$img]['url'] .'">';
      echo '<img class ="classA" src="'. $images[$img]['image'] .'" />'; /*hidden when tablet*/
      echo '<img class ="classB" src="'. $images[$img]['image'] .'" />'; /*displayed when tablet*/     
      echo '</a>';
}

That should work for what you are aiming for.

This post has been edited by KingCuddles: 17 September 2012 - 02:39 PM