Is it possible to load images without using 'echo'?

[kathep]

I am trying to add images to a page from the basic $images default field. 

I have followed the instructions here: https://processwire.com/docs/tutorials-old/quick-start/images/

And the code of my template looks like this:

<?php 
// assignment_studentwork_example.php template file 

$assignment_w_heading = "<h1><strong>Assignment:</strong> <a href='{$page->parent->url}'>" . $page->parent->title . "</a></h1>" ;

$semester = "<p><strong>Semester:</strong> <a href='{$page->parent->url}'>" . $page->parent("template=challenge") . "</a></p>" ;

if (count($page->images)) {        
       foreach($page->images as $image) {            
         $image = $image->size(800);                
         echo "<img src='{$image->url}' />";
        }    
      }  

// If the page has children, then render navigation to them under the body.
// See the _func.php for the renderNav example function.
if($page->hasChildren) $content .= renderNav($page->children, 0, 'summary'); 

// if the rootParent (section) page has more than 1 child, then render 
// section navigation in the sidebar
if($page->rootParent->hasChildren > 1) {
	$sidebar = renderNav($page->rootParent, 3) . $page->sidebar; 
}

// Primary content goes here
$content = $assignment_w_heading . $semester . $image . $page->body; 

This code successfully loaded the images, but they load at the top of my site, above all content, like this:

The generated html positions the images immediately after the body tag, instead of between $semester and $page->body:

I think this is because of the kind of php structure I've written my templates in (object oriented?). I remember I have had to use workarounds instead of 'echo' in the past in my templates, but I don't remember why. I only have basic php coding skills.

I have tried to reposition the images by adding a class and styling it with css, but no luck. I think this is because of where the images are positioned within the generated html, as I want the images to be positioned in css 'relative' to the elements above them in my php code, but the generated html positions the images out of order.

My questions are:

1. is there an alternative way to call images that removes the need to use 'echo'?

2. can anyone see a way to fix my code so that the images will appear where the text 'business-card-putney-daniel2.800x0.png' appears, instead of at the top of the page?

It would also be good to remove the text 'business-card-putney-daniel2.800x0.png' at some point - I don't see what is generating it, but right now it serves as a handy placeholder for where the images should go.

Thanks for reading, and I hope you can help!

[Sergio]

Hi kathep!

You just need to store the images in a variable just like $content is. So, change the loop:

if (count($page->images)) {        
  $images = '';
  foreach($page->images as $image) {            
   $image = $image->size(800);                
   $images .= "<img src='{$image->url}' /><br />";
  }    
}  
 
... rest of code

// Primary content goes here

$content = $assignment_w_heading . $semester . $images . $page->body;

 

You can remove the <br /> after each image if you prefer.

[kathep]

Hurrah! 

Thanks @Sérgio! Worked perfectly