Accessing contents of *.txt from folder and loop through and display the results in smarty template

Question

I'm building a template in CMS Made simple which uses a Smarty engine. I'm a total smarty/php newbie.

I'm looping through images in a folder and displaying them in a Bootstrap Carusel. That is working fine.

On the other hand I have to display text and caption for each image.

I came up with the solution to put a .txt file which contains caption and text contents for each image in the folder. For example I have img1.jpg and a file called img1.txt in the same folder (img2.jpg - img2.txt, img3.jpg - img3.txt, etc.). Each image has a corresponding .txt file which contains content that have to be read to the caption and text section in the code below)

I'm not sure how I would implement that solution to the {foreach} and need help.

I've been using this snippet below to access the .txt but using *.txt is not working. *.txtgives an empty array.

Update

    {"{uploads_url}/images/{$entry->Picfolder}/*.txt"|file_get_contents|parse_str:$result|glob}

   {foreach from=$result key=text item=foo}
         <p>{$text}</p>
   {/foreach} 

Here is the whole carrousel code:

<!--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} <!--finding all .jpgs in the folder -->
  {foreach from=$pics item='pic'}<!-- loop through .jpgs --> 
     {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"> <!-- add jpgs from loop -->
         <div class="carousel-caption d-md-block">
           <h5>Caption</h5><!-- need to insert content from .txt file here -->
           <p>Image text</p><!-- need to insert content from .txt file here -->
         </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-->

Can someone please help me with this? I'm really stuck on this problem. Thanks in advance..

Answer 1

I really really encourage you to handle this at PHP level. Perhaps you could prepare an array of [image_path, caption] tuples and assign that to Smarty. Smarty itself is a template engine; it should not have to deal with globs, file name manipulation or other code logic except for trivial loops.

If you would still like to do this at Smarty level, then you can construct the file name and then print its contents:

<p>
  {capture "fileName"}/full/path/to/{$pic|basename:'.jpg'}.txt{/capture}
  {$smarty.capture.fileName|file_get_contents}
</p>

What this does is:

1. Trim the .jpg extension from $pic.
2. Add the full path and the .txt extension to that and capture it as the Smarty variable $fileName.
3. Print the contents of $fileName.