How to Add Photo Block to the Query Loop

Use Photo Block in a query loop for dynamic images

The Photo Block works well in the default query loop and acts as a featured image.

Let's begin by showing you how to insert a query loop and changing the image to the Photo Block.

Compatibility

The Photo Block is compatible with the query loops of the following blocks:

  • core/query

  • generateblocks/query-loop

  • kadence/query

Add the Query Loop Block to a Post

Insert the Query Loop into a post using a "/" (Slash) command: /query loop

Choose "Start Blank" and insert the option with an image.

Select the Image in the Block Editor

Select the image in the block editor. If the image is selected correctly, you'll see the block type as a featured image.

Use the Toolbar to Transform the Image to the Photo Block

Using the Toolbar, click the Transform option to convert the image to the Photo Block.

From there, you can select "Photo Block," and the featured image will be changed over.

Alternate Method: Insert the Photo Block Manually

If there is no image in the query loop, you can add one manually. You'd insert a new block and add a Photo Block. The block is smart enough to recognize it's in a query loop and will render immediately.

Conclusion

You now know how to add Photo Block to a query loop.

Last updated