Forum for discussing general topics related to Couch.
2 posts Page 1 of 1
Hello All,

I have a one page site that includes a portfolio. I would like to add this portfolio to Couch with the ability to add more over time. What is the best way to tackle this portfolio considering its a one page web site. I have tried to follow the tutorial but I can't seem to get it to work with my configuration. Any help would be great. The following is my code:

Code: Select all

<!-- portfolio [section_2] -->

   <!-- header -->
   <div id="section_2" class="wrap-section-header" >
      <div class="section-header" >
         <h1>Portfolio</h1>
         <ul class="section-nav" >
            <li><a class="up" href="#section_1" ></a></li>
            <li><a class="down" href="#section_4" ></a></li>
         </ul>
      </div>
   </div>
   <!-- /end header -->

   <!-- body -->
   <div class="wrap-section-body greenBorderBottom" >
      <cms:editable name='portfolio' label='Portfolio' type='group' />
      <div id="portfolio" >

      <!-- filter -->
      <ul id="filter" >
         <li class="selected" ><a href="#" class="all" >All</a></li>
         <li><a href="#" class="web_design_port" >Web</a></li>
         <li><a href="#" class="print_port" >Print</a></li>
         <!--<li><a href="#" class="video_port" >Video</a></li>-->
      </ul>
      <!-- /end filter -->

      <!-- layout switcher -->
         <!--<div id="layoutSwitcher" >
            <a class="button" href="#" >Switch Display</a>
         </div>-->
      <!-- /end layout switcher -->

      <!-- image-grid -->
      <ul id="list" class="image-grid clear" >
      
         <!--Web Design Section -->

         <li id="id-w1" class="web_design_port" >
            <a class="prettyPhoto" href="images/portfolio/cbysparkleredesign.jpg" rel="prettyPhoto" title="" >
               <img src="images/portfolio/cbysparkleredesign_small.jpg" width="220" height="154" alt="CBY Sparkle" />
            </a>
            <div class="information" >
               <h4>CBY Sparkle</h4>
               <!--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis egestas laoreet. Etiam faucibus massa sed risus lacinia in vulputate dolor imperdiet. Curabitur pharetra, purus a commodo dignissim, sapien nulla tempus nisi, et varius nulla urna at arcu.</p>
               <p><a class="button" href="/" >Live preview</a></p>-->
            </div>
         </li>
         
         <li id="id-w2" class="web_design_port" >
            <a class="prettyPhoto" href="images/portfolio/matsushi.png" rel="prettyPhoto" title="" >
               <img src="images/portfolio/matsushi_small.png" width="220" height="154" alt="Matsutake Sushi" />
            </a>
            <div class="information" >
               <h4>Matsutake Sushi</h4>
               <!--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis egestas laoreet. Etiam faucibus massa sed risus lacinia in vulputate dolor imperdiet. Curabitur pharetra, purus a commodo dignissim, sapien nulla tempus nisi, et varius nulla urna at arcu.</p>-->
            </div>
         </li>
         
         <li id="id-w3" class="web_design_port" >
            <a class="prettyPhoto" href="images/portfolio/qch.png" rel="prettyPhoto" title="" >
               <img src="images/portfolio/qch_small.png" width="220" height="154" alt="Quick Cuisine Hawaii" />
            </a>
            <div class="information" >
               <h4>Quick Cuisine Hawaii</h4>
               <!--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis egestas laoreet. Etiam faucibus massa sed risus lacinia in vulputate dolor imperdiet. Curabitur pharetra, purus a commodo dignissim, sapien nulla tempus nisi, et varius nulla urna at arcu.</p>-->
            </div>
         </li>

         <!--<li id="id-w4" class="web_design_port" >
            <a class="prettyPhoto" href="images/portfolio/image1.jpg" rel="prettyPhoto" title="" >
               <img src="images/portfolio/image1_thumb.jpg" width="220" height="154" alt="This is the title" />
            </a>
            <div class="information" >
               <h4>Aliquam iaculis</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis egestas laoreet. Etiam faucibus massa sed risus lacinia in vulputate dolor imperdiet. Curabitur pharetra, purus a commodo dignissim, sapien nulla tempus nisi, et varius nulla urna at arcu.</p>
            </div>
         </li>-->
         
         <!-- End Web Design Section -->
         
         <!-- Print Section -->

         <li id="id-p1" class="print_port" >
            <a class="prettyPhoto" href="images/portfolio/qc_flier.jpg" rel="prettyPhoto" title="" >
               <img src="images/portfolio/qc_flier_small.jpg" width="220" height="154" alt="Quick Cuisine Hawaii Flier" />
            </a>
            <div class="information" >
               <h4>Quick Cuisine Hawaii Flier</h4>
               <!--<p>Phasellus nulla arcu, dignissim eget auctor vitae, hendrerit et justo. Nullam non metus neque. Cras varius, quam at facilisis sagittis, nisl dui condimentum orci, aliquam lobortis eros ligula ut felis. Etiam eget pulvinar elit. Phasellus nulla arcu, dignissim eget auctor vitae, hendrerit et justo. Nullam non metus neque.</p> -->
            </div>
         </li>

         <!--<li id="id-p2" class="print_port" >
            <a class="prettyPhoto" href="images/portfolio/image1.jpg" rel="prettyPhoto" title="This is the description" >
               <img src="images/portfolio/image1_thumb.jpg" width="220" height="154" alt="This is the title" />
            </a>
            <div class="information" >
               <h4>Nullam non metus</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis egestas laoreet. Etiam faucibus massa sed risus lacinia in vulputate dolor imperdiet. Curabitur pharetra, purus a commodo dignissim, sapien nulla tempus nisi, et varius nulla urna at arcu.</p>
               <p><a class="button" href="/" >Buy it now</a></p>
            </div>
         </li>
         
         <li id="id-p3" class="print_port" >
            <a class="prettyPhoto" href="images/portfolio/image1.jpg" rel="prettyPhoto" title="This is the description" >
               <img src="images/portfolio/image1_thumb.jpg" width="220" height="154" alt="This is the title" />
            </a>
            <div class="information" >
               <h4>Lorem ipsum dolor</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis egestas laoreet. Etiam faucibus massa sed risus lacinia in vulputate dolor imperdiet. Curabitur pharetra, purus a commodo dignissim, sapien nulla tempus nisi, et varius nulla urna at arcu.</p>
            </div>
         </li>-->
         
         <!-- End Print Section -->
         
         <!-- Video Section / Area is commented until videos are published-->

         <!--<li id="id-6" class="video_port" >
            <a class="prettyPhoto" href="http://vimeo.com/13676989" rel="prettyPhoto" title="RSA Animate - Smile or Die" >
               <img src="images/portfolio/image4_thumb.jpg" width="220" height="154" alt="RSA Animate - Smile or Die" />
            </a>
            <div class="information" >
               <h4>RSA Animate - Smile or Die</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis egestas laoreet. Etiam faucibus massa sed risus lacinia in vulputate dolor imperdiet. Curabitur pharetra, purus a commodo dignissim, sapien nulla tempus nisi, et varius nulla urna at arcu.</p>
            </div>
         </li>

         <li id="id-3" class="video_port" >
            <a class="prettyPhoto" href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294" rel="prettyPhoto" title="This is the description" >
               <img src="images/portfolio/image3_thumb.jpg" width="220" height="154" alt="This is the title" />
            </a>
            <div class="information" >
               <h4>Flash video</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis egestas laoreet. Etiam faucibus massa sed risus lacinia in vulputate dolor imperdiet. Curabitur pharetra, purus a commodo dignissim, sapien nulla tempus nisi, et varius nulla urna at arcu.</p>
            </div>
         </li>

         <li id="id-1" class="video_port" >
            <a class="prettyPhoto" href="http://www.youtube.com/watch?v=u6XAPnuFjJc" rel="prettyPhoto" title="RSA Animate - Drive: The surprising truth about what motivates us" >
               <img src="images/portfolio/image2_thumb.jpg" width="220" height="154" alt="RSA Animate - Drive" />
            </a>
            <div class="information" >
               <h4>RSA Animate - Drive</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis egestas laoreet. Etiam faucibus massa sed risus lacinia in vulputate dolor imperdiet. Curabitur pharetra, purus a commodo dignissim, sapien nulla tempus nisi, et varius nulla urna at arcu.</p>
            </div>
         </li>-->
         
         <!-- End Video Section -->

      </ul>
      <!-- /end image-grid -->

      </div>

   </div>
   <!-- /end body -->

