2sxc

Question

我想使用图像标题（来自下方屏幕截图的元数据值）自动显示为每个图像下方的每个图像标题。同样出于可访问性目的，默认情况下自动将此元值分配为 '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="blueimp-gallery-items-@Dnn.Module.ModuleID" style="display:none;">
    @foreach (var pic in AsAdam(Content, "Images").Files)
    {
        <a href="@pic.Url?w=@App.Settings.CarouselImageWidth&h=@App.Settings.CarouselImageHeight&mode=crop" title="@(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-@Dnn.Module.ModuleID">
            @(((dynamic)pic.Metadata).Title)
        </a>
    }
</div>

@* this is the rotator element *@
<div id='blueimp-gallery-@Dnn.Module.ModuleID' 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="#blueimp-gallery-@Dnn.Module.ModuleID"]').get(), {
                container: '#blueimp-gallery-@Dnn.Module.ModuleID',
                carousel: true
            }
        );
    });
</script>

另请注意，当我点击元数据标签时，弹出以下错误信息：

注：版本：9.2.0

更新： 将 "Image Metadata" 更改为 "ImageMetadata" 成功了。

仍然无法为每张图片添加 alt 标签。标题显示但是当我将 alt 设置为相同时它没有？

<div id="blueimp-gallery-items-@Dnn.Module.ModuleID" style="display:none;">
    @foreach (var pic in AsAdam(Content, "Images").Files)
    {
        <a href="@pic.Url?w=@App.Settings.CarouselImageWidth&h=@App.Settings.CarouselImageHeight&mode=crop" title="@(((dynamic)pic.Metadata).Title)" alt="@(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-@Dnn.Module.ModuleID">
            @(((dynamic)pic.Metadata).Title)
        </a>
    }
</div>

Answer 1

所以你同时问了几个问题。

数字 1：使用您要检查图像是否具有元数据的标题，如果是，则使用它。此代码应该有所帮助（图片是循环中的 image-variable）：

@(pic => !pic.HasMetadata ? "" : ((dynamic)pic.Metadata).Title)

数字 2 似乎是配置中的问题。据我所知，默认工具栏中的 metadata-button 有效。我检查了内部，field-configuration 是错误的 - 您应该将它从 "Image Metadata" 更改为 "ImageMetadata"

2sxc | Bluimp Gallery 应用程序

2sxc | Bluimp Gallery App