Show a single image from a different section

Kirby 4 Solved ✔️
1

Hi,
I’m sorry, i’m trying to learn PHP but i’m stumped with this…

On a website homepage I want to ‘pull’ information from the “Services” section of the website. After trying multiple variations of code I thought might work I have given up and come here for help :confused:

The url, title and IntroParagraph from the Services ‘pages’ are showing as expected but I cannot get the image to display! The blueprint field name is ‘MainHeroImage’

H have the following in my homepage template:

                    <?php foreach ($pages->find('services')->children()->listed() as $item): ?>
                        <li class="home-service-card">
                            <a href="<?= $item->url() ?>">
                                <h2><?= $item->title() ?></h2>
                                <p><?= $item->IntroParagraph() ?></p>
                                <?php if ($image = $item->MainHeroImage()->toFile()): ?>
                                <div class="img">
                                    <img src="<?= $image->url() ?>" alt="">
                                </div>
                                <?php endif ?>
                            </a>
                        </li>
                    <?php endforeach ?>

Thanks for any advice

2

Could you post the blueprint please? If MainHeroImage was indeed a field, the code should work as expected. But I have a feeling it is not.

3

Thank you. Here’s the blueprint …

Title: Service

tabs:
  content:
    label: Content
    icon: text

    columns:

      main:
        width: 2/3

        sections:
          Hero:
            type: fields
            fields:
              HeroHeadline:
                type: text
                label: Hero Headline
              IntroParagraph:
                type: textarea
                label: Hero Paragraph
                buttons:
                  - bold
                  - italic
                  - link    
          Text:
            type: fields
            fields:
              line:
                type: line
              page-text:
                type: textarea
                label: Page text
                size: large
          Photos:
            type: fields
            fields:
              line2:
                type: line
              gallery:
                type: files
                query: page.images
                label: Supporting Photos
                layout: cards
                image:
                  ratio: 1/1

      sidebar:
        width: 1/3
        sections:
          MainHeroImage:
            type: files
            query: page.images
            label: Hero Image
            layout: cards
            size: small
            max: 1
            image:
              ratio: 16/9
              cover: true
              
  seo:
    label: SEO
    icon: search
    extends: components/seo
4

Exactly as I assumed. Your MainHeroImage is a files section, not a files field. Therefore, it is not stored in the content file. And getting the image belonging to this section will be difficult, as there are other images in the page and this section has no particular file template attached.

So two options here: Assign a template to the section, e.g. heroimage, then you can find that file via the template.

Or turn the section into a field.

 sections:
   herosection:
     type: fields
     fields:
       MainHeroImage:
         type: files
         # other setting
5

Thank you for your fast response and solution!