Forum

Thread tagged as: Question, Problem

Events repeating region and custom perch content on home page

Hello

I am trying to create an events page which has a date, title of activity and description. For then information put on the events page the date and activity. is displayed in a slider on the home page. I am having issues with the placement of the items on the events page and the date and activity was being displayed on the home page but has now stopped displaying.

the template used for the events page is as follows:

<perch:repeater id="club_events" label="Events" max="14"> 
        <perch:before><br /></perch:before>

                    <div class="posdate"><perch:content id="heading" type="date" label="Day Date Month" format="%d %B %Y" required="true" /></div>

                    <div class="spacer1"><perch:content id="activity" type="text" label="Activity" textile="true" editor="markitup" required="true" /></div>

                    <div class="spacer"><perch:content id="discription" type="text" label="Discription" textile="true" editor="markitup" required="true" /></div>
        <br />
        <br />
        <perch:after></perch:after>


</perch:repeater>

the css for the 3 sections are as follows:

.posdate {  width: 175px; margin-top:5px; font-size:14pt; font-weight:700; height: 100px; float: left; display: block; }
.spacer1 { margin-left: 10px; margin-top:5px; font-size:14pt; font-weight:700; width: 200x; height: 100px; float: left; display: block;}
.spacer {  margin-left: 10px; margin-top: 5px; width: 420px; height: 100px; float: right; font-size: 12pt; display: block;}

To get the the date and activity on the slider on the home page I am using the following code:

<?php
            $opts = array(
            'page'=>'/activelifestyles.org.uk/events.php',
            'template'=>'_events_list.html',
            'sort'=>'heading',
            'sort-order'=>'ASC',
            'count'=>8
            );
            perch_content_custom('events', $opts);
            ?>

The _events_list.html is:

<perch:if exists="heading">
<div class="eventshome">
<br />
<p class="date"><perch:content id="heading" type="date" label="Day Date Month" format="%d %B %Y" required="true" /></p>
<perch:content id="activity" type="text" label="Activity" textile="true" editor="markitup" required="true" /><br />
</div>
</perch:if>

The link to the events page to see the problem with the layout is: https://176.32.230.9/activelifestyles.org.uk/events.php

I would be grateful if you could help to see what the issue could be.

Many Thanks,

Paul

Paul Quillin-Creamer

Paul Quillin-Creamer 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

It looks like there's some problems with your page if you validate it:

https://validator.w3.org/check?uri=http%3A%2F%2F176.32.230.9%2Factivelifestyles.org.uk%2Fevents.php&charset=%28detect+automatically%29&doctype=Inline&group=0

so the first step is to check your markup.

Hello Drew

I put the Closing ?> the the percch code. and removed the code below

<include(PERCH_PATH.'/core/apps/perch_events/runtime.php');?>

It seems to have sorted out the placement of the text to the main body part of the page but is there a way to get the Rows to space out they are not under each other.

Also can you see an error in the perch coding that makes the date and activity to be displayed as it is not doing so.

Paul

Rachel Andrew

Rachel Andrew 394 points
Perch Support

The validator isn't looking at Perch Code - that is parsed before getting to the browser - but your markup, you need to make sure your HTML is correct.

That's the first step.

Hello Rachel or Drew

I am at a loss. The page validates with W3C.

The page title shows and the region, I click on the page title and then the region select the events.html template check the allow multiple items and then click submit. All I get is a grey bar with +add another.

The template code is:

<perch:repeater id="date_act_dis" label="Events" max="15"> 
        <perch:before><p> </p></perch:before>

                    <div class="posdate"><perch:content id="heading" type="date" label="Day Date Month" format="%d %B %Y" required="true" /></div>

                    <div class="spacer1"><perch:content id="activity" type="text" label="Activity" textile="true" editor="markitup" required="true" /></div>

                    <div class="spacer"><perch:content id="discription" type="textarea" label="Discription" textile="true" editor="markitup" required="false" /></div>

        <perch:after><p> </p></perch:after>
        <br />
        <br />

</perch:repeater>

I would be very grateful if you could help.

Kindest regards,

Paul

Drew McLellan

Drew McLellan 2638 points
Perch Support

What's the difference between the markup you're getting and the markup you need?

We can help with template code, but you'll need to figure the CSS out yourself.

Hello Drew

When I click on the region in the admin It flashes the fields to be filled in then I see the grey bar with + add another.

I would like when I click on the region the template to display a date input selector with a text field underneath for the activity and a text area underneath that to be display the description of the activity.

The css is already working I believe. It just the template is is not creating the fields to be filed in

Thanks,

Paul

Drew McLellan

Drew McLellan 2638 points
Perch Support

What do you mean by flashes? Which browser are you using?

