Hello all. I seen a couple of posts out there on adding a hero image to a homepage using a blueprint and snippet.
I want the ability to use the added image, on the home panel and select whether it to be shown or not.
My blueprint as follows:
title: Home
pages: false
files: true
sortable: true
fields:
title:
label: Title
type: text
text:
label: Hero Text
type: textarea
coverimage:
label: Cover Image
type: image
display:
label: Display image
type: checkbox
text: Should this image be displayed?
I am then calling the snippet:
<?php
$images = $page->images()->filterBy('display', '1');
foreach($images as $image): ?>
<img src="<?php echo $page->image($page->coverImage()->value())->url() ?>" />
<?php endforeach ?>
In my hero container:
<section class="hero" style="background-image:url(<?php echo $page->image($page->coverImage()->value())->url() ?>">
</section
The image is showing, but it is not responding to the display checkbox.
As a bonus, I’d like to change the font styling if an image is shown.
Much thanks.
1 Like
I don’t quite get it. You are doing two different things here.
looping through a set of images
displaying a background image
What is the display field relating to, to both options?
You are trying to filter your images by a page field, not by a file meta data field, which will not work.
If you.want a display field to filter your images by, then you would have to add a field to the image meta data:
title: Home
pages: false
files:
sortable: true
fields:
display:
label: Display image
type: checkbox
text: Display image?
The you can filter by this field.
Edit: An one other thing, This snippet
<?php
$images = $page->images()->filterBy('display', '1');
foreach($images as $image): ?>
<img src="<?php echo $page->image($page->coverImage()->value())->url() ?>" />
<?php endforeach ?>
will always display the same image anyway, because you just call the image selected in the coverimage section. Why the loop then?
Ya… very new to php and kriby. I actually don’t want to sort through images. I just want to show a single image if the check box to display is checked.
I see:
<?php
$image = $page->coverimage()->toFile();
if($image && $page->display()->bool()): ?>
<img src="<?php echo $image->url() ?>" />
<?php endif ?>
https://getkirby.com/docs/cheatsheet/field-methods/toFile
1 Like
The image is still being displayed, despite the box not being checked…
Then try:
<?php
$image = $page->coverimage()->toFile();
if($image && $page->display() == "1"): ?>
<img src="<?php echo $image->url() ?>" />
<?php endif ?>
Looks like my issue is in calling the snippet in my container. Any suggestions for how to do this?
<section class="hero" style="background-image:url(<?php snippet('heroimage') ?>)">
</section>
Oops, you can’t do that.
<?php
$image = $page->coverimage()->toFile();
if($image and $page->display() == "1"): ?>
<section class="hero" style="background-image:url(<?= $image->url() ?>)"></section>
<?php endif ?>
If you want to display the section but without the hero image, then you have to use the if statement on the style property.
Hmm… that works for the image, but now when the box is un-checked the conatiner itself is actually being hidden… which I don’t want. I want the hero image container to always be present with the background image being the only thing that’s variable.
texnixe
February 3, 2017, 8:58pm
11
That what I said, if you need the container, wrap the if statement around the style property.
Ok, this presents some different markup then… Is it possible to call a snippet or php in css class properties?
texnixe
February 3, 2017, 9:42pm
13
No, you don’t need a different markup. And no, you can’t use PHP in your external stylesheets, but you could inline you styles. So both these options are possible.
<style>
<?php
if($image = $page->coverimage()->toFile() && $page->display() == "1"): ?>
.hero {
background-image: url(<?= $image->url() ?>);
}
<?php endif ?>
</style>
or
<?php
$image = $page->coverimage()->toFile();
?>
<section class="hero" <?php if($image && $page->display() == "1"){ echo 'style="background-image:url(' . $image->url() . ')"'; }?>>bla bla bla</section>
If you have no knowledge of PHP whatsoever, I suggest you go through some basic PHP tutorials, especially if statements, foreach loops, stringing variables with html etc.
This post has some resources: Search best websites to learn php
guess there’s always something new to find in the kirby core / cheatsheet…
the “toFile()” command is new to me.
Always were using something like:
$page->image($page->coverimage())
guess there’s always new things to find out.
texnixe
February 4, 2017, 1:40pm
15
@carstengrimm : Might be interesting to know that as a field method this even works with structure field elements (when using the toStructure() method):
<?php
// get all events
$events = $page->events()->toStructure();
// loop through the collection of events:
foreach($events as $event): ?>
<h1><?php echo $event->event_title()->html() ?></h1>
<p><?php echo date('Y-m-d', strtotime($event->event_date())) ?></p>
<p><?php echo $event->event_location()->html() ?></p>
<?php if($image = $event->event_image()->toFile()) echo $image->html() ?>
<?php endforeach ?>
(https://getkirby.com/docs/cookbook/the-structure-field#accessing-the-data-in-a-template )
yeah, later i’ll adjust some code where i turn this knowledge into practice
1 Like
