2sxc | Bluimp Gallery App

0
votes

I want to use the image title (meta data value from below screenshot) to auto display as each images caption underneath each image. Also for Accessibility purposes auto assign this meta value as the 'alt=""' value by default?

enter image description here

Current template code:

<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>

Also note that when I click on meta data tag, the following error message pop up appears:

enter image description here

Note: Version: 9.2.0

UPDATE: Changing "Image Metadata" to "ImageMetadata" worked thx.

Still having trouble adding alt tag to each image. title shows but when I set alt to same it doesn't? 

<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>
1
2sxc

1 Answers

1
votes

So you're asking a few things at the same time.

number 1: to use the title you want to check if the image has metadata, and if yes, use that. This code should help (pic is the image-variable in your loop) :

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

number 2 seems to be an issue in the configuration. as far as I can see, the metadata-button in the default toolbar works. I checked the internal and the field-configuration is wrong - you should change it from "Image Metadata" to "ImageMetadata"

enter image description here