Any way to show filenames as image titles on a gallery page (Wells template 7.0)?

This is for a photographer who uploaded many images onto a gallery page and is trying not to manually insert titles for all images. The files are named, so they are looking to have the filenames (alt tag) show somewhere under each image (easiest I'm guessing would be in the image title or description fields). The site is in the Wells template in version 7.0. Is this possible? Nothing I've tried has worked yet. If not possible, any other suggestions are welcome! Much appreciated!

Can you share site url? I think we can try something

Of course! Thanks in advance, URL below:
markrockwoodphotography.com/photobackgrounds

Add this code to last line in Code Injection > Footer

<script>
  $(function(){

  $(".slide img").each(function(){
            var title = this.alt;
          $('<span class="t-caption">'+ title +'</span>').insertAfter($(this).parent());
        });
 }); 
</script>
<style>
 div.slide + .t-caption {
    display: none !important;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
}
div.slide.sqs-active-slide + .t-caption {
    display: block !important;
}
</style>

I placed that code in the Footer Code Injection (screenshot attached) and am not seeing that on my end.

Add this line to top of code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

Hi, I am also having the same problem.  I would like the image file name to show under each image, without having to manually insert them.  I have tried the following injection code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script>
  $(function(){

  $(".slide img").each(function(){
            var title = this.alt;
          $('<span class="t-caption">'+ title +'</span>').insertAfter($(this).parent());
        });
 }); 
</script>
<style>
 div.slide + .t-caption {
    display: none !important;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
}
div.slide.sqs-active-slide + .t-caption {
    display: block !important;
}
</style>

Thank you for any help you could offer!

On 3/9/2024 at 5:32 PM, Carrot16 said:

Hi, I am also having the same problem.  I would like the image file name to show under each image, without having to manually insert them.  I have tried the following injection code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script>
  $(function(){

  $(".slide img").each(function(){
            var title = this.alt;
          $('<span class="t-caption">'+ title +'</span>').insertAfter($(this).parent());
        });
 }); 
</script>
<style>
 div.slide + .t-caption {
    display: none !important;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
}
div.slide.sqs-active-slide + .t-caption {
    display: block !important;
}
</style>

Thank you for any help you could offer!

Can you share link to your site?