I am trying to implement a portfolio_list for my portfolio items

My html template uses an owl carousel that brings the images in through css

I would like to be able to have the images pulled in from couch instead as the porfolio_image that is uploaded into couch.

As soon as I delete the extra items to then the page breaks and I get an error saying that Uncaught TypeError: Cannot read property 'clone' of undefined

Does anyone have experience with couch and owl carousel.

Here is the html template for the portfolo_list page:

<div class="mastwrap">

<div class="album-carousel owl-carousel">
<div class="item album-01 fullheight">
<div class="albums-overlay fullheight">
<div class="valign text-center">
<a href="album-single.html"><h1 class="white font2"><span>People Story</span></h1></a>
</div>
</div>
</div>

<div class="item album-02 fullheight">
<div class="albums-overlay fullheight">
<div class="valign text-center">
<a href="album-single.html"><h1 class="white font2"><span>City Outdoors</span></h1></a>
</div>
</div>
</div>

<div class="item album-03 fullheight">
<div class="albums-overlay fullheight">
<div class="valign text-center">
<a href="album-single.html"><h1 class="white font2"><span>The Crowd</span></h1></a>
</div>
</div>
</div>

<div class="item album-04 fullheight">
<div class="albums-overlay fullheight">
<div class="valign text-center">
<a href="album-single.html"><h1 class="white font2"><span>Eyes of Truth</span></h1></a>
</div>
</div>
</div>

<div class="item album-05 fullheight">
<div class="albums-overlay fullheight">
<div class="valign text-center">
<a href="album-single.html"><h1 class="white font2"><span>Bricks Town</span></h1></a>
</div>
</div>
</div>

</div>


</div>


And this is what I have tried to do with it but cannot get it to work:

<cms:embed 'menu.html' />


<div class="mastwrap">
<cms:pages masterpage='portfolio.php' >
<div class="album-carousel owl-carousel">
<div class="item fullheight"><cms:show portfolio_image />
<div class="albums-overlay fullheight">
<div class="valign text-center">
<a href="<cms:show k_page_link />"><h1 class="white font2"><span><cms:show k_page_title /></span></h1></a>
</div>
</div>
</div>



</div>



</cms:pages>
</div>

Any help would be appreciated
Thank you

[trendoman]

@raine,
Let me suggest couple corrections:

Code: Select all

<div class="mastwrap">
       <div class="album-carousel owl-carousel">

             <cms:pages masterpage='portfolio.php' >

<div class="item album-0<cms:show k_count /> fullheight">
<cms:show portfolio_image />
   <div class="albums-overlay fullheight">
       <div class="valign text-center">
            <a href="<cms:show k_page_link />">
                    <h1 class="white font2"><span><cms:show k_page_title /></span></h1>
            </a>
       </div>   
    </div>
</div>

               </cms:pages>

        </div>
</div> 

Now, cms:pages doesn't repeat the owl-carousel wrapper as many times as you have images (it must be only once). And also the source containes repeating part 'album-01, album-02., etc' so i added this k_count to automatically increment it up to 09. Above this number (010) it will probably brake.

Ok?

Thank you,
I have taken out the album01 part because I don't want to call the images from css.
I figured out that I needed to add cms:folders, which has gotten everything to work and that way I can call it through different categories, However I still cannot get the images to show. This is the new code

Code: Select all

<div class="mastwrap">
<cms:folders masterpage='portfolio.php' >
    <cms:show k_folder_title />
   <div class="album-carousel owl-carousel">
        <cms:pages masterpage='portfolio.php' >
       <div class="item fullheight"><cms:show portfolio_image />
          <div class="albums-overlay fullheight">
             <div class="valign text-center">
               <a href="<cms:show k_page_link />"><h1 class="white font2"><span><cms:show k_page_title /></span></h1></a>
             </div>   
          </div>
       </div>

        </cms:pages>
       
   </div>


</cms:folders>

</div> 

Is there another way to write the code to call the image? Should I call it as background image? l
Thank you for your help.

[trendoman]

I will add to your troubleshooting another addon:

Code: Select all

<cms:pages masterpage='portfolio.php' folder=k_folder_name >

This way, you will not have all the pages from template shown as many times as many folders you have. Only pages of current folder will be listed.

As to html/css troubleshooting issues, I suggest create a simple list of pages in folders and when it works, go further step by step in order to find the problem.

Code: Select all

<cms:folders masterpage='portfolio.php' >
    <h1>Pages of <cms:show k_folder_title />:</h1>
           <cms:pages masterpage='portfolio.php' folder=k_folder_name >
                 <cms:show k_page_title /><br/>
           </cms:pages>
     <hr/>
</cms:folders>

Ok?