Forum

Thread tagged as: Question

List and detail pages using two pages.

I've read through the documentation on list and detail pages and just want to confirm I'm taking the right approach as I think I want to to take the two page option.

My list page is the index.php page in a site directory called studiolog and will consist of - a project title - a descriptive sentence about the project - a thumbnail image - a link to the full project

The index.php page will be like having a repeating region down the page showing project link after project link with text on the left and a thumbnail on the right.

My detail page is hopefully going to be project.php and consist of - a completely different layout and different information (ditch the thumbnail and descriptive sentence) - a title - text - dates - description of the project - an image gallery

Is the two page approach the best option? Or would this be easier using one page?

Do I follow the tutorial for using one page and adapt the code or can I delve right into the info provided for the two page option? It's a bit confusing, but I think I'll figure it out in the end.

list page (index.php) will look like this: List Page Link

Detail page (project.php) will look like this: Detail Page Link

Evie Milo

Evie Milo 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Either approach should work fine for this, but I'd recommend the two-page solution. It'll make things a bit simpler in some ways by isolating the two types of page.

I'll give it a go tomorrow - it's all a bit confusing at the moment. I'm sure it'll make more sense once I've built the actual pages and start working on the templates.

Just to clarify - I can have a repeatable region within the detail page - hoping to have the gallery as a repeatble region.

???

Drew McLellan

Drew McLellan 2638 points
Perch Support

You can use a repeater, yes.

I'm a bit stuck on this - can I get some help?

I posted earlier some code as I was totally stuck before I even started but I've struggled on and managed to use one page to show the list and detail pages but it's got a few glitches that need ironing out. So I've overwritted my earlier post with this new query...

  1. The Intro H1 and paragraph are appearing on both the list page and the detail page Is this only fixable if I use the two page approach? Or can I fix this another way and stick with this one page approach?

  2. My main-page-thumbnail doesn't appear on the live page I am able to load my main-page-thumbnail - i.e. the thumbnail that I want on my list page - in the back end and it shows up there within the CMS but when I refresh the live page it doesn't show up. I check the source code and there's just a blank space - I'm stumped with this one.

  3. My gallery images are showing up twice I've used an <perch:every count="3"> <perch:else /> option for my gallery images as I want three in a row and I'd like it to apply class="last" to the third in the row. This code has worked before on other sites I've done, but I've never used this within a repeater, so I'm guessing that there must be another way of doing it within a repeater. Or maybe it's not possible. If I upload one image to the page, two images appear on the live page and if I look at the source code the first image has the class of last applied and the second one doesn't - so it's ignoring my "every count 3" code and just duplicating the image.

What's the fix?

Here is my page code: studiolog.php

<div class="right">
    <?php perch_content('Studio Log Intro'); ?>

        <?php

             perch_content_create('Projects', array(
                 'template'  => 'ht_studiolog_project_detail.html',
                 'multiple'  => true,
                 'edit-mode' => 'listdetail',
             ));


             if (perch_get('s')) {

                 // Detail mode
                perch_content_custom('Projects', array(
                         'template' => 'ht_studiolog_project_detail.html',
                         'filter'   => 'slug',
                         'match'    => 'eq',
                         'value'    => perch_get('s'),
                         'count'    => 1,
                 )); 

             } else {

                 // List mode
                perch_content_custom('Projects', array(
                         'template' => 'ht_studiolog_project_list.html',
                 )); 
             }

        ?>
</div><!-- END right -->

Here is my list page template: ht_studiolog_project_list.html

<div class="projectbox">
    <div class="left">
        <h3><perch:content id="title" type="text" /></h3>
        <perch:content id="main-page-summary" type="textarea" />
        <p><a href="?s=<perch:content id="slug" type="slug" />">read more</a> &raquo;</p>
    </div><!-- END left -->
    <div class="right">
        <perch:content id="main-page-thumbnail" type="image" width="244" height="94" alt="<perch:content id="title" type="text" />" />
    </div><!-- END right -->
    <div class="divclear"></div>
</div><!-- END projectbox -->

Here is my detail page template: ht_studiolog_project_detail.html

<div id="projectintro">
    <div class="left">
        <h1><perch:content id="title" type="text" label="H1 Project Title" required="true" title="true" /></h1>
        <perch:content id="summary" type="textarea" label="Project Intro Text" required="true" html="true" editor="ckeditor" />
    </div><!-- END project-intro left -->
    <div class="right">
        <h1><perch:content id="subtitle" type="text" label="Right Side Title" required="true" /></h1>
        <perch:content id="subsummary" type="textarea" label="Right Side Text" required="true" html="true" editor="ckeditor" />
    </div><!-- END project-intro right -->
    <div class="divclear"></div>
