Modal Attachment Image

Les Girvan asked on May 16, 2022 18:30

Can anyone help, I am looking to use a modal to allow users to see a larger image from attachments, I can get the attachment to show on the page, but when you click the image to view the modal, it is only showing the same image, 1st attachement.

This is my transformation:

    <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-lg" data-toggle="modal" data-target="#myModal">
    <a target="_self" href="<%# GetAbsoluteUrl(GetAttachmentUrl(Eval(" AttachmentName"), Eval("NodeAliasPath")), Eval<int>("AttachmentSiteID")) %>">
    <%# IfCompare(ImageHelper.IsImage((string)Eval("AttachmentExtension")), true, GetAttachmentIcon("AttachmentGUID"), "<img style=\"border: none;\" src=\"" + GetAbsoluteUrl(GetAttachmentUrl(Eval("AttachmentName"), Eval("NodeAliasPath")), Eval<int>("AttachmentSiteID")) + "?maxsidesize=150\" alt=\"" + Eval("AttachmentName", true) + "\" />") %>
    </a> 
    </button>


<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
                <div class="modal-body">
<a target="_self" href="<%# GetAbsoluteUrl(GetAttachmentUrl(Eval(" AttachmentName"), Eval("NodeAliasPath")), Eval<int>("AttachmentSiteID")) %>">
<%# IfCompare(ImageHelper.IsImage((string)Eval("AttachmentExtension")), true, GetAttachmentIcon("AttachmentGUID"), "<img style=\"border: none;\" src=\"" + GetAbsoluteUrl(GetAttachmentUrl(Eval("AttachmentName"), Eval("NodeAliasPath")), Eval<int>("AttachmentSiteID")) + "?maxsidesize=500\" alt=\"" + Eval("AttachmentName", true) + "\" />") %>
</a>
              </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

The button code renders all the attachments, but using the same code does not render the correct image in the modal window?

Correct Answer

Brenden Kehren answered on May 19, 2022 15:51

My apologies, I had the wrong syntax:

data-target='#myModal-<%# Eval<string>("AttachmentGUID") %>'

and

<div id='myModal-<%# Eval<string>("AttachmentGUID") %>'...

I was missing the # after the <%

1 votesVote for this answer Unmark Correct answer

Recent Answers

Brenden Kehren answered on May 18, 2022 00:29

Looks like you need a unique modal ID to be set. Since your transformation is rendering multiple images/modals, you need unique IDs for each one. So on your button set this:

data-target="#myModal"

to something like this:

data-target='#myModal-<% Eval<string>("AttachmentGUID") %>'

Then on your modal, change this:

<div id="myModal"...

to something like this:

<div id='myModal-<% Eval<string>("AttachmentGUID") %>'...

This will get your button and modal with unique ID's and hopefully work as you'd expect. Right now it's just showing the first modal with the ID of myModal because every button is coded with that ID and every modal has that ID.

1 votesVote for this answer Mark as a Correct answer

Les Girvan answered on May 18, 2022 17:16

Hi Brendan, many thanks for that suggestions, I am trying for the button function first just to get it to work, but making the alteration as suggested, I am getting the not so helpful error message:

[TempITemplate.Template]: http://server/CMSVirtualFiles/Transformations/=vg=7e0792e5-8ba1-446f-ad40-32482a652cc5/CMS.Root/gallryImageModal01.ascx(3): error CS1002: ; expected[TempITemplate.Template]: http://server/CMSVirtualFiles/Transformations/=vg=7e0792e5-8ba1-446f-ad40-32482a652cc5/CMS.Root/gallryImageModal01.ascx(3): error CS1002: ; expected[TempITemplate.Template]: http://server/CMSVirtualFiles/Transformations/=vg=7e0792e5-8ba1-446f-ad40-32482a652cc5/CMS.Root/gallryImageModal01.ascx(3): error CS1002: ; expected[TempITemplate.Template]: http://server/CMSVirtualFiles/Transformations/=vg=7e0792e5-8ba1-446f-ad40-32482a652cc5/CMS.Root/gallryImageModal01.ascx(3): error CS1002: ; expected[TempITemplate.Template]: http://server/CMSVirtualFiles/Transformations/=vg=7e0792e5-8ba1-446f-ad40-32482a652cc5/CMS.Root/gallryImageModal01.ascx(3): error CS1002: ; expected[TempITemplate.Template]: http://server/CMSVirtualFiles/Transformations/=vg=7e0792e5-8ba1-446f-ad40-32482a652cc5/CMS.Root/gallryImageModal01.ascx(3): error CS1002: ; expected[TempITemplate.Template]: http://server/CMSVirtualFiles/Transformations/=vg=7e0792e5-8ba1-446f-ad40-32482a652cc5/CMS.Root/gallryImageModal01.ascx(3): error CS1002: ; expected

I have modified the button code as::

 <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-lg" data-toggle="modal" data-target="#myModal-<% Eval<string>("AttachmentGUID") %>">
</button>

so something is not liked?

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on May 19, 2022 13:45

Pay close attention to what I first posted and the use of single and double quotes. This will resolve the error you have.

1 votesVote for this answer Mark as a Correct answer

Les Girvan answered on May 19, 2022 15:48

Hi Brendan, Thanks for the feedback, I did try using as advised but still have the same error?

0 votesVote for this answer Mark as a Correct answer

Les Girvan answered on May 19, 2022 18:10

cheers Brendan, that has resolved the problem thank you. I wish the error message was more specfic when it comes to the placement of , ' " # etc, it's so frustrating for me :)

0 votesVote for this answer Mark as a Correct answer