Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Ambiguity with Image Input function - quick clarification required


Hi Sean

Quick question re: https://preview.keenthemes.com/html/metronic/docs/?page=forms/image-input

When retrieving a user's image and displaying it, I previously updated the input value with the stored location $(input).val(img.src).

It appears that the Image Input class for Metronic doesn't allow this.

Can you please clarify:

Option1: Is the placeholder div $(".image-input-placeholder") supposed to be used to display a stored image programmatically:
eg. $(".image-input-placeholder").css('backgroud-url' , img.src);
OR
Option2: Is there a function in your class to use the stored user image:
eg.
var imageInputElement = document.querySelector("#kt_image_input_control");
var imageInput = new KTImageInput(imageInputElement);
imageInput.getInputElement(XXXXX); <--- the img.src here???


Sorry - but I'm not clear from your docs how to populate the stored image of a user.

Many thanks


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi Sean

Coo thanks.. I'm still not sure how to use the DOM API imageInput .getInputElement(), but so long as I can just use the $(".image-input-placeholder").css('backgroud-url' , img.src) approach that's all good.

Cheers



Hi,

Please refer to the below code:


var imageInputEl = lease use imageInput .getInputElement();
$(imageInputEl).css("backgroud-url" , img.src);


Regards.



Hi,

To display the stored image you can refer to this example.


$(".image-input-wrapper").css("backgroud-url" , img.src);


To get the input element DOM object please use imageInput .getInputElement()

Regards


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(