Easy Image upload and display
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
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
- Posts: 889
- Joined: Mon Jul 03, 2017
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:
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:
This code will only work for one picture, but it could be scaled for multiple pictures, just let me know if you need it!
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>
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('');
}
}
Cheers
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.
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.
- Attachments
-
- Example.jpg (168.35 KiB) Viewed 2505 times
- Nikita Kurguzov
- Posts: 889
- Joined: Mon Jul 03, 2017
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: Then, you can select the appropriate view on the form, if you select Related Items and click Data Source property: 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.
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: Then, you can select the appropriate view on the form, if you select Related Items and click Data Source property: 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.
Cheers
-
- Information
-
Who is online
Users browsing this forum: No registered users and 15 guests