Skip to main content

PageBuilder Editor: Integrated image search

A picture is worth a thousand words

rId20.gif

While curating in PageBuilder Editor, our users not only look for compelling stories but also for powerful and engaging images.

Using this integrated image search functionality, you can

  • search for images using keywords,

  • refine your search with filters,

  • preview how an image appears in your block in the context, and

  • apply the image to your block

Important

Before enabling image search functionality, ensure the image resizer is setup correctly in the block bundle for your organization. If not, there are cost and performance implications. No changes are needed if the image resizer has already been setup.

How to use the integrated image search in PageBuilder Editor?

For the blocks that are enabled for image search (read the How to enable your Blocks to use integrated image search? section below), you will see the new “Replace image” button when you hover on the image in the Editor Preview. Clicking on the “Replace image” button will take you through the integrated image search experience.

Let us go over all the options that are available to you -

Search

  • By default, the latest uploaded Photo Center images will be displayed in a single column.

  • Similar to how you would search for photos in Photo Center, use the keywords search by typing into the search box to look for relevant images. Hit enter and the search results will show any matching photos. In case of no matches, you will see a message indicating that there are no images found.

rId24.jpg

  • The search results will return up to 100 images with infinite scrolling support.

Filter

To refine your search, you can filter search results using a few available filter options.

To set filters, click on the expand panel icon on the top right of the search panel. This action will take you into an expanded search and filter view with two columns for results and a filter panel with all the currently available options - Date range, Image type and Include. As you adjust your filters, search results will be refined to match your keywords and filters. Click on the expand panel icon to return to the default search view.

Note

For this initial release, the search results will return only published images.

  • The text displayed on the four corners of the images in the Photo feed will follow the Image Metadata Configuration setup in Photo Center settings. Refer to Navigating Photo Center for more details.

rId28.jpg

Preview

Simply hover on the desired image in the photo feed to preview it on your block in the Editor Preview. If you do not like it, try hovering on a different one. Additionally, to view photo details in Photo Center, click on the pencil icon on hover.

rId31.gif

Apply / Choose

When you find the right image, just click on the image in the search results to apply it to the block. Your block in the Editor Preview will display the updated image. With this, you will exit the image search experience and will be taken back to curation.

On click of the image in the search results, the image URL i.e [object].url will be applied to the custom field setup in the block bundle. Any additional metadata such as alternate text etc. will also be updated based on how your blocks are setup. Refer to the documentation in the section below.

Updates for Themes clients

On blocks where you can update the promo image used, you can do so with the Integrated Image Search.

How to enable your Blocks to use integrated image search?

To enable search integrations in PageBuilder Editor, the Fusion Component API has been updated to included two new hooks:

  • searchableField is used to override Custom Fields using the integrated search UI

  • searchableContent is used to override Content (Local Edits) using the integrated search UI

Note

These updates are available with PageBuilder Engine 2.7 or higher.

Updates for block developers

  • Custom field level support will allow you to provide image search on multiple custom fields for a given block in case there are multiple images associated with a block.

  • In addition to the “img” tags, PageBuilder Editor also extends support on the searchableContent and searchableField props to all elements (e.g “Picture” and “Image”).

    Important

    Refer to the Arc Resizer URLs Guide to use the right values based on whether your block bundle has a resizer setup or not.

Local development for image search

Local development experience is also supported.

  • With PageBuilder Engine 2.8 Release, you can use the latest version of Engine.

  • You can update your CLI by running npm install @arc-fusion/cli@latest

Q&A

Q. What privileges do I need to use the integrated image search in PageBuilder Editor?

A: “Write” or “Write and Publish” permissions in PageBuilder Editor and default Photo Center access to search and filter photos and view the details.

Q. Can I upload images to Photo Center through this functionality?

A: No, integrated image search is only for searching images to use in PageBuilder Editor. For any other Photo Center functionality, use the full version of Photo Center.

Q. Can I use the integrated image search within feed-based blocks?

A: No, the integrated image search is currently only available for manually curated blocks with content editables.

In this section: