mdavid
October 22, 2019, 11:28pm
1
Hi,
<div class="pic">
<?php foreach($page->images() as $image): ?>
<figure>
<?php if($image = $page->image()): ?>
<div class="box">
<img src="<?= $image->url() ?>" alt="missing image">
</div>
<?php endif ?>
<div class="inline">
<span class="pic-tit">
<?= $image->Title() ?>
</span>
<span class="pic-siz">
<?= $image->WxH() ?>
</span>
</div>
</figure>
<?php endforeach ?>
</div>
but I’m only getting the first image in the folder.
Thanks for any help
Hi,
Your additional if is not needed, because you’re already working with a collection of images (set in your for-loop). In that if-clause you’re basically saying when the current $image is equal to the first image of the $page, go ahead .
This should work (untested):
<div class="pic">
<?php foreach($page->images() as $image): ?>
<figure>
<div class="box">
<img src="<?= $image->url() ?>" alt="missing image">
</div>
<div class="inline">
<span class="pic-tit">
<?= $image->Title() ?>
</span>
<span class="pic-siz">
<?= $image->WxH() ?>
</span>
</div>
</figure>
<?php endforeach ?>
</div>
In addition to @bvdputte ’s solution, you probably only want to show a gallery if the page has images:
<?php if ($page->hasImages()) : ?>
<div class="pic">
<?php foreach($page->images() as $image): ?>
<figure>
<div class="box">
<img src="<?= $image->url() ?>" alt="missing image">
</div>
<div class="inline">
<span class="pic-tit">
<?= $image->Title() ?>
</span>
<span class="pic-siz">
<?= $image->WxH() ?>
</span>
</div>
</figure>
<?php endforeach ?>
</div>
<?php endif ?>
Consider using a figcaption element instead of the div inside your figure for semantic HTML: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure . You probably don’t need the div wrapper around your image.
Don’t forget to the fill in the alt tags properly too
mdavid
October 23, 2019, 9:29pm
5
Hi, Haven’t succeeded in getting this to display as a one page scrolling gallery, still displays 1 image at a time.
css style:
img {
max-width: 80%;
height: auto;
}
.pic {
text-align: center;
max-width: 60em;
margin: 2em auto 4em;
}
.pic .box {
margin: 2em;
object-fit: contain;
margin-bottom: 1em;
}
.pic img {
box-shadow: 6px 6px 8px rgba(0,0,0,0.4);
width: auto;
max-height: 90vh;
}
.grid-wrapper {
min-width: 100%;
display: grid;
grid-template-rows: 2rem auto;
grid-template-columns: repeat(10, [col-start] 1fr);
grid-template-rows: auto 574px;
grid-gap: 20px;
grid-row-gap: 0;
justify-items: center;
text-align: center;
}
.grid-wrapper > * {
grid-column: col-start / span 10;
}
.pic {grid-column: col-start / span 10;
padding 0;
margin: 0}
select {width: 100%;
font-size: 1.25em;}
.inline {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
flex-wrap: nowrap;
min-width: 100%;
}
</style>
and this is oil.php:
<?php snippet('header') ?>
</div><!--.wrap-->
</div><!--#header-->
<?php /*
below is menu
<ul>
<?php foreach ($site->children()->listed() as $subpage): ?>
<li> <a style="font-size: 1.5em" href="<?= $subpage->url() ?>"><?= $subpage->title() ?></a></li>
<?php endforeach ?>
</ul>
*/ ?>
<!--
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>
-->
<div class="grid-wrapper">
<div class="inline">
<span class="hdr">
<a class="logo" href="<?= $site->url() ?>">
<h1 style="margin-top: -1rem; font-size: 1.5em">
Oil Paintings
</h1>
</a>
</span>
<div class="lr-arw">
<span style="float: right">
<?php if ($page->hasNextListed()): ?>
<a href="<?= $page->nextListed()->url() ?>"> <p id="triangle-right"> </p></a>
<?php endif ?>
</span>
<span style="float: left">
<?php if ($page->hasPrevListed()): ?>
<a href="<?= $page->prevListed()->url() ?>"> <p id="triangle-left"> </p></a>
<?php endif ?>
</span>
</div>
</div><!-- end inline -->
<?php if ($page->hasImages()) : ?>
<div class="pic">
<?php foreach($page->images() as $image): ?>
<figure>
<div class="box">
<img src="<?= $image->url() ?>" alt="missing image">
</div>
<div class="inline">
<span class="pic-tit">
<?= $image->Title() ?>
</span>
<span class="pic-siz">
<?= $image->WxH() ?>
</span>
</div>
</figure>
<?php endforeach ?>
</div>
<?php endif ?>
</div>
<div>
<?php snippet('footer') ?>
</div><!--#footer-->
Thanks for any help
But each oil type page only seems to have a single image… So the result is not surprising.