</div><!-- END project-intro -->

<perch:content id="description" type="textarea" label="Project Description" required="true" html="true" editor="ckeditor" />

<div id="studio-gallery">
    <perch:repeater id="image-gallery" label="Image Gallery">
        <perch:every count="3">
            <div class="studio-gallery-thumb last">
                <a href="<perch:content id="largeimage" type="image" label="Large Image" width="1000" height="550" bucket="gallery-images" />"  rel="prettyPhoto[studio]" title="<perch:content id="title" label="Image Title" type="text" required="true" title="true" />"><img src="<perch:content id="thumbnail" type="image" label="Image Thumbnail" width="229" height="176" bucket="gallery-images" />" width="229" height="176" alt="<perch:content id="alttext" label="Image Alt Text" type="text" required="true"/>" /></a>
            </div><!-- END studio-gallery-thumb last -->
        <perch:else />
            <div class="studio-gallery-thumb">
            <a href="<perch:content id="largeimage" type="image" label="Large Image" width="1000" height="550" bucket="gallery-images" />"  rel="prettyPhoto[studio]" title="<perch:content id="title" label="Image Title" type="text" required="true" title="true" />"><img src="<perch:content id="thumbnail" type="image" label="Image Thumbnail" width="229" height="176" bucket="gallery-images" />" width="229" height="176" alt="<perch:content id="alttext" label="Image Alt Text" type="text" required="true"/>" /></a>
            </div><!-- END studio-gallery-thumb -->
    </perch:repeater>
    <div class="divclear"></div>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $("a[rel^='prettyPhoto']").prettyPhoto({
                animationSpeed: 'fast', /* fast/slow/normal */
                padding: 40, /* padding for each side of the picture */
                opacity: 0.5, /* Value betwee 0 and 1 */
                showTitle: false, /* true/false */
                allowresize: true, /* true/false */
                counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
                theme: 'light_square', /* light_rounded / dark_rounded / light_square / dark_square */
                callback: function(){}
            });
        });
    </script>
</div> <!-- END studio-gallery -->

<perch:content id="slug" for="title" type="slug" suppress="true" />
<perch:content id="main-page-summary" type="textarea" label="Main Page Summary" html="true" editor="ckeditor" suppress="true" />
<perch:content id="main-page-thumbnail" type="image" label="Main Page Thumbnail" width="244" height="94" crop="true" suppress="true" />

If you canshed light on the three issues I'm having, that'd be great.

Thanks Evie

I've just updated my previous post as I've made a bit of progress with this now, but I've now got three issues I need help with - see above for the details. If you could take a look and get back to me with some answers/suggestions/solutions that'd be great.

Thanks

Evie

Drew McLellan

Drew McLellan 2638 points
Perch Support

  1. The Intro H1 and paragraph are appearing on both the list page and the detail page Is this only fixable if I use the two page approach? Or can I fix this another way and stick with this one page approach?

Check to see which mode you're in before you output the heading.

