list and detail pages - repeats on detail page

I have been following this: How do I create list and detail pages in Perch? https://solutions.grabaperch.com/architecture/how-do-i-create-list-detail-pages

My pages are fairly different but follow the same principle.

My list page is working fine.

My detail pages are showing multiple detail pictures, which are separated by my 'project-header'.

So if I have 3 projects on my list page, and each project has 3 pictures each, I see 9 pictures on each detail page, separated by 'project-header'

Hi Daniel, the problem might be caused because you've closed the repeater just before the <perch:after> tags, I think the repeater should be closed after those tags. Like this:

<div class="project-header project-header-m">

    <div class="project-title-d project-title-m">
        <p><perch:content id="type" type="text" label="Type of project" textile="true" /></p>
    </div>

    <div class="project-location-d project-location-m">
        <p><perch:content id="location" type="text" label="Location of project" textile="true" /></p>
    </div>

    <perch:content id="slug" for="title" type="slug" suppress="true" />

    <div class="project-describe-d project-describe-m">
        <p><perch:content id="describe" type="textarea" label="Describe project" textile="true" editor="markitup" /></p>
    </div>

    <h3><perch:content id="project-name-location" type="text" label="Project Type, Location" required="true" help="Example: New Build, Lincoln (seen on list page, repeat as above)" title="true" suppress="true"/>
    </h3>
</div><!-- project header -->

<section id="griff-project-content">
    <perch:content id="slug" for="title" type="slug" suppress="true" />

    <perch:repeater id="images" label="Images" max="10">
        <perch:before>
            <ul>
        </perch:before>
        <div class="project-pic-d project-pic-t project-pic-m">
            <li>
                <img src="<perch:content type="image" id="image" label="Image" width="980" height="600" crop="true"/>" class="fullimg" alt="<perch:content type="text" id="alt" label="Description" />"
            </li>
        </div>

        <perch:after>
            </ul>
        </perch:after>
    </perch:repeater>
</section><!-- /project-content -->

I think that might fix it.

Thanks very much simon, but after doing what you suggest it's still the same...

If I have 3 images on the list page and click on number 1 2 or 3 I get them all on one page. With them always listed 1 2 and 3 and with my 'project-header' separating them.

I think perhaps we need to look at the slug then.

At the moment the slug is configured to make a slug from the item with the ID 'title', but there's no item with that ID. I think the item you're intending to make as the slug is: 'project-name-location', in which case you would use <perch:content id="slug" for="title" type="slug" suppress="true" />

However, having hyphens in an ID may cause problems. So I would change <perch:content id="project-name-location" to <perch:content id="project_name_location"

and change the slug in both your listing and detail template to id="slug" for="title" type="slug"

You'll need to edit and save your 3 items again to adding the Project title, because we've changed the ID. After saving, the links should work.

Thanks Simon, I have replaced the underscores and tried with no change.

I didn't change the slug as, to be honest I'm not sure what its doing for me...

in the listings page I currently have this: <a href="?s=<perch:content id="slug" type="slug" />">

is that ok?

And these two on the detail page:

<perch:content id="slug" for="title" type="slug" suppress="true" />

<perch:content id="slug" for="title" type="slug" suppress="true" />

Are you saying I should be moving them or changing them?

Hi, they should be changed to:

<perch:content id="slug" for="project_name_location" type="slug" suppress="true" />

Sorted!

Can't thank you enough Simon - thanks very much

That's great to hear :)