Forum

Thread tagged as: Question, Docs

Repeatable Chunks (HTML)

Hello,

I'm hoping you can help me. I've just purchased Perch CMS and have it installed and ready to use on my server.

I have no experience of Perch but have heard great things about it and decided to give it a go - I'm looking for a new CMS that I can use on all my sites in place of ExpressionEngine, which I have used for over five years.

I have worked out how to create simple editable regions, this works fine but how would I use Perch to create repeatable sections on a page, for example I have a services page where by each entry (or text block) that I submit would need to be wrapped around some markup, for arguments sake …

<div class="services">

<h2>Service Treatment Title</h2>
<p>Sometimes your everyday makeup simple won’t cut it, especially when you need your look to be long lasting, luxurious and camera ready.  So, whether you have a Day at the Races, Engagement, Wedding, Birthday or Anniversary celebration on the horizon, reveal your most beautiful, confident self with our Red Carpet service.</p>

<hr class="services-rule">
</div>

I'm guessing I need to break out of the 'channel entry' habits of ExpressionEngine

I have looked at the videos but couldn't find anywhere to do this.

Any help or guidance would be appreciated.

Thanks Scott

Scott Harrington

Scott Harrington 0 points

  • 6 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

Setting a Region to repeat is covered in this video: https://docs.grabaperch.com/video/v/multiple-item-regions/

For smaller items you could use a perch:repeater template tag.

If you go to the docs and search for "repeat" you'll find lots of information https://docs.grabaperch.com/search/?q=repeat

Hello and thanks for this. However, it's actually getting this to output on the front-end that I just cant get to work :/

I think that the settings are correct in Perch itself, see below:

https://www.flawless-mua.co.uk/assets/dev/example_1.png

https://www.flawless-mua.co.uk/assets/dev/example_2.png

I have the call for Perch at the top of the page - <?php include('perch/runtime.php');?>

But I just cant get them to output on the front-end how I would want to and repeating as many times as needed:

Looking at example 1 of the images, I want each individual entry to be out output as below:

<div class="services">

<h2 class="text-center"> *** Header from the text area or an entry here *** </h2>

<p class="text-center"> *** Paragraph from the text area of an entry here *** </p>

<hr class="services-rule">

</div>

I'm really sorry if I'm missing the obvious here but I just cant get this working ... any help would be appreciated.

Rachel Andrew

Rachel Andrew 394 points
Perch Support

Have you set the region to display multiple items as shown in the video?

I have yes. I just cant get it to output on the front-end ... can you give me an idea of the markup I need to add to my HTML template? If I add <?php perch_content('Services'); ?> it outputs the content individually as required but as unstyled HTML ... what I need is for each entry to have the above markup wrapped around it.

I have tried the example tags in the docs but none work :/

Rachel Andrew

Rachel Andrew 394 points
Perch Support

So you need to create a Perch template if you want specific markup. Have you done that?

https://docs.grabaperch.com/video/v/creating-a-perch-template/

Hi, I'm still struggling with this and couldn't see where the most recent example could output what we want...

We would like the individual regions in this example: https://www.flawless-mua.co.uk/regions_perch.jpg

To output something in HTML like this: https://www.flawless-mua.co.uk/regions_html.jpg

I cant seem to find anything in the docs or any working example that we can pick apart for this.

Any help here would be much appreciated.

Thanks

Drew McLellan

Drew McLellan 2638 points
Perch Support

That's certainly what should be happening.

Can you show me:

  1. The template you're using for the region

  2. How you're outputting the region on your page

Hi Drew, thanks for getting back to me. The problem I'm having is that I cant find the examples / docs for outputting these regions in my HTML template :/

Drew McLellan

Drew McLellan 2638 points
Perch Support

So based on this:

<div class="services">

<h2 class="text-center"> *** Header from the text area or an entry here *** </h2>

<p class="text-center"> *** Paragraph from the text area of an entry here *** </p>

<hr class="services-rule">

</div>

Your template would be something like:

<div class="services">

<h2 class="text-center"><perch:content id="header" label="Header" type="text" required="true" /></h2>

<p class="text-center"><perch:content id="desc" label="Description" type="textarea" size="m" required="true" /></p>

<hr class="services-rule">

</div>

You'd create a region in your page:

<?php perch_content('Services'); ?>

When you load the page in a browser, the region will be created and appear in the Perch control panel, flagged as NEW.

Click through to the region and pick your new template as the one to use, and select to allow multiple items.

Then just add your content and save it.

Ah, I wasn't far off. I hadn't included the required "true" or the size ... Added that and also followed the instructions for saving and it all appeared. Thanks a lot :)

Drew McLellan

Drew McLellan 2638 points
Perch Support

Those are both optional, just seemed to make sense for this case.

As long as you're on the right track..!