Hi!

I'm trying to implement a PHP script within Couch to allow for responsive images with different aspect ratios that don't cause the page to re-flow as they load. I understand from other posts here that pure PHP is executed before the couch tags, which is where the <cms:php> tag come in.

I've tried many different variations of below but just can't get it work, the image is never displayed. When viewing the source within the browser the image source is just: ' '.

Code: Select all

<div class="image-wrapper" style="max-width: <? echo $width ?>; max-height: <? echo $height ?>;">
   <!-- Set the aspect % as the padding bottom -->
   <div class="responsive-container" style="padding-bottom: <? echo $aspect ?>%;">
      <!-- Echo the image -->
      <img src="<? echo $image; ?>" alt="<cms:show k_page_title />" />
   </div>
</div>

Code: Select all

<cms:php><script>
// Reference to the image
$image = '<cms:show news_image />';
// Get the width and height
list($width, $height) = getimagesize($image);
// Calculate the aspect, with 2 decimal points
$aspect = round($height / $width * 10000) / 100;
</script></cms:php>

Any help would be a huge help as the site is meant to launch this week (though this isn't a deal breaker!).

Thanks!

You are correct in saying that normal PHP executes before couch. This means that your code to show the various variables won't work. You've used <cms:php> to calculate the variables and set them (rightly so), but you've used normal PHP to show the variables. This executes before the <cms:php> so the variables have not yet been set. Try this for your code to show them:

Code: Select all

<div class="image-wrapper" style="max-width: <cms:php> echo $width </cms:php>; max-height: <cms:php> echo $height </cms:php>;">
   <!-- Set the aspect % as the padding bottom -->
   <div class="responsive-container" style="padding-bottom: <cms:php> echo $aspect </cms:php>%;">
      <!-- Echo the image -->
      <img src="<cms:show news_image />" alt="<cms:show k_page_title />" />
   </div>
</div>

Thanks for getting back to me, sorry for the late reply! I've tried the suggestion you made but sadly still getting the same behaviour.

Do you have any errors on the page or in the error_log file?

Perhaps paste the entire template code here so I can debug it a little more and find the cause