Hi

The screen flashes the template fields for the CMS for less than half a second then the grey bar with + add another appears.

Paul

Drew McLellan

Drew McLellan 2638 points
Perch Support

What happens when you try to use it?

Hello

I replied twice but the reply is not here?

Here we go for the third time.

I click on the '+add another the three field from the template appear. Fill them in but when they appear on the events page the first two div's floated left that is the date and activity appear as they should the third div floated right (description) is turned into a paragraph and offset the page. The more items added the worse the page gets.

Paul

Drew McLellan

Drew McLellan 2638 points
Perch Support

We've just been moving servers, and there've been a couple of small glitches - hopefully all fixed now. Everything should feel much faster.

It sounds like the repeater is working correctly, but your page isn't laying out correctly. Is that the case? If so, what does the HTML look like when that happens?

Hi

The template looks like this:

<perch:repeater id="date_act_dis" label="Events" max="15"> 
        <perch:before></perch:before>

                    <div class="posdate"><perch:content id="heading" type="date" label="Day Date Month" format="%d %B %Y" required="true" /></div>

                    <div class="spacer1"><perch:content id="activity" type="text" label="Activity" textile="true" editor="markitup" required="true" /></div>

                    <div class="spacer"><perch:content id="discription" type="textarea" label="Discription" editor="markitup" required="false" /></div>

        <perch:after></perch:after>
        <br />
        <br />
</perch:repeater>

The HTM on the page is:

<div class="posdate">16 July 2015</div>

                    <div class="spacer1">TBD</div>

                    <div class="spacer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor arcu eget tortor tincidunt, ut faucibus nisl sodales. Curabitur mattis mollis facilisis. Donec risus mi.</div>


        <br />
        <br />

The HTML is not putting the two ~~~ <br /> ~~~ on the page from the template.

I would like to thank you for your help so far.

Paul

Hi

Do you think I should enclose the template code in a div and set the height for that div to 120px and remove the height in the class spacer?

paul

Drew McLellan

Drew McLellan 2638 points
Perch Support

Do you intend these to go after the last item?

<br />
<br />

If so they need to be in the <perch:after></perch:after> section which is currently empty and redundant.

Hi

I put them in the redundant <perch:after></perch:after> It has moved the next date and activity next to the first date and activity.

https://176.32.230.9/activelifestyles.org.uk/events.php

Paul

Drew McLellan

Drew McLellan 2638 points
Perch Support

Do you have a static working copy of this page? What markup does it have?

It seems like you're trying to figure out your layout, HTML and template code all at once.

Hi

I am not sure what you mean by a working copy the mark up is as follows.

All I want is perch to produce the following

16 July 2015                       TBD                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

20 July 2015                       TBD                         Lorem ipsum dolor sit amet, consectetur adipiscing elit.

and so on for 14 events

The perch template is as follows:

<perch:repeater id="date_act_dis" label="Events" max="15"> 
        <perch:before></perch:before>

                    <div class="posdate"><perch:content id="heading" type="date" label="Day Date Month" format="%d %B %Y" required="true" /></div>

                    <div class="spacer1"><perch:content id="activity" type="text" label="Activity" textile="true" editor="markitup" required="true" /></div>

                    <div class="spacer"><perch:content id="discription" type="textarea" label="Discription" editor="markitup" required="false" /></div>

        <perch:after><br /><br /></perch:after>

</perch:repeater>

the css is:

.posdate {  width: 175px; font-size:14pt; font-weight:700; height: 100px; float: left; }
.spacer1 { padding-left: 50px; font-size:14pt; font-weight:700; width: 200x; height: 100px; float: left; }
.spacer {  padding-left: 10px; width: 320px; height: 120px; float: right; font-size: 12pt;}

dose this cast any light on why the perch template and browser display is not working?

Many Thanks,

Paul

Drew McLellan

Drew McLellan 2638 points
Perch Support

The template is working fine. The issue is with your CSS.

Why not use a table? It looks like you're trying to display a table.

<perch:repeater id="date_act_dis" label="Events" max="15"> 
    <perch:before>
        <table>     
    </perch:before>
        <tr>
            <td class="posdate">
                <perch:content id="heading" type="date" label="Day Date Month" format="%d %B %Y" required="true" />
            <td>
            <td class="spacer1">
                <perch:content id="activity" type="text" label="Activity" textile="true" editor="markitup" required="true" />
            </td>
            <td class="spacer">
                <perch:content id="discription" type="textarea" label="Discription" editor="markitup" required="false" />
            </td>
        </tr>
    <perch:after>
        </table>
    </perch:after>
</perch:repeater>

Hello Drew

Thank you for this. It worked.

All the best,

Paul