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:
Thanks
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