Echo structure incorrect

[Peter Knight]

Hi guys

Managed to get a complex (to me anyway) image count and if/else echo going.

<?php
	// if Background_Image contains more than 1 echo those images in a slideshow
	if($page->Background_Image->count > 1 ){

	$bgimage = $page->Background_Image;
	foreach ($bgimage as $image) { 
	echo"
	<script>
	$.backstretch('$image->url');	
	</script>
	";}
}
	
	else 
	
	// otherwise echo a single image on its own
	if($page->Background_Image->count == 1 ){
	$bgimage = $page->Background_Image;
	foreach ($bgimage as $image) { 
	echo"
	<script>
	 $.backstretch(['$image->url',], {duration: 3000, fade: 750});
	</script>
	";}
}
?>

I'm not sure how to handle the last part of the echo though.

The Script I'm using says that an image slideshow should be outputted in following format

 $.backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ], {duration: 3000, fade: 750});

IE each image needs a comma but the last image should have no comma then a square bracket and then the remainder.

With my code, I'm currently getting three separate 

	<script>
	$.backstretch('/site/assets/files/1/016---dc3420.jpg');	
	</script>
	
	<script>
	$.backstretch('/site/assets/files/1/021---dc3420.jpg');	
	</script>
	
	<script>
	$.backstretch('/site/assets/files/1/photo-bathroom.jpeg');	
	</script>

instead of the desired structure 

[LostKobrakai]

if($page->Background_Image->count > 1 ){

$bgimage = $page->Background_Image;

echo '<script>$.backstretch(["';

echo $bgimage->implode('", "', "url"); // results in url", "url", "url

echo '"], {…});</script>';

}

}

[DaveP]

I think you can do it simpler than the way you are doing.

<?php

    $bgimage = $page->Background_Image;

    $output = "<script>
          $.backstretch([";

    foreach($bgimage as $image){
        $output .= '"'.$image->url.'",';
    }

    $output = rtrim($output, ',');

    $output = "], {duration: 3000, fade: 750});";

    echo $output;

Usual written-in-browser caveat.

So, what we are doing is building our output as we go along. The main (minor) advantage is that after the end of the foreach we can strip off the last trailing comma using rtrim. It doesn't matter how many background images there are - 1 or n.

Darn! LostKobrakai beat me to it (with a very elegant reply).

Edited May 22, 2015 by DaveP

[Peter Knight]

Yippe Thanks guys. And thanks for the explanation too

[Peter Knight]

Hi guys

related to above.

I have working code which I need to adapt so that

$.backstretch
becomes
$("#bg-home").backstretch

Full example below.

Everytime I try to surround the #bg-home with double quotes or even escape it, I get a syntax error.

 

	<?php

	// if home_hero_image field contains more than 1 echo images in a slideshow
	// Mainly for Homepage
	if($page->home_hero_image->count > 1 )
	{
  	$bgimage = $page->home_hero_image;
  	echo '<script>$(#bg-home).backstretch(["'; 
  	echo $bgimage->implode('", "', "url"); // results in url", "url", "url
  	echo '"], {duration: 5000, fade: 1000});</script>';
  	}
	
	else 
	
	// otherwise echo a single image on its own
	// Mainly for all other pages
	if($page->home_hero_image->count == 1 )
	{
	$bgimage = $page->home_hero_image;
	foreach ($bgimage as $image) { 
	echo"
	<script>
	  $(#bg-home).backstretch('$image->url');	
	</script>
	";
	}
}
?> 
<!--END Backstretch-->

Why would 

$(\"#bg-home\").backstretch

not work on this occasion?

[Robin S]

1 hour ago, Peter Knight said:

Why would 

$(\"#bg-home\").backstretch

not work on this occasion?

I tried that and the escaping works for me, so not sure why it wont for you. You could use single quotes around the jQuery selector...

echo "
<script>
  $('#bg-home').backstretch('$image->url');	
</script>
";

...or concatenate inside a single-quoted string...

echo '
<script>
  $("#bg-home").backstretch("' . $image->url . '");	
</script>
';

 

[Peter Knight]

58 minutes ago, Robin S said:

I tried that and the escaping works for me, so not sure why it wont for you.

It's wierd alright.

This works on it's own

<?php
	
	if($page->home_hero_image->count > 1 )
	{
  	$bgimage = $page->home_hero_image;
  	echo '<script>$("#bg-home").backstretch(["'; 
  	echo $bgimage->implode('", "', "url"); // results in url", "url", "url
  	echo '"], {duration: 5000, fade: 1000});</script>';
  	}
	
	?> 

Might even be an issue with the whole if, then logic.