if (perch_get('s')) {
...
}else{
...{
}
  1. My main-page-thumbnail doesn't appear on the live page I am able to load my main-page-thumbnail - i.e. the thumbnail that I want on my list page - in the back end and it shows up there within the CMS but when I refresh the live page it doesn't show up. I check the source code and there's just a blank space - I'm stumped with this one.

Does it appear in both the template used for editing and for output?

  1. My gallery images are showing up twice I've used an <perch:every count="3"> <perch:else /> option for my gallery images as I want three in a row and I'd like it to apply class="last" to the third in the row. This code has worked before on other sites I've done, but I've never used this within a repeater, so I'm guessing that there must be another way of doing it within a repeater. Or maybe it's not possible. If I upload one image to the page, two images appear on the live page and if I look at the source code the first image has the class of last applied and the second one doesn't - so it's ignoring my "every count 3" code and just duplicating the image.

I can't see your closing </perch:every> tag.

  1. nice idea - I used that elsewhere in this project, so will be able to figure that one out - thanks for the tip!
  2. not really sure what you mean, but will go over my code again today and see if I can figure this out and get back to you if I can't
  3. I'll have to put the closing tag in and that'll fix it no doubt - thanks

Right I've sorted the H1 and paragraph out now and it only appears on the list page - slotted that bit of code into my refernce doc for future use and hopefully I'll remember that trick from now on.

I've also sorted out the image gallery and the thumbnails only appear once - it was because i was missing the end tag!

So my only issue now is the list detail thumb and I can't see what I'm doing wrong. I have this in my detail template to output the thumbnail on the list page:

<perch:content id="main-page-thumbnail" type="image" label="Main Page Thumbnail" width="244" height="94" crop="true" suppress="true" />

this is my list template:

<div class="right">
    <perch:content id="main-page-thumbnail" type="image" width="244" height="94" alt="<perch:content id="title" type="text" />" />
</div><!-- END right -->

and this in my studiolog.php page

<?php

                         perch_content_create('Projects', array(
                              'template'  => 'ht_studiolog_project_detail.html',
                              'multiple'  => true,
                              'edit-mode' => 'listdetail',
                         ));


                         if (perch_get('s')) {

                              // Detail mode
                              perch_content_custom('Projects', array(
                                   'template' => 'ht_studiolog_project_detail.html',
                                   'filter'   => 'slug',
                                   'match'    => 'eq',
                                   'value'    => perch_get('s'),
                                   'count'    => 1,
                              )); 

                         } else {

                              // List mode
                              perch_content('Studio Log Intro');
                              perch_content_custom('Projects', array(
                                   'template' => 'ht_studiolog_project_list.html',
                              )); 
                         }

                    ?>

should there be some extra code in the else{ bit to include the thumbnail - I thought by just having the list template mentioned there it would pull in my thumbnail as well as the text.

Drew McLellan

Drew McLellan 2638 points
Perch Support

You're missing the crop="true" attribute from the list template.

I've added it here:

<div class="right">
    <perch:content id="main-page-thumbnail" type="image" width="244" height="94" crop="true" alt="<perch:content id="title" type="text" />" />
</div><!-- END right -->

But it doesn't make any difference. I've re-uploaded the template, refreshed the page, edited the page and saved and refreshed again - still no thumbnail image on the list page.

Why do I need crop="true" in there?

Drew McLellan

Drew McLellan 2638 points
Perch Support

What's going on here?

<perch:content id="main-page-thumbnail" type="image" width="244" height="94" alt="<perch:content id="title" type="text" />" />

that's in my list template and I've added crop="true" - the above code was copied before I added that in. It's made no difference, my thumbnail still doesn't appear on the live page.

So to clarify - this is in mt detail tempate:

<perch:content id="main-page-thumbnail" type="image" label="Main Page Thumbnail" width="244" height="94" crop="true" suppress="true" />

And this is in my list template

<perch:content id="main-page-thumbnail" type="image" width="244" height="94" crop="true" alt="<perch:content id="title" type="text" />" />

Is that wrong?

Rachel Andrew

Rachel Andrew 394 points
Perch Support

The list image tag is incorrect. You have a perch tag for the alt text nested inside a perch tag, which is not valid. The image tag is the src for the image, the alt would in in the alt attribute.

Okay - I've removed the alt tag and now I still don't get a thumbnail image on the live page. I get this instead:

/perch/resources/fv3thumb-3-w244h94.jpg

I've followed the tutorial as best I can, I've provided my code here, you say it's wrong. I'm trying to figure out why but I can't see what's wrong with it. I've set a thumbnail as supress="true" on the detail template as I want my client to be able to upload a thumbnail that's a specific size that will only appear on the list page. This has nothing to do with any images loaded on the detail page. It's not a crop of any other image it's a totally separate image in itself. So I've added the following to my list template:

<perch:content id="main-page-thumbnail" type="image" width="244" height="94" crop="true" />

In relation to this which is in my detail template:

<perch:content id="main-page-thumbnail" type="image" label="Main Page Thumbnail" width="244" height="94" crop="true" suppress="true" />

I don't think I need crop="true" but I've put it in there as it's in your tutorial.

I can upload a thumbnail in the admin and it appears there just fine. But now all I get on the live page is what I've listed at the start of this post. As far as I can understand the info is in the detail template, it's supressed so it doesn't appear on the detail page and is loaded instead on the list page - but it doesn't appear. Why?

Rachel Andrew

Rachel Andrew 394 points
Perch Support

You need to form an HTML image tag. The Perch image tag allows you to upload an image and outputs the path to that image so that you can use it in your HTML code. This is exactly the same as any image in Perch.

There is an example and explanation on the documentation page for image

<img src="<perch:content id="logo" type="image" label="Logo" />" alt="<perch:content id="logoalt" type="text" label="Alt text" />" />

Also crop is explained on that page.

How stupid am I? I've been going round in circles with this and banging my head aginst my desk in frustration. All along I just presumed I had the image tag in there!!! No wonder the alt tag element was wrong. Well thanks for the speedy reply. I'll sort it out now! And thanks for the link - I'll read up about crop="true".

If I still worked fulltime instead of just one day a week, I'm sure Perch would be more ingrained into my head.