Repeaters & Pageblocks

Repeaters & Pageblock systems are increasingly becoming the basis of how we structure our websites. In this guide I will go over the basics of how to use them & edit their content.

Forewarning: All repeaters & Pageblocks are different as they are custom made for each site, this guide goes over the most common elements of them and how they work, but in most cases you will have blocks that are more specific. If you have any questions about a specfic functionality feel free to get in touch with us.

A repeater is a block within processwire that allows you to create potentially infinite content that follows the structure we have created for you. For example, in this site I am creating a set of cards with images. Each card has a title, and image, some text and the option to add a button. On the front end a card with all options filled out looks like this:

And in the back end looks like this:

As with any editable block, each field corresponds to a part of the repeater.

The difference with repeaters, is these can be moved, duplicated & re-arranged according to what you want the site layout to be. I.e. for these 'cards' i can duplicate this block by hovering over the green bar and selecting the 'copy' button.

Which allows me to paste in the block & have a duplicate.

And on the front end:

Each one of these repeater blocks can be edited, moved independently by dragging them up & down, and turned off or deleted. These options can be seen by hovering over the green bar.

Similar to repeaters, pageblocks allow you to create content for sites using pre-existing blocks we have created for you, however they offer a wider range of options on layout and design. All the editable options described with repeaters work the exact same with repeaters however with a few additions.

Firstly, pageblocks have templates of their own, allowing for different layouts of content. For example, by clicking on 'add new' on the test site we have a wide variety of options built in:

Taking the 'Single Feature' as an example, this allows us to add text with an image next to it (see front end below)

Allowing the block to change on the front end:

As previously stated, these blocks change from site to site and can have a wide variety of options - its always best to experiment with what the different options and see what they do.