Selecting images in admin panel

Kirby 2 Solved ✅
1

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.

2

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:

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

3

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?

4

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:

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

or

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

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

(image: filename.jpg)

and then render this in your template

<?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.

5

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)…

6

You need to echo the url of the image:

<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

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

and then in the template:

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

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!

8

@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):

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

Template:

<?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!

9

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).

$staffmember['staffimage']

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

<?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:

<?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.

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.

10

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