<!-- /end portfolio [section_2]-->



Thanks
Hi Alex,

Since it is a one page site, I'll assume the name of the solo template is index.php.
You wish to display within this index.php a list of your portfolio items that are independently managed (added, deleted etc.).

The cleanest approach here would be to create one more template. Let us name it 'portfolio.php' Make it clonable because we'll be creating several portfolio items from this template. Make it non-executable (please see 'template' tag in docs) because we do not want to access the pages of this template directly e.g. as yoursite.com/portfolio/item1.htm.
We simply want this template to help us create portfolio items in the admin section which we'll list on the index.php page. This way your site will always seem to be consisting of only one page.
Create two editable regions within this portfolio.php template - one of type image and another of type thumbnail (see tutorial in docs).

Your admin section will now allow you to create any number of portfolio items where each will have an image and an automatically created thumbnail.

Once this is done, listing these items on index.php is trivial.
I'll use the code you provided.
Your original code is
Code: Select all
<ul id="list" class="image-grid clear" >

         <!--Web Design Section -->

         <li id="id-w1" class="web_design_port" >
            <a class="prettyPhoto" href="images/portfolio/cbysparkleredesign.jpg" rel="prettyPhoto" title="" >
               <img src="images/portfolio/cbysparkleredesign_small.jpg" width="220" height="154" alt="CBY Sparkle" />
            </a>
            <div class="information" >
               <h4>CBY Sparkle</h4>
            </div>
         </li>

         <li id="id-w2" class="web_design_port" >
            <a class="prettyPhoto" href="images/portfolio/matsushi.png" rel="prettyPhoto" title="" >
               <img src="images/portfolio/matsushi_small.png" width="220" height="154" alt="Matsutake Sushi" />
            </a>
            <div class="information" >
               <h4>Matsutake Sushi</h4>
            </div>
         </li>

</ul>       


Modify it to this -
Code: Select all
<ul id="list" class="image-grid clear" >

         <!--Web Design Section -->
    <cms:pages masterpage='portfolio.php' >
         <li id="id-w1" class="web_design_port" >
            <a class="prettyPhoto" href="<cms:show your_image_region_name />" rel="prettyPhoto" title="" >
               <img src="<cms:show your_thumbnail_region_name />" width="220" height="154" alt="<cms:show k_page_title />" />
            </a>
            <div class="information" >
               <h4><cms:show k_page_title /></h4>
            </div>
         </li>
    </cms:pages>     

</ul>       


This will cause all the portfolio items to be listed on your home page.
You can tweak this code further by using pagination or create folders within portfolio.php and list the items according to folders etc.
This is all covered in the tutorials in documentation.

Hope this helps.
2 posts Page 1 of 1