# How to Enable Integrated Image Search for PageBuilder Editor

Source: https://dev.arcxp.com/pagebuilder-engine/how-to-guides/components-and-content/how-to-enable-integrated-image-search-for-pagebuilder-editor/

There are times when an editor would like to curate a story to replace the default photo with another image. A common way to enable this functionality is to create a custom field that allows the editor to enter a new URL and add logic to the component that displays the overriden image when the custom field is set. However, it can be burdensome to search Photo Center and then copy/paste the URL back into the custom field.

A convenient way to integrate the search with Photo Center is to use the [SearchableField](https://dev.arcxp.com/pagebuilder-engine/developer-docs/consumer-api/) hook. This hook can be applied to image elements to tell the PageBuilder Editor that users should be able to search Photo Center for a replacement image.

## Creating a searchable image

The Photo Center search functionality is enabled whenever an image element uses the `searchableField` hook to override custom field values. Let’s first define a sample component that uses `searchableField`.

The image’s parent element must include a style of `position: relative` for proper button placement in the Editor UI.

The Feature might look like this:

/components/features/global/searchable\_image.jsx

```js
import React, { Component } from 'react'
import Consumer from 'fusion:consumer'

@Consumer
class SearchableImage extends Component {
  ...

  render() {
    // This `content` would come from a content fetch performed elsewhere in this component
    const { content } = this.state

    // Apply searchableField hook to the image element to enable Photo Center search
    const { searchableField } = this.props

    const imageURL = arcImageFormat({
      resizerURL: this.resizerURL,
      width: 275,
      height: 200,
      src: this.props.customFields.imageOverrideUrl || get(content, 'promo_items.basic.url'),
    })

    return (
      <div className="story__card">
        <div style={{ position: 'relative' }}>
          <img src={imageURL}
            {...searchableField({
                'imageOverrideUrl': 'additional_properties.resizeUrl',
                'imageOverrideAltText': 'subtitle'
              })
            }
            alt={get(content, 'promo_items.basic.subtitle')}
          />
        </div>
        <div className="story__content">
            <h2 className="story__headline">{get(content, 'headlines.basic')}</h2>
            <p className="story__description">{get(content, 'description.basic')}</p>
        </div>
      </div>
    )
  }
}

export default SearchableImage
```

This feature applies the `searchableField` hook to the `img` component, which allows the PageBuilder Editor to replace the desired custom fields with the content provided by the [Photo Center API](https://dev.arcxp.com/api/content-administration/photo-api/). The input to the `searchableField` hook is an Object that contains a mapping of custom fields to the desired values from Photo Center. In this example, when an image is selected, the `imageOverrideUrl` custom field will be replaced with the value of `additional_properties.resizeUrl` and the `imageOverrideAltText` custom field will be replaced with `subtitle` from the Photo Center API response.