2sxc | Bluimp Gallery App

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

UPDATE： "ImageMetadata"を "ImageMetadata"に変更すると、thxが機能します。

各画像に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：画像にメタデータがあるかどうかを確認したいタイトルを使用する場合は、それを使用します。このコードは（PICは、あなたのループ内で画像変数）を支援する必要があります

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

番号2は、構成の問題のようです。私が見る限り、デフォルトのツールバーのメタデータボタンが機能します。私は内部をチェックし、フィールドの設定が間違っている - あなたは「ImageMetadata」