2схс | Приложение галереи Bluimp

Я хочу использовать заголовок изображения (значение метаданных на скриншоте ниже) для автоматического отображения в качестве заголовка каждого изображения под каждым изображением. Также для целей доступности автоматически назначать это мета-значение как значение «alt = «»» по умолчанию?

Текущий код шаблона:

<link rel="stylesheet" href="@App.Path/dist/lib/blueimp/css/blueimp-gallery.min.css" data-enableoptimizations="true" />
<script type="text/javascript" src="@App.Path/dist/lib/blueimp/js/blueimp-gallery.min.js" data-enableoptimizations="bottom"></script>
<link rel="stylesheet" href="@App.Path/dist/app/view.css" data-enableoptimizations="true" />

@if(@Dnn.User.IsSuperUser)
            {
            @Content.Toolbar
        } else {
            @Edit.Toolbar(Content, actions: "edit,add")
        }

<div id="[email protected]" style="display:none;">
    @foreach (var pic in AsAdam(Content, "Images").Files)
    {
        <a href="@[email protected]&[email protected]&mode=crop" title="@(((dynamic)pic.Metadata).Title)" data-gallery="#[email protected]">
            @(((dynamic)pic.Metadata).Title)
        </a>
    }
</div>

@* this is the rotator element *@
<div id='[email protected]' class='blueimp-gallery blueimp-gallery-carousel' data-carousel='true' data-start-slideshow="true">
    <div class='slides'></div>
    <h3 class='title'></h3>
    <a class='prev'>‹</a>
    <a class='next'>›</a>
    <a class='play-pause'></a>
    <ol class='indicator'></ol>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        // initialize the carousel gallery
        blueimp.Gallery($('[data-gallery="#[email protected]"]').get(), {
                container: '#[email protected]',
                carousel: true
            }
        );
    });
</script>

Также обратите внимание, что когда я нажимаю на тег метаданных, появляется следующее всплывающее сообщение об ошибке:

Примечание: Версия: 9.2.0

ОБНОВЛЕНИЕ: изменение «Метаданных изображения» на «ImageMetadata» сработало, спасибо.

Все еще возникают проблемы с добавлением тега alt к каждому изображению. заголовок показывает, но когда я устанавливаю альт на то же самое, это не так?

<div id="[email protected]" style="display:none;">
    @foreach (var pic in AsAdam(Content, "Images").Files)
    {
        <a href="@[email protected]&[email protected]&mode=crop" title="@(((dynamic)pic.Metadata).Title)" alt="@(((dynamic)pic.Metadata).Title)" data-gallery="#[email protected]">
            @(((dynamic)pic.Metadata).Title)
        </a>
    }
</div>