Well its simple. I will try to explain the things to you.
What you have done?The following is your code to achieve displaying the thumbnails:
- Code: Select all
<!-- Elastislide Carousel -->
<ul id="carousel" class="elastislide-list">
<cms:pages masterpage='flipbook.php' limit='6' >
<li>
<a href="<cms:show k_page_link />">
<img src="<cms:thumbnail width='200' height='200' />" />
</a>
</li>
</cms:pages>
</ul>
<!-- End Elastislide Carousel -->
The output of your code (you can run the code in browser and then check the Page Source to find this code) is:
- Code: Select all
<!-- Elastislide Carousel -->
<ul id="carousel" class="elastislide-list">
<li>
<a href="http://www.marioncountynews.net/flipbook.php?p=178">
<img src="" />
</a>
</li>
<img src="" />
<li>
<a href="http://www.marioncountynews.net/flipbook.php?p=170">
<img src="" />
</a>
</li>
<img src="" />
</ul>
<!-- End Elastislide Carousel -->
What you should Do:As you can see above, the <img> tags "src" attribute comes up empty.
Now this happens because, in your couch code above, you have used the <cms:pages> tag to be able to show the "flipbook_image" variable, which is correct. But then here is where all goes wrong.
"flipbook_image" variable is a couch editable region and hence you tried to use it directly. But since this editable region is actually within <cms:repeatable> tag, you need to use <cms:show_repeatable> tag to view the output.
Hence the solution to your problem will be the following code, which you need to put in your index.php:
- Code: Select all
<!-- Elastislide Carousel -->
<ul id="carousel" class="elastislide-list">
<cms:pages masterpage='flipbook.php' limit='6' >
<cms:show_repeatable 'flipbook_pages' startcount='1' >
<li>
<a href="<cms:show k_page_link />">
<img src="<cms:thumbnail flipbook_image width='200' height='200' />" />
</a>
</li>
</cms:show_repeatable>
</cms:pages>
</ul>
<!-- End Elastislide Carousel -->
Once you use this code in your index.php, refresh your browser and then again check the source output and you will get:
- Code: Select all
<!-- Elastislide Carousel -->
<ul id="carousel" class="elastislide-list">
<li>
<a href="http://localhost/couch_site_sols/flipbook.php?p=4">
<img src="http://localhost/couch_site_sols/couch/uploads/image/background-1-200x200.jpg" />
</a>
</li>
<li>
<a href="http://localhost/couch_site_sols/flipbook.php?p=4">
<img src="http://localhost/couch_site_sols/couch/uploads/image/elizabeth-200x200.png" />
</a>
</li>
</ul>
<!-- End Elastislide Carousel -->
Well the code code under the section
What you should Do: will display the images of your flipbook. But as a matter of fact, as it is usually in these newspaper sites, probably you want to achieve showing only the first page of each flipbook and hence you have used the attribute "limit" in <cms:pages>. But the solution that I have given you above will actually display only 6 images from the most recent flipbook/ flipbooks.
In case you want to display only the first page of the flipbooks, the use the code below. I have enclosed the display of the <li> inside <cms:if k_count le '1'>...</cms:if>. This will do the trick to display only the first page of the 6 flipbook that you want to display (by default even if there are 20 flipbooks, still the most recent 6 flipbooks' coverpage will be displayed using the code below:
- Code: Select all
<!-- Elastislide Carousel -->
<ul id="carousel" class="elastislide-list">
<cms:pages masterpage='flipbook.php' limit='6' >
<cms:show_repeatable 'flipbook_pages' startcount='1' >
<cms:if k_count le '1'>
<li>
<a href="<cms:show k_page_link />">
<img src="<cms:thumbnail flipbook_image width='200' height='200' />" />
</a>
</li>
</cms:if>
</cms:show_repeatable>
</cms:pages>
</ul>
<!-- End Elastislide Carousel -->
I hope this helps you solve your problem. Even @KK Sir had explained you the same. but I suppose, since you are new to repeatable regions, you are facing problems.
Feel free to test the code i gave you, and let me know if it works for you.
Regards,
GenXCoders
