Building a dynamic thumbnail display

I’d building a dynamic result and want to space out the thmbnails so that they line up against the left and right sides of the content area respectivly. The first image would be aligned left. The second image would be aligned center and the right image would be aligned right.

I haven’t been able to find any code examples regarding this. Does anybody have any suggestions? I don’t care if it uses lists or divs.

<?php
// psudocode...
$photos = $db->get_results("SELECT profile_photo FROM photos");
foreach $photos as $photo) {
	echo '
	<img src="1.jpg" class="left"> <img src="2.jpg" class="center"> <img src="3.jpg" class="right">
	<img src="4.jpg" class="left"> <img src="5.jpg" class="center"> <img src="6.jpg" class="right">
	<img src="7.jpg" class="left"> <img src="8.jpg" class="center"> <img src="9.jpg" class="right">
	';
}
?>

Hi dude, don’t usually post any help, usually me asking for help but I’ll give it a go. I’ve came across this exact same problem personally. The way I went about it was as below:


foreach($photos as $photo):
$counter++;

switch($counter):

     case "0":
          echo "<img src=\\"$photo\\" class=\\"left\\" />";
     break;

     case "1":
          echo "<img src=\\"$photo\\" class=\\"center\\" />";
     break;

     case "2":
          echo "<img src=\\"$photo\\" class=\\"right\\" />";
     break;

endswitch;

//Reset the counter for next foreach revolution...
if($counter=2):
unset($counter);
endif;

endforeach;

That is untested but think you’ll get the gist of it. Thought I’d through in my hand anyhow…if anyone thinks there is a better way, feel free to amend me :slight_smile:

I’m pretty much ripping off coxdabd idea, but I’m sure math could make this much leaner. I’ll grab me a few cookies (of the chocolate kind) and have another attempt. :stuck_out_tongue:


<?php
$photos = array(
  'one',
  'two',
  'three',
  'four',
  'five',
  'six',
  'seven',
  'eight',
);

function getAlignment(){
  static $counter = 0;
  $alignments = array('left' ,'centre', 'right');
  if(3 === $counter){
    $counter = 0;
  }
  return $alignments[$counter++];
}

foreach($photos as $image){
  printf(
    '<img src="%s.jpg" class="thumbnail %s" />' . PHP_EOL,
    $image,
    getAlignment()
  );
}

/*
  <img src="one.jpg" class="thumbnail left" />
  <img src="two.jpg" class="thumbnail centre" />
  <img src="three.jpg" class="thumbnail right" />
  <img src="four.jpg" class="thumbnail left" />
  <img src="five.jpg" class="thumbnail centre" />
  <img src="six.jpg" class="thumbnail right" />
  <img src="seven.jpg" class="thumbnail left" />
  <img src="eight.jpg" class="thumbnail centre" />
*/

Thank you Anthony, it worked perfectly and was flexible enough to put the results into an unordered list instead. Thank you to coxdabd for the idea! :slight_smile:

Did mine slightly more linearly.


$align = array('left','center','right');
$count = 0;
foreach($photos as $image){
  printf(
    '<img src="%s.jpg" class="%s" />' . PHP_EOL,
    $image,
    $align[($count++ % 3)]
  );
}

Could you omit the $count var and use the array key there StarLion ?

I guess you can. :slight_smile:


<?php
$photos = array(
  'one',
  'two',
  'three',
  'four',
  'five',
  'six',
  'seven',
  'eight',
);

function getAlignment($index){
  $alignments = array('left' ,'centre', 'right');
  return $alignments[$index % 3];
}

foreach($photos as $index => $image){
  printf(
    '<img src="%s.jpg" class="thumbnail %s" />' . PHP_EOL,
    $image,
    getAlignment($index)
  );
}

/*
  <img src="one.jpg" class="thumbnail left" />
  <img src="two.jpg" class="thumbnail centre" />
  <img src="three.jpg" class="thumbnail right" />
  <img src="four.jpg" class="thumbnail left" />
  <img src="five.jpg" class="thumbnail centre" />
  <img src="six.jpg" class="thumbnail right" />
  <img src="seven.jpg" class="thumbnail left" />
  <img src="eight.jpg" class="thumbnail centre" />
*/

Kind of depends on the array type returned by get_results; if it’s numeric, certainly can…


$align = array('left','center','right');
foreach($photos as $key => $image){
  printf(
    '<img src="%s.jpg" class="%s" />' . PHP_EOL,
    $image,
    $align[$key % 3]
  );
} 

If it’s associative, of course this wont work (int of non-numeric string = 0)