I'm looping through an image folder and displaying the images in a bootstrap carousel in the news detail template.
That is working very well
My problem is that there should be a caption and a text for each image.
My solution is to put a .txt file which contains caption contents for each image in the folder. So I have img1.jpg then there is a file called img1.txt in the same folder etc. (each image has a corresponding .txt file which contains contents that have to be read to the caption section in the code below)
I'm not sure how I would implement that solution to the {foreach} loop.
Can someone advise me about best practice for that solution.
I'm still not that advanced in CMSMS
Below is a copy of the Carousel code for clarification.
Code: Select all
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
<!--Slides-->
<div class="carousel-inner" role="listbox">
{assign var='pics' value="uploads/images/{$entry->Picfolder}/*.jpg"|glob}
{foreach from=$pics item='pic'}
{if $pic@first}
<div class="carousel-item active">
{else}
<div class="carousel-item">
{/if}
<img class="d-block w-100" src='{root_url}/{$pic}' alt="First slide">
<div class="carousel-caption d-md-block">
<h5>Caption</h5>
<p>Image text</p>
</div>
</div>
{/foreach}
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
<ol class="carousel-indicators">
{foreach from=$pics item='pic' name=img}
<li data-target="#carousel-thumb" data-slide-to="{$smarty.foreach.img.index}" class="active"> <img class="d-block w-100" src='{root_url}/{$pic}' height="50" width="50" class="img-fluid"></li>
{/foreach}
</ol>
</div>
<!--/.Carousel Wrapper-->