Easy Image upload and display

[gaj]

Hi,

I want to provide a "easy" (drag/drop) way to upload a product-image and display this image on a product-display-form.
I started with an SPO-picture library (for manual upload) and a picture column in the product list where to edit the picture-URL manually.
I added a HTML-field on the product-display form and added this:
<img src="{@Product_x0020_Picture}" width="468" height="220" />
Is there a way to add a "renditionsparameter"-URL-paramter (?RenditionID=3) programmatically to the img src-URL because if i use "width" and "height" the picture will be strached (uploaded pictures have diff. resolutions).
Sorry about this question I´m not a web-guru!!!
Is it possible to use related Items with a SPO-picture-lib (one to one relationship) for the product-image to implement a drag/drop functionality?

Thanks again for your perfect support
Johannes

[Nikita Kurguzov]

Dear Johannes,
First, I highly recommend following this instruction to bind uploaded picture to the current item - https://spform.com/documentation/related-documents

Next, you'll need to add an HTML control to the form where you want to see the picture appear with the following content:

Code: Select all

<div id="pictures"></div>

If you followed the instruction for Related Documents, the following code should work to display uploaded picture, just add it to JS editor on the form:

Code: Select all

//show image if it's already uploaded
showImage();

//show image when new image is added
fd.updateDroppedDocuments($('.related-pics'), function(listItem) {
	showImage();
});

function showImage(){
	if(fd.relatedItems(0).data('ctx').ListData.Row.length > 0){
		var domain = 'https://sharikov.sharepoint.com';
		var url = fd.relatedItems(0).data('ctx').ListData.Row[0].FileRef
		var $img=$("<img />",{"src": domain + url});
		$('#pictures').html($img);
	}
	else{
		$('#pictures').html('');
	}
}

This code will only work for one picture, but it could be scaled for multiple pictures, just let me know if you need it!

[Wikus]

Thank you for this Nikita.

I have managed to link and display the image perfectly.

I have however 1 issue where I have to have the library and the html field on the same form. The library shows a preview of the image too.
I have tried to move the library into a tab control, however then the image stops displaying. I am also unable to set the library to hidden on the display form.

Please see attachment for example.

Any suggestions or recommendations on how to either remove the preview or (my preference) how to have the image displayed where the library sits in a tab control?

Thank you in advance.

[Nikita Kurguzov]

Dear Johannes,
To hide the Preview, you can go to the Document Library where you store images and create a new view (or modify the existing one) and deselect the Preview column from being displayed:

CreateOrModifyLibraryView.png (8.21 KiB) Viewed 2496 times

Then, you can select the appropriate view on the form, if you select Related Items and click Data Source property:

Data Source.png (5.41 KiB) Viewed 2496 times

As for your other request, it also should be doable. Do you want to display the image in place of Related Documents and hide the Related Documents? It's tricky to do, because Tabs also hide their content, so Tab control scripts can interfere with the script that I wrote.

[Wikus]

Thanks Nikita,
I basically didnt want the library in sight when there is already an image displayed.
I will however just pop the library into a grid and remove the preview.

Thanks again for your assistance.