PHP code isn't rendered, but referenced images are being pulled

[Joachim]

I have the following code on a website:

<?php namespace ProcessWire; ?>

<section id="<?php echo $page->title ?>" class="module">	
	<?php echo "{$page->text}"; ?>
	<div class="landing_images">
    	<?php 
    	foreach($page->introimg_field as $intro_image){
    	   echo "
    	       <a href='{$intro_image->page_picker->url}'>
    	           <h3>
    	                {$intro_image->title}
    	           </h3>
    	           <img src='{$intro_image->image->url}' alt='{$intro_image->description}'>
    	       </a>";
    	    
    	};	?>
	</div>
</section>

For some reason, most of the time this code doesn't seem to get executed. The strange thing is, that the referenced images (the $intro_image fields) are being pulled, as they appear in the console:

As you can see from the turtle icons, the server response times are very slow (around 650 ms), but then again, the code above is rendered client-side as:

<section id="landing" class="module">	
		<div class="landing_images">
    		</div>
</section>

So the $intro_image fields inside the code are read, but the code surrounding it, i.e. within .landing_images, is not rendered at all. 

Does anyone know what could be the problem here?

Edited Thursday at 10:36 AM by Joachim
privacy

[markus-th]

Hi @Joachim

the most common reason a foreach loop "fails" silently is that the array/WireArray being looped over is empty.

Have you tried to test $page->introimg_field via var_dump?

oh and, your images are loaded via css:
 

 

Edited Thursday at 02:19 PM by markus-th
Image with url removed

[Joachim]

Right, I had hoped loading them through CSS would fix the problem somehow, but forgot about that 😬 That explains that part, thank you, Markus!

Locally the page always loaded correctly, but I have sanitised the code a bit and perhaps introduced a mistake, although sometimes the pictures do load fine. 

I'll try your suggestions and get back to you.

[Joachim]

var_dump($page->introimg_field) gives:

object(ProcessWire\RepeaterPageArray)#258 (5) {
	["field"]=> array(4) {
		["id"]=> int(111) ["name"]=> string(14) "introimg_field" ["label"]=> string(13) "Landing image" ["type"]=> string(17) "FieldtypeRepeater" 
	} 
	["forPage"]=> array(6) {
		["id"]=> int(1027) ["name"]=> string(7) "landing" ["parent"]=> string(6) "/home/" ["template"]=> string(16) "module_introImgs" ["title"]=> string(7) "landing" ["text"]=> string(0) "" 
	} 
	["count"]=> int(0) ["items"]=> array(0) {}
	["selectors"]=> string(0) "" 
}

(I've never used this function, so I'm not entirely sure how to interpret this. Maybe ["count"]=> int(0) ["items"]=> array(0)count"=> int(0) is a bad sign?)

It seems no matter what I do, the foreach function isn't working—until for some reason the images load, apparently randomly, after which the function works after every reload, suggesting a cache issue, I'm guessing (this is also why I tried loading the images in the main CSS file). 

EDIT: I am loading children pages as modules into the main pages. Take the following structure, for example:

HOME 
            - text
            - images
            - marquee
            - text2

The subordinate pages are loaded into the Home page using echo wireRenderFile(). Could it simply be that I'm referencing $page (in foreach($page->introimg_field as $intro_image), so it is looking for my Repeater Fields in the Home page, while in actuality they are on a child page?

Edited Thursday at 01:25 PM by Joachim

[markus-th]

@Joachim

Exactly, when you use wireRenderFile() (or include), the variable $page remains the current page being viewed in the browser—in this case, the Home page. Since your Repeater fields live on the child pages (the modules), $page->introimg_field is looking at the Home page, finding nothing, and returning an empty object.

When you loop through your child pages to render them as components, pass the specific child page into the options array of wireRenderFile.

foreach($page->children() as $component) {
    // We pass the $component page object into the file
    echo wireRenderFile("components/{$component->template->name}.php", [
        "item" => $component
    ]);
}

Inside the child (module) template:

<section id="<?php echo $item->name; ?>" class="module">	
    <div class="landing_images">
        <?php foreach($item->introimg_field as $intro_image): ?>
            <a href="<?php echo $intro_image->page_picker->url; ?>">
                <h3><?php echo $intro_image->title; ?></h3>
                <img src="<?php echo $intro_image->image->url; ?>" alt="<?php echo $intro_image->description; ?>">
            </a>
        <?php endforeach; ?>
    </div>
</section>

This should give you the correct array.