# Select Image from Site and Page

**URL:** <https://forum.getkirby.com/t/select-image-from-site-and-page/5811>\
**Category:** Questions\
**Tags:** v2\
**Created:** [November 21, 2016, 4:16pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811 "2016-11-21T16:16:11Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![mxst](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mxst/32/12448_2.png) [@mxst](https://forum.getkirby.com/u/mxst)\
**Post date:** [November 21, 2016, 4:16pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/1 "2016-11-21T16:16:11Z")

</div>

I have a set of images that get used a lot on my site. So instead of saving them in every folder again I would love an image select field that combine images from the current page and the site folder.

I looked at the image field and did not see an option for that and in docs for select I don’t see how to build the query

If there is a fieldtype already I did not find it (yet)

Thanks in advance 🙂

---

<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:** [November 21, 2016, 4:18pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/2 "2016-11-21T16:18:52Z")

</div>

That’s not possible out of the box, but you can create your own custom select field.

---

<div class="post-metadata">

**Author:** ![mxst](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mxst/32/12448_2.png) [@mxst](https://forum.getkirby.com/u/mxst)\
**Post date:** [November 21, 2016, 4:22pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/3 "2016-11-21T16:22:14Z")

</div>

I was kind of hoping someone already did that 😇

---

<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:** [November 21, 2016, 4:28pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/4 "2016-11-21T16:28:13Z")

</div>

If you don’t want to create a field, maybe the field-toggle field can be an alternative:

> **[medienbaecker/kirby-fieldtoggle](https://github.com/medienbaecker/kirby-fieldtoggle)**
>
> kirby-fieldtoggle - This field lets panel users toggle the visibility of other fields

Choose whether you want to select a page or site image, and then show the corresponding select field.

---

<div class="post-metadata">

**Author:** ![mxst](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mxst/32/12448_2.png) [@mxst](https://forum.getkirby.com/u/mxst)\
**Post date:** [November 21, 2016, 4:39pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/5 "2016-11-21T16:39:58Z")

</div>

so a new field plugin would be very simple. I only need to access the Site images. The [Docs](https://getkirby.com/docs/developer-guide/panel/fields#accessing-data-of-the-current-page) only tell how to access the current page tho …

---

<div class="post-metadata">

**Author:** ![thguenther](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/thguenther/32/16708_2.png) [@thguenther](https://forum.getkirby.com/u/thguenther)\
**Post date:** [November 21, 2016, 5:15pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/6 "2016-11-21T17:15:15Z")

</div>

You only want to list the images of the site? Simply use the `select` field like this:

```auto
image:
  type: select
  options: query
  query:
    page: /
    fetch: images

```

If you want the option to list either the site or the page images you can use the `fieldtoggle` field like texnixe suggested:

![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/a/ae4e873ea9f901cf7d9bac78478ce95ddbf27c9a.gif)

This looks like that in the backend:

```auto
imagetoggle:
  label: Image location
  type: fieldtoggle
  options:
    site: "Site"
    page: "Page"
  show:
    site: siteimage
    page: pageimage
  hide:
    site: pageimage
    page: siteimage
siteimage:
  label: Image
  type: select
  options: query
  query:
    page: /
    fetch: images
pageimage:
  label: Image
  type: select
  options: images

```

---

<div class="post-metadata">

**Author:** ![mxst](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mxst/32/12448_2.png) [@mxst](https://forum.getkirby.com/u/mxst)\
**Post date:** [November 22, 2016, 9:48pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/7 "2016-11-22T21:48:12Z")

</div>

> [@thguenther](#):
>
> ```auto
> siteimage:
> label: Image
> type: select
> options: query
> query:
> page: /
> fetch: images
> 
> ```

somehow does not fetch site images ☹

I have a `.png` and two `.jpg` and the selector gives me two empty entries …

---

<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:** [November 22, 2016, 10:03pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/8 "2016-11-22T22:03:19Z")

</div>

Please add the `value` and `text` options to make the files “visible”:

```auto
  siteimage:
    label: Image
    type: select
    options: query
    query:
      page: /
      fetch: images
      text: '{{filename}}'
      value: '{{filename}}'

```

---

<div class="post-metadata">

**Author:** ![mxst](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mxst/32/12448_2.png) [@mxst](https://forum.getkirby.com/u/mxst)\
**Post date:** [November 22, 2016, 10:09pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/9 "2016-11-22T22:09:01Z")

</div>

that did the trick 🙂

maybe you could add that snippet to the docs ?

---

<div class="post-metadata">

**Author:** ![Luke](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/luke/32/3083_2.png) [@Luke](https://forum.getkirby.com/u/Luke)\
**Post date:** [June 12, 2018, 6:17pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/10 "2018-06-12T18:17:08Z")

</div>

Sorry to drudge up an old topic, but seeing as this was a relevant search result in my own googling, I thought this may be of value to someone.

On every image select, I wanted to see all images in the site, and all images in the page (and I didn’t want to lose the image preview of selected image in panel). So I…

1. copied the original field at panel/app/fields/image to site/fields/images
2. renamed all the files from image.\* to images.\*
3. change the class name in site/fields/images/images.php from ImageField to ImagesField.
4. change the options function in site/fields/images/images.php to…

> ```
> public function options() {
> $options = [];
> $site = panel()->site();
> foreach($site->images() as $image) {
> $options[$image->filename()] = $image;
> }
> foreach($this->images() as $image) {
> $options[$image->filename()] = $image;
> }
> return $options;
> }
> 
> ```

1. Then in the blueprint, I changed “type: image” to “type: images”.

If a file exists in both, it should be overwritten by the page version in the list.

---

<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:** [June 12, 2018, 6:54pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/11 "2018-06-12T18:54:41Z")

</div>

How do you fetch your images in your template if you only store the filename?

---

<div class="post-metadata">

**Author:** ![Luke](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/luke/32/3083_2.png) [@Luke](https://forum.getkirby.com/u/Luke)\
**Post date:** [June 12, 2018, 6:56pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/12 "2018-06-12T18:56:44Z")

</div>

I ended up using this. Perhaps it’s not ideal. Would be better to work the check into the function itself or store the url itself as the value perhaps.

```
if($image = $page->background()->toFile() ? $page->background()->toFile() : $site->image($page->background()->toString())){
	$background_style = 'style="background-image: url(\'' . $image->url() . '\')"';
}
```

---

<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:** [June 12, 2018, 7:08pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/13 "2018-06-12T19:08:32Z")

</div>

I think you are probably better off with storing the URI.

---

<div class="post-metadata">

**Author:** ![Luke](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/luke/32/3083_2.png) [@Luke](https://forum.getkirby.com/u/Luke)\
**Post date:** [June 12, 2018, 7:42pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/14 "2018-06-12T19:42:33Z")

</div>

$image-\>uri was returning the url without “content/” in it. I suppose that’s fine if you want to append content to it manually, but I preferred to use URL so I don’t have to tamper with the resulting value. Perhaps I was doing something incorrectly?

```
	public function options() {
	  $options = [];
	  $site = panel()->site();
	  foreach($site->images() as $image) {
	    $options[$image->url()] = $image;
	  }
	  foreach($this->images() as $image) {
	    $options[$image->url()] = $image;
	  }
	  return $options;
	}

```

To use in template:

```
$background_style = ($image_url = $page->background()->toString() !== '' ? $page->background()->toString() : NULL) ? 'style="background-image: url(\'' . $image_url . '\')"' : '';

```

The only thing I don’t like it about this, is that now the options on the $page level don’t overwrite the options on the $site level. That seemed like a nice graceful override that I could appreciate. If one were to use generic names like “hero.jpg” then it would always show a “hero.jpg” in the list, but if a page doesn’t have one, it will inherit it from $site default “hero.jpg”. But the list doesn’t become cluttered with duplicate file names.

---

<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:27pm UTC](https://forum.getkirby.com/t/select-image-from-site-and-page/5811/15 "2025-02-06T17:27:57Z")

</div>