# Show first image in card page listing

**URL:** <https://forum.getkirby.com/t/show-first-image-in-card-page-listing/23957>\
**Category:** Questions\
**Tags:** v3\
**Created:** [November 17, 2021, 12:13pm UTC](https://forum.getkirby.com/t/show-first-image-in-card-page-listing/23957 "2021-11-17T12:13:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mikeharrison](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mikeharrison/32/9620_2.png) [@mikeharrison](https://forum.getkirby.com/u/mikeharrison)\
**Post date:** [November 17, 2021, 12:13pm UTC](https://forum.getkirby.com/t/show-first-image-in-card-page-listing/23957/1 "2021-11-17T12:13:56Z")

</div>

Hi,  
I have the following pages section in my `site.yml`

```auto

prizesList:
  headline: Prizes
  type: pages
  templates: prize
  parent: site.find("the-prizes")
  status: all
  layout: cards
  size: tiny
  image:
    cover: true
    ratio: 1/1
    back: black
    query: page.images.sortBy('sort', 'asc').first

```

Which I would expect to show the first image in the `images` field on the page, in whatever order the user has selected (images is a `files` field with multiple images allowed).

However it is not showing the first image (or even the last), so I am not sure where I am going wrong. If anyone has any thoughts that would be great! I have just updated to Kirby 3.6 if that is helpful

---

<div class="post-metadata">

**Author:** ![moonwalk](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@moonwalk](https://forum.getkirby.com/u/moonwalk)\
**Post date:** [November 17, 2021, 1:47pm UTC](https://forum.getkirby.com/t/show-first-image-in-card-page-listing/23957/2 "2021-11-17T13:47:43Z")

</div>

> [@mikeharrison](#):
>
> (images is a `files` field with multiple images allowed).

Since your field has the same name as the native `$page->images()` method, your query will pick from those images instead of from your files field (see the docs on field naming).

Additionally, if you want to get images from a field, you have to convert the field value to a files collection:

```auto
query: page.content.get('images').toFiles.sortBy('sort', 'asc').first

```

---

<div class="post-metadata">

**Author:** ![mikeharrison](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mikeharrison/32/9620_2.png) [@mikeharrison](https://forum.getkirby.com/u/mikeharrison)\
**Post date:** [November 25, 2021, 10:40am UTC](https://forum.getkirby.com/t/show-first-image-in-card-page-listing/23957/3 "2021-11-25T10:40:41Z")

</div>

Thank you - yes that was the issue, I should have known better about field names!