# Selecting images in admin panel

**URL:** <https://forum.getkirby.com/t/selecting-images-in-admin-panel/749>\
**Category:** Questions\
**Tags:** v2\
**Created:** [April 9, 2015, 4:36pm UTC](https://forum.getkirby.com/t/selecting-images-in-admin-panel/749 "2015-04-09T16:36:31Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![smr](https://avatars.discourse-cdn.com/v4/letter/s/ebca7d/32.png) [@smr](https://forum.getkirby.com/u/smr)\
**Post date:** [April 9, 2015, 4:36pm UTC](https://forum.getkirby.com/t/selecting-images-in-admin-panel/749/1 "2015-04-09T16:36:31Z")

</div>

Hi folks, new Kirby user here. I’m mostly a visual designer so what I’m asking might be totally daft, but I tried combing the docs & forum posts and having a hard time finding what I need.

I’m confused as to how one can select an image for a page. Coming from a Wordpress background, I would have a custom field for a page/post that allows you to add an image from its Media section. I’m not expecting 1:1 functionality, obviously, but I don’t see any way to create a field for images much in the same way you have a field for text, tags, etc. About the only way I see to populate a page with an image is to hard code it in the php file.

Any help would be appreciated.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 9, 2015, 4:48pm UTC](https://forum.getkirby.com/t/selecting-images-in-admin-panel/749/2 "2015-04-09T16:48:40Z")

</div>

If you want to select a specific image from a collection of images in the page’s folder, you can use a select field in your blueprint:

```auto
fields:
  select_image:
    label: Image
    type: select
    options: query
        query: 
          fetch: images
          value: '{{filename}}'
          text: '{{filename}}'

```

You may want to take a look at the Visual File Selector Field: [https://github.com/storypioneers/kirby-selector](https://github.com/storypioneers/kirby-selector)

---

<div class="post-metadata">

**Author:** ![smr](https://avatars.discourse-cdn.com/v4/letter/s/ebca7d/32.png) [@smr](https://forum.getkirby.com/u/smr)\
**Post date:** [April 9, 2015, 5:14pm UTC](https://forum.getkirby.com/t/selecting-images-in-admin-panel/749/3 "2015-04-09T17:14:46Z")

</div>

I saw that but wasn’t understanding it, and it might be overkill for what I need. I’m just doing a simple site, and may want to update the image a while down the road, but it just seems like the only way to add an image to a page is to hard code it. Also, unfamiliar with “blueprint” in this context.

For example, I’ll have an About page that’s different than my other pages, and that page is just a body of text and an image. Is there a field I can create where I can determine that image (whether it be through a direct select or even a URL) and echo that to my PHP template?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 9, 2015, 5:54pm UTC](https://forum.getkirby.com/t/selecting-images-in-admin-panel/749/4 "2015-04-09T17:54:12Z")

</div>

Well, there are many ways to add images to a page. One way is directly in the template where you can just do something like:

```php
$image = $page->images()->first();

```

or

```auto
$image = $page->images()->find('filename.jpg');

```

Or, in an image\_field in your text file, you can use the kirbytext image tag

```auto
(image: filename.jpg)

```

and then render this in your template

```php
<?php echo $page->image_field()->kirbytext() ?>

```

I guess you are not using the panel?

[Edit] but you were asking how to select images in admin panel. Well, to use the Kirby panel, you need to define so called “blueprints”, sort of templates for the forms that are displayed in the admin panel. In the blueprints, you define the fields and what sort of data those fields can accept, from simple text fields to radio buttons or select fields.

---

<div class="post-metadata">

**Author:** ![smr](https://avatars.discourse-cdn.com/v4/letter/s/ebca7d/32.png) [@smr](https://forum.getkirby.com/u/smr)\
**Post date:** [April 9, 2015, 8:52pm UTC](https://forum.getkirby.com/t/selecting-images-in-admin-panel/749/5 "2015-04-09T20:52:09Z")

</div>

OK, I tried a few of those. Using

```
(image: filename.jpg)

```

got me an image, but the problem here is it’s within the text field. I should clarify that that’s something I want to avoid. I want the image to be it’s own element that I can float right or left or whatever without it being dependent on the text field as a parent container.

I’m not 100% sure I’m doing the code right for the direct template injection (which at this point I’m fine with. Kirbytext looks wayyyy more complicated than I have time for).

This is my code but I’m getting a broken image link (am testing locally via MAMP so I’m not sure if that has something to do with it)…

![](https://dub1.discourse-cdn.com/flex017/uploads/getkirby/426/ae887258968ef426.png)

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 9, 2015, 9:06pm UTC](https://forum.getkirby.com/t/selecting-images-in-admin-panel/749/6 "2015-04-09T21:06:51Z")

</div>

You need to echo the url of the image:

```auto
<img src="<?php echo $image->url() ?>" />

```

Like I said above, when I have to do that, I usually add a cover image field to my blueprints file

```php
cover:
    label: Cover Image
    type: select
    options: images 

```

and then in the template:

```php
<?php if($cover = $page->image($page->cover())) :?>
	<img src="<?php echo $cover->url() ?>" />
<?php endif ?>

```

---

<div class="post-metadata">

**Author:** ![smr](https://avatars.discourse-cdn.com/v4/letter/s/ebca7d/32.png) [@smr](https://forum.getkirby.com/u/smr)\
**Post date:** [April 9, 2015, 9:16pm UTC](https://forum.getkirby.com/t/selecting-images-in-admin-panel/749/7 "2015-04-09T21:16:42Z")

</div>

There we go. I can HTML/CSS/jQuery like nobody’s business, but once you start getting into PHP territory I’m like “ehhhh”. This should help me on my way though. And I’ll review blueprints a bit more to see what I can accomplish with that.

Thanks a bunch for your help!

---

<div class="post-metadata">

**Author:** ![aftereffectsmagic](https://avatars.discourse-cdn.com/v4/letter/a/a183cd/32.png) [@aftereffectsmagic](https://forum.getkirby.com/u/aftereffectsmagic)\
**Post date:** [February 4, 2016, 1:24am UTC](https://forum.getkirby.com/t/selecting-images-in-admin-panel/749/8 "2016-02-04T01:24:44Z")

</div>

@texnixe, hope you can help out! I’m having trouble with the exact syntax here- can you review the below to find where my error(s) is/are?

Blueprint (label, type and options are all indented properly):

```auto
staffimage:
  label: Staff Image
  type: select
  options: images`

```

Template:

```auto
<?php foreach($page->staffmember()->yaml() as $staffmember): ?>
  <div class="comment-icon-box">
        <img class="comment-icon">
        <?php if($staffimage = ($staffmember->staffimage()): ?>
          <img src="<?php echo $staffimage->url() ?>" />
        <?php endif ?>
 </img>
 </div>

```

Thanks!

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [February 4, 2016, 7:00am UTC](https://forum.getkirby.com/t/selecting-images-in-admin-panel/749/9 "2016-02-04T07:00:52Z")

</div>

Two things: if you use `yaml()` you cannot use the chaining syntax, but need to get an individual member by its key in square brackets (the yaml() method create an array).

```php
$staffmember['staffimage']

```

Secondly, $staffimage is just a string, so you have to fetch the file first:

```auto
<?php foreach($page->staffmember()->yaml() as $staffmember): ?>
  <div class="comment-icon-box">
    <?php if($staffimage = $staffmember['staffimage']): ?>
      <img src="<?php echo $page->image($staffimage)->url() ?>" />
    <?php endif ?>
 </div>
<?php endforeach ?>

```

You can, of course, also use the `toStructure()` method and then use the chaining method to get individual members of the collection:

```auto
<?php foreach($page->staffmember()->toStructure() as $staffmember): ?>
  <div class="comment-icon-box">
    <?php if($staffimage = $staffmember->staffimage()): ?>
      <img src="<?php echo $page->image($staffimage)->url() ?>" />
    <?php endif ?>
 </div>
<?php endforeach ?>

```

I also removed the superfluous `img` tags and added a missing `endforeach` etc. Pls. turn on debugging in your config file to get an error message if your code is not correct.

```php
c::set('debug', true);

```

BTW, pls use three backticks before and after a code block to properly indent your code. I have corrected your example above, so you can go into edit mode to check out how that works.

---

<div class="post-metadata">

**Author:** ![aftereffectsmagic](https://avatars.discourse-cdn.com/v4/letter/a/a183cd/32.png) [@aftereffectsmagic](https://forum.getkirby.com/u/aftereffectsmagic)\
**Post date:** [February 4, 2016, 6:41pm UTC](https://forum.getkirby.com/t/selecting-images-in-admin-panel/749/10 "2016-02-04T18:41:07Z")

</div>

Thanks for the pointers, @texnixe! Everything works as it should now- I’ve corrected all of my errors. Thanks for the speedy help!

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 5:00pm UTC](https://forum.getkirby.com/t/selecting-images-in-admin-panel/749/11 "2025-02-06T17:00:18Z")

</div>