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

Adding a Query Loop to a Post

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

Start Blank and Choose an Image Option

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.

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

Transform Options in the Block Toolbar

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

Demo of Transforming to Photo Block

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.

Inserting the Photo Block Manually

Conclusion

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