Skip to main 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 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

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

In this section: