LogoLogo
HomeWordPress.orgSupport
Photo Block
Photo Block
  • Introduction
    • Introduction and Overview
  • Getting Started
    • Installation
    • Finding the Plugin's Settings
    • Adding the Photo Block
    • Uploading a Photo
    • Cropping a Photo
    • Editing a Photo
    • Adding a Caption
    • Overlay Captions
    • Global Styles
  • How To's
    • How to Create a Circular Image
    • How to Rotate an Image
    • How to Add Photo Block to the Query Loop
    • How to Popup an Image in a Lightbox
    • How to Take Site Screenshots With ScreenshotOne and Photo Block
  • Useful Links
    • Photo Block Home
    • GitHub Repository
    • WordPress.org Repository
    • Support
Powered by GitBook
On this page
  • Compatibility
  • Add the Query Loop Block to a Post
  • Select the Image in the Block Editor
  • Use the Toolbar to Transform the Image to the Photo Block
  • Alternate Method: Insert the Photo Block Manually
  • Conclusion

Was this helpful?

Export as PDF
  1. How To's

How to Add Photo Block to the Query Loop

Use Photo Block in a query loop for dynamic images

PreviousHow to Rotate an ImageNextHow to Popup an Image in a Lightbox

Last updated 7 months ago

Was this helpful?

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.

Adding a Query Loop to a Post
Start Blank and Choose an Image Option
Selecting the Featured Image
Transform Options in the Block Toolbar
Demo of Transforming to Photo Block
Inserting the Photo Block Manually