Load specific image/hero image

The CMS Questions
1

I’m pretty sure it’s quite a simple thing to do and probably a stupid thing to ask but I’ve been searching and trying but just can’t seem te get it to work.

In my blueprints I’ve made a field to load a hero image in.

title: Default Page
preset: page
fields:

  hero:
    label: Hero Image
    type: files
    multiple: false
    layout: cards

  intro:
    label: Intro
    type: textarea

  text:
    label: Text
    type: textarea
    size: large

Now I’d like to load that hero image in the frontend. Working with this code right now, which sorta works, but I want to target that specific hero image. How do I do that? Use a filter or…?

<?php if ($file = $page->files()->first()): ?>
	<img src="<?= $file->url() ?>" class="hero-image">
<?php endif ?>

Many thanks in advance & cheers, Wim

2

You have to call the field and convert the value to a file:

<?php if ($file = $page->hero()->toFile()): ?>
	<img src="<?= $file->url() ?>" class="hero-image">
<?php endif ?>
1 Like
3

Many thanks Sonja!