SOLVED Load images children

[Troost]

Hiya all,

My structure is: Home > Projects > Project 1...
And my goal is to echo the image thumbnail fields from Project 1, Project 2, Project 3 etc, on the homepage (called 'Portfolio site' in the attach).

Can someone explain me the way to hook these fields to the homepage? I can't figure it out myself with the cheatsheet and my current skill level.

Thanks in advance!

Cheers,
Hugo

[MoritzLost]

If you post the template code that you have so far it will be easier to point you in the right direction. Anyway, in order to loop over the projects in your homepage template, you'll want to (1) get the projects index page, (2) find all children with the project template and (3) render the URL and preview image field in your markup. Something like this:

// use the id of your actual projects page
$project_index = $pages->get(156);

// use the template name of your project template
$projects = $project_index->children("template=project");

echo '<ul>';
foreach ($projects as $project) {
  	echo '<li>';
	echo '<a href="' . $project->url() . '">';
    // use the field name of your preview image field
    echo '<img src="' . $project->preview_image->url() . '" alt="' . $project->preview_image->description() . '">';
	echo '</a>';
	echo '</li>';
}
echo '</ul>';

 

[Troost]

Thanks MoritzLost for your response!

Home:

<?php include("./header.php"); ?>
<?php include("./projectoverzicht.php"); ?>
<?php include("./footer.php"); ?>

Projectoverzicht:
 

<div id="gtco-project">
			<div class="container">
				<div class="row row-pb-md">
					<div class="col-md-7">
						<h3><?php echo $page->introtitel; ?></h3>
						<p class="desc"><?php echo $page->introtext; ?></p>
					</div>
				</div>

				<div class="row row-pb-md">						
					<div class="col-md-4 col-sm-4 col-xs-6 fh5co-project animate-box">	
						<a href="#"><img src="<?php echo $page->projectthumb; ?>" class="img-responsive">
							<h3>Fancy 3D Letter Effect</h3>
						</a>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-6 fh5co-project animate-box">
						<a href="#"><img src="<?php echo $page->projectthumb; ?>" class="img-responsive">
							<h3>Hard Cover A5 Format</h3>
						</a>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-6 fh5co-project animate-box">
						<a href="#"><img src="<?php echo $page->projectthumb; ?>" class="img-responsive">
							<h3>Notepad Mockup</h3>
						</a>
					</div>
              </div>
			</div>

 

I tried to place your code in my projectoverzicht.php but it still won't echo anything out

<div id="gtco-project">
			<div class="container">
				<div class="row row-pb-md">
					<div class="col-md-7">
						<h3><?php echo $page->introtitel; ?></h3>
						<p class="desc"><?php echo $page->introtext; ?></p>
					</div>
				</div>

				<div class="row row-pb-md">	

				<?php 
				$project_index = $pages->get(43);
				$projects = $project_index->children("template=projectdetail");

					echo '<div class="col-md-4 col-sm-4 col-xs-6 fh5co-project animate-box">';
					foreach ($projects as $project) {
						echo '<a href="' . $project->url() . '">';
					    echo '<img src="' . $project->projectthumb->url() . '" alt="' . $project->projectthumb->description() . '" >';
					    echo '<h3>$project->title</h3>';
						echo '</a>';
					}

					echo '</div>'; ?>
					
				</div>				
			</div>
		</div>

 

 

/* EDIT */

Oke, i'm getting some where with this! Only, as u can see, it won't echo out the H3

<div id="gtco-project">
			<div class="container">
				<div class="row row-pb-md">
					<div class="col-md-7">
						<h3><?php echo $page->introtitel; ?></h3>
						<p class="desc"><?php echo $page->introtext; ?></p>
					</div>
				</div>

				<div class="row row-pb-md">	

				<?php 
				$project_index = $pages->get(1015);
				$projects = $project_index->children("template=projectdetail");

					foreach ($projects as $project) {
						echo '<div class="col-md-4 col-sm-4 col-xs-6 fh5co-project animate-box">';
						echo '<a href="' . $project->url() . '">';
					    echo '<img src="' . $project->projectthumb->url() . '" alt="' . $project->projectthumb->description() . '" class="img-responsive" >';
					    echo '<h3>$project->title</h3>';
						echo '</a>';
						echo '</div>';
					} ?>
					
				</div>				
			</div>
		</div>

 

[MoritzLost]

Hi @Troost, I see a couple of possible reasons. For one, you are displaying multiple fields in the projectoverzicht.php, are those fields from the homepage or from the projects index page? The $page variable will always refer to the current page, so if the loaded page is the homepage, ProcessWire will look for those fields on the homepage. If the projectoverzicht.php is also used as a standalone-page (for example, if you have a page https://your-domain.de/projectoverzicht), then the $page variable will refer to this page instead, so that is a possible error.

Besides that, you are using the $project_index variable from my example, but it isn't declared anywhere, that will throw a critical error in PHP. Make sure to load the index page first!

[Troost]

@MoritzLost Thanks again for your response.

I've figured it out with your lines of code. I've set some variables in my header.php. The variable from your example was later on editted in my post. I forgot to change that indeed.

	<?php $header = $pages->get(1018); ?>
	<?php $home = $pages->get(1); ?>
	<?php $footer = $pages->get(1019); ?>

The only thing now is to get the H3 working, the rest is fine, thanks again for your support man!! ?

[Troost]

Solved! Thanks to @MoritzLost

 

<?php 
				$project_index = $pages->get(1015);
				$projects = $project_index->children("template=projectdetail");
					foreach ($projects as $project) {
						echo '<div class="col-md-4 col-sm-4 col-xs-6 fh5co-project animate-box">';
						echo '<a href="' . $project->url() . '">';
					    echo '<img src="' . $project->projectthumb->url() . '" alt="' . $project->projectthumb->description() . '" class="img-responsive" >';
					    echo '<h3>' . $project->title() . '</h3>';
						echo '</a>';
						echo '</div>';
					} ?>