Displaying attached images in Display Form

Discussions about Forms Designer for SharePoint 2013 / 2016 and Office 365.
Locked
User avatar
smithme
Posts: 45
Joined: Wed Jul 26, 2017

04 Aug 2017

The following code displays any single attachment just fine:

Code: Select all

var preview = "";

$("a[href*='/Attachments/'").each(function(){
	preview += "<tr><td><img class='thumbnail' src='" + $(this).attr("href") + "'></td></tr></table>";
});

if (preview == "") { 
	preview = "<tr><td>There are no items to display.</td></tr>"
}

$(".imgPreview").html(preview);
When I add a second (or more) attachment(s) I start getting the following error:
plumsail.fd.jquery.js:4 Uncaught TypeError: Cannot read property 'childNodes' of null
at Function.buildFragment (plumsail.fd.jquery.js:4)
at m.fn.init.domManip (plumsail.fd.jquery.js:4)
at m.fn.init.append (plumsail.fd.jquery.js:4)
at m.fn.init.<anonymous> (plumsail.fd.jquery.js:4)
at m.access (plumsail.fd.jquery.js:4)
at m.fn.init.html (plumsail.fd.jquery.js:4)
at HTMLDocument.<anonymous> (fd_Item_DisplayForm.aspx:571)
at j (plumsail.fd.jquery.js:2)
at Object.fireWith [as resolveWith] (plumsail.fd.jquery.js:2)
at Function.ready (plumsail.fd.jquery.js:2)
Any suggestions?
City of Nampa
Idaho
United States of America

User avatar
Nikita Kurguzov
Posts: 889
Joined: Mon Jul 03, 2017

07 Aug 2017

Hello!
Yeah, simply remove closing table tag from your code:

Code: Select all

$("a[href*='/Attachments/'").each(function(){
	preview += "<tr><td><img class='thumbnail' src='" + $(this).attr("href") + "'></td></tr>";
});
That should work. Alternatively, you can add an opening table tag. Whatever works in your case.
It simply didn't work because there were too many closing tags, but not enough opening tags.
Cheers

User avatar
smithme
Posts: 45
Joined: Wed Jul 26, 2017

07 Aug 2017

Nikita Kurguzov wrote:
07 Aug 2017
Hello!
Yeah, simply remove closing table tag from your code:

Code: Select all

$("a[href*='/Attachments/'").each(function(){
	preview += "<tr><td><img class='thumbnail' src='" + $(this).attr("href") + "'></td></tr>";
});
That should work. Alternatively, you can add an opening table tag. Whatever works in your case.
It simply didn't work because there were too many closing tags, but not enough opening tags.

Wow! That was stupid. Thanks for catching that.
City of Nampa
Idaho
United States of America

armstrob
Posts: 4
Joined: Wed Aug 23, 2017

23 Aug 2017

Smithme, can I ask where you put that code? I am trying to achieve the same result but am totally new to this.

User avatar
Nikita Kurguzov
Posts: 889
Joined: Mon Jul 03, 2017

23 Aug 2017

Hello!
You can achieve it in three easy steps:
1) Add Table control to your Form
2) Add CSS class to your Table, for example, imgPreview
3) Open JS editor and copy this code inside:

Code: Select all

var preview = "";

$("a[href*='/Attachments/'").each(function(){
	preview += "<img class='thumbnail' src='" + $(this).attr("href") + "'>";
});

if (preview == "") { 
	preview = "There are no items to display."
}


$(".imgPreview").html(preview);
Make sure that the class name you gave to your Table matches the one found in the code!
AttachedImages.png
AttachedImages.png (31.08 KiB) Viewed 3601 times
Cheers

armstrob
Posts: 4
Joined: Wed Aug 23, 2017

23 Aug 2017

Thanks for that Smithme, worked perfectly!! Is there a way to automatically reduce the size of the images displayed or is it just the original photo size?

User avatar
Nikita Kurguzov
Posts: 889
Joined: Mon Jul 03, 2017

23 Aug 2017

Go to CSS editor in Forms Designer, it's right next to Javascipt editor, and insert following code:

Code: Select all

.thumbnail{
	display: block;
	width: 50%;
	height: 50%;
}
Use class from <img> tag in your Javascript code, in my example it is thumbnail.

You can use % or px to give values to image's width and height. You can read more about CSS for images here - https://www.w3schools.com/css/css3_images.asp
Cheers

armstrob
Posts: 4
Joined: Wed Aug 23, 2017

23 Aug 2017

Thank you so much Nikita, a lot to learn but enjoying every minute of it. Fantastic product.

Locked
  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests