Displaying attached images in Display Form

[smithme]

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?

[Nikita Kurguzov]

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.

[smithme]

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.

[armstrob]

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

[Nikita Kurguzov]

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 (31.08 KiB) Viewed 4434 times

[armstrob]

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?

[Nikita Kurguzov]

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

[armstrob]

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