List and detail pages using two pages.

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.

???

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

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.

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?

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?

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?

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.