Project view loop problem, can not close row

Kirby 2 Solved ✅
1

Hi guys,

my project view does not work as i want. i’d like to fetch my projects in a grid system like in this example:

proj.jpg960×1200 15.9 KB

here is the code snippet:

	<?php 
// grab your projects
	$projects = page('projects')->children()->visible();
	$count = 0; foreach ($projects as $project) : ?>
	<?php if($count % 3 < 1): ?>


		<div class="row columns columns-1">
			<div class="column column--no-padding">
				<div style="text-align: center;">
					<div style="width:49.99%; display:inline-block;padding:0 15px;">
						<a href="<?php echo $project->url() ?>">
							<h2><?php echo $project->title()->html() ?></h2>

							<?php
							$i = 0;
							$datasrc = '';
// loop through the images
// result is a comma separated list of the srcs
							foreach($project->images()->shuffle()->limit(5) as $image) {
								if ($i == 0) {
									$datasrc .= $image->url();
								} else {
									$datasrc .= ',' . $image->url();
								}
								$i++;
							}
							?>

							<div class="img--container">
								<img class="img--hover" src="<?php echo $project->images()->first()->url() ?>" alt="<?php echo $project->title()->html() ?>" data-src="<?php echo $datasrc ?>" data-index="0">
							</div>
						</a>
						<div>
							<span><?php echo $project->images()->count() ?> Images</span>
						</div>
					</div>
				</div>
			</div>
		</div>


	<?php else: ?>
		<div>
			<div class="columns-2">
				<div class="column">
					<a href="<?php echo $project->url() ?>">
						<h2><?php echo $project->title()->html() ?></h2>
						<?php
						$i = 0;
						$datasrc = '';
// loop through the images
// result is a comma separated list of the srcs
						foreach($project->images()->shuffle()->limit(5) as $image) {
							if ($i == 0) {
								$datasrc .= $image->url();
							} else {
								$datasrc .= ',' . $image->url();
							}
							$i++;
						}
						?>

						<div class="img--container">
							<img class="img--hover" src="<?php echo $project->images()->first()->url() ?>" alt="<?php echo $project->title()->html() ?>" data-src="<?php echo $datasrc ?>" data-index="0">
						</div>
					</a>
					<div>

						<span><?php echo $project->images()->count() ?> Images</span>
					</div>
				</div>
				</div>

		<?php endif; ?>
		<?php $count++; endforeach ?>

Maybe you have an idea?
Would be great to have a hint how to align the headlines on top of the images as well :slight_smile:
Thanx in advance

2

I’ve only had a quick look, but there’s an open div tag after your <?php else: ?> that doesn’t close.

Wouldn’t it be easier to deal with this with css only, with some nth-child selectors ? Like : https://jsfiddle.net/08anoo20/

1 Like
3

I agree with @sylvainjule, I’d recommend using CSS to achieve this. Also, you can optimize your code even more:

Replace all this:

<?php
$i = 0;
$datasrc = '';
// loop through the images
// result is a comma separated list of the srcs
foreach($project->images()->shuffle()->limit(5) as $image) {
 if ($i == 0) {
	$datasrc .= $image->url();
} else {
  $datasrc .= ',' . $image->url();
}
$i++;
}?>

With:

<?php foreach($project->images()->shuffle()->limit(5) as $image) {
  $datasrc[] = $image->url();
} ?>

And then in the data attribute, use implode()

data-src="<?php echo implode(',', $datasrc) ?>"
1 Like
4

Thx one more time for your help! I’ll try your solutions on monday.