Jump to content

SOLVED Load images children


Troost
 Share

Recommended Posts

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

Schermafbeelding 2019-03-19 om 08.00.31.png

Schermafbeelding 2019-03-19 om 08.04.33.png

Link to comment
Share on other sites

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>';

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

@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!! ?

  • Like 1
Link to comment
Share on other sites

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>';
					} ?>

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...