PHPackages                             toutouwai/inputfield-select-images - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. toutouwai/inputfield-select-images

ActivePw-module[Utility & Helpers](/categories/utility)

toutouwai/inputfield-select-images
==================================

A ProcessWire inputfield that allows the visual selection and sorting of images, intended for use with FieldtypeDynamicOptions.

0.2.5(2y ago)7121MPL-2.0PHPPHP >=5.4

Since Jan 22Pushed 1y ago3 watchersCompare

[ Source](https://github.com/Toutouwai/InputfieldSelectImages)[ Packagist](https://packagist.org/packages/toutouwai/inputfield-select-images)[ Docs](https://github.com/Toutouwai/InputfieldSelectImages)[ RSS](/packages/toutouwai-inputfield-select-images/feed)WikiDiscussions master Synced 2d ago

READMEChangelogDependencies (2)Versions (2)Used By (0)

Select Images
=============

[](#select-images)

A module for ProcessWire CMS/CMF. An inputfield that allows the visual selection and sorting of images, intended for use with the [FieldtypeDynamicOptions](https://github.com/Toutouwai/FieldtypeDynamicOptions) module. Together these modules can be used to create a kind of "[image reference](https://github.com/processwire/processwire-requests/issues/207)" field.

[![select-images](https://user-images.githubusercontent.com/1538852/115172433-6115b900-a119-11eb-8272-9363cc5f30ab.gif)](https://user-images.githubusercontent.com/1538852/115172433-6115b900-a119-11eb-8272-9363cc5f30ab.gif)

Integration with FieldtypeDynamicOptions
----------------------------------------

[](#integration-with-fieldtypedynamicoptions)

InputfieldSelectImages was developed to be used together with [FieldtypeDynamicOptions](https://github.com/Toutouwai/FieldtypeDynamicOptions) (v0.1.3 or newer):

1. Create a Dynamic Options field.
2. Choose "Select Images" as the "Inputfield type". Select Images appears in the "Multiple item selection" category but you can set "Maximum number of items" to 1 if you want to use Select Images for single image selections.
3. Define selectable options for the field via a `FieldtypeDynamicOptions::getSelectableOptions` hook. See some examples below.

FieldtypeDynamicOptions is recommended but is not a strict requirement for installing InputfieldSelectImages in case you want to use an alternative way to store the field data.

### Selection of Pageimages

[](#selection-of-pageimages)

In this example the field allows selection of Pageimages that are in the "images" field of the home page.

The field will store URLs to the Pageimages so it works as a kind of "image reference" field. You can use the "Format as Pagefile/Pageimage object(s)" option for the Dynamic Options field to have the formatted value of the field be automatically converted from the stored Pageimage URLs to Pageimage objects.

```
$wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) {
    // The page being edited
    $page = $event->arguments(0);
    // The Dynamic Options field
    $field = $event->arguments(1);

    // For a field named "select_images"
    if($field->name === 'select_images') {
        $options = [];
        // Get Pageimages within the "images" field on the home page
        foreach($event->wire()->pages(1)->images as $image) {
            // Add an option for each Pageimage
            // When the key is a Pageimage URL the inputfield will automatically create a thumbnail
            // In this example the label includes the basename and the filesize
            /** @var Pageimage $image */
            $options[$image->url] = "{$image->basename}{$image->filesizeStr}";
        }
        $event->return = $options;
    }
});
```

### Selection of image files not associated with a Page

[](#selection-of-image-files-not-associated-with-a-page)

When not working with Pageimages you must add a "data-thumb" attribute for each selectable option which contains a URL to a thumbnail/image.

In this example the field allows selection of image files in a "/pics/" folder which is in the site root.

```
$wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) {
    // The page being edited
    $page = $event->arguments(0);
    // The Dynamic Options field
    $field = $event->arguments(1);

    // For a field named "select_images"
    if($field->name === 'select_images') {
        $options = [];
        // Get files that are in the /pics/ folder
        $root = $event->wire()->config->paths->root;
        $path = $root . 'pics/';
        $files = $event->wire()->files->find($path);
        // Add an option for each file
        foreach($files as $file) {
            $basename = str_replace($path, '', $file);
            $url = str_replace($root, '/', $file);
            // The value must be an array with the following structure...
            $options[$url] = [
                // The label for the image
                'label' => $basename,
                'attributes' => [
                    // An image URL in the "data-thumb" attribute
                    'data-thumb' => $url,
                ],
            ];
        }
        $event->return = $options;
    }
});
```

### The field values don't have to be image URLs

[](#the-field-values-dont-have-to-be-image-urls)

The values stored by the Dynamic Options field don't have to be image URLs. For example, you could use the images to represent different layout options for a page, or to represent widgets that will be inserted on the page.

Also, you can use external URLs for the thumbnails. In the example below the options "calm" and "crazy" are represented by thumbnails from [placecage.com](https://www.placecage.com/).

```
$wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) {
    // The page being edited
    $page = $event->arguments(0);
    // The Dynamic Options field
    $field = $event->arguments(1);

    // For a field named "calm_or_crazy"
    if($field->name === 'calm_or_crazy') {
        $options = [];
        // Add options that are illustrated with thumbnails from placecage.com
        $options['calm'] = [
            // The label for the option
            'label' => 'Nicolas Cage is a calm man',
            'attributes' => [
                // An image URL in the "data-thumb" attribute
                'data-thumb' => 'https://www.placecage.com/260/260',
            ]
        ];
        $options['crazy'] = [
            // The label for the option
            'label' => 'Nicolas Cage is a crazy man',
            'attributes' => [
                // An image URL in the "data-thumb" attribute
                'data-thumb' => 'https://www.placecage.com/c/260/260',
            ]
        ];
        $event->return = $options;
    }
});
```

Field configuration
-------------------

[](#field-configuration)

If the inputfield values are Pageimage URLs then you can optionally include a button for each selected image to open the containing page for editing in a modal window. Note that if the selected image is contained in a Repeater item then it is the Repeater page that will be opened for editing.

You can define labels for the button, notices, etc, that are used within the inputfield if the defaults don't suit.

[![labels](https://user-images.githubusercontent.com/1538852/126757906-76c4552d-7165-4e4f-aa8e-a3c64f5d274f.png)](https://user-images.githubusercontent.com/1538852/126757906-76c4552d-7165-4e4f-aa8e-a3c64f5d274f.png)

###  Health Score

20

—

LowBetter than 13% of packages

Maintenance27

Infrequent updates — may be unmaintained

Popularity12

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity27

Early-stage or recently created project

 Bus Factor1

Top contributor holds 95% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

894d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/1538852?v=4)[Robin Sallis](/maintainers/Toutouwai)[@Toutouwai](https://github.com/Toutouwai)

---

Top Contributors

[![Toutouwai](https://avatars.githubusercontent.com/u/1538852?v=4)](https://github.com/Toutouwai "Toutouwai (19 commits)")[![daun](https://avatars.githubusercontent.com/u/22225348?v=4)](https://github.com/daun "daun (1 commits)")

---

Tags

processwiremodule

### Embed Badge

![Health badge](/badges/toutouwai-inputfield-select-images/health.svg)

```
[![Health](https://phpackages.com/badges/toutouwai-inputfield-select-images/health.svg)](https://phpackages.com/packages/toutouwai-inputfield-select-images)
```

###  Alternatives

[adrianbj/tracy-debugger

The ultimate debugging and development tool for ProcessWire.

935.6k](/packages/adrianbj-tracy-debugger)[teppokoivula/search-engine

SearchEngine is a ProcessWire CMS/CMF module for indexing and searching site contents.

181.4k2](/packages/teppokoivula-search-engine)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)