I got this image url
https://images.lvrcdn.com/MediumRetina75I/DL1/101_266d32b0-4f23-4cca-b1c2-a8b7bb27dbb0.JPG
I need to enable preview to use it in discord embeds for example, but site hasn't enabled the link preview.
Cause image urls are different from the same website I made a html page with javascript code to display image and preview's metadata taking image url from url parameter eg: my website.html?url=imageurl/name.png.
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
<!-- open graph -->
<!-- Informations -->
<meta property="og:description" content="OPEN_GRAPH_DESCRIPTION" />
<meta property="og:title" content="OPEN_GRAPH_TITLE" />
<meta property="og:type" content="website" />
<meta property="og:url" content="WEBSITE_URL" />
<!-- Image -->
<meta id="meta1" property="og:image" content />
<meta property="og:image:alt" content="Website icon" />
<meta property="og:image:height" content="80" />
<meta id="meta2" property="og:image:secure_url" content/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="80" />
<meta property="og:locale" content="en_GB" />
<!-- ... --->
<script type="text/javascript">
function getParameter(paramName) {
var searchString = window.location.search.substring(1), i, val, params = searchString.split("&");
for ( i = 0; i < params.length; i++) {
val = params[i].split("=");
if (val[0] == paramName) {
return val[1];
}
}
return null;
}
function getUrlData() {
var param = getParameter("ref");
document.getElementsByName("img-area")[0].src = param;
document.getElementById("meta1").setAttribute("content", param);
document.getElementById("meta2").setAttribute("content", param);
}
var ctx = c.getContext("2d");
var img = document.getElementById("preview");
ctx.drawImage(img, 10, 10);
</script>
<title>Preview</title>
</head>
<body style="margin: 0px; background: #0e0e0e; height: 100%" onload="getUrlData()">
<img id = "preview" name="img-area" src style="display: block; margin: auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);" alt="prev">
<canvas id="myCanvas" />
<!-- ... --->
</body>
</html>
If I go to my website link with the image url in parameter it is working well, it displays the image and correct metadata.
But it is still not showing the image in preview, but only the description and titles tag.
How can I show image in the link preview too?
Related
With my code, I made an array for JavaScript to randomly choose an image and display it. But its not showing. Please help.
This is my code currently:
HTML & JS
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://images-na.ssl-images-amazon.com/images/I/41I+vcnXn-L._AC_UL600_SR600,600_.png" />
<title>Noice Game</title>
</head>
<body>
<img id="img1" src="" alt="" />
<button class="foodbtn" onclick="GetImage();" id="imagebtn">
Begin!
</button>
<body>
<html>
<script>
function GetImage()
{
var imagearray= new Array("https://cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte.jpg","https://deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c.jpeg","https://static.toiimg.com/thumb/53099699.cms?width=1200&height=900","https://www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan.jpg");
var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray.length)];
}
$("#img1").attr("src", imagearray[randomimagesrc]);
</script>
<style>
#img1 {
size: 400px;
z-index: 1000;
}
</style>
You need to move $("#img1").attr(...) inside the GetImage() function. Also, since you are accessing a random element in randomimagesrc, there is no need to do imagearray[randomimagesrc] while setting the src.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://images-na.ssl-images-amazon.com/images/I/41I+vcnXn-L._AC_UL600_SR600,600_.png" />
<title>Noice Game</title>
</head>
<body>
<img id="img1" src="" alt="" />
<button class="foodbtn" onclick="GetImage()" id="imagebtn">
Begin!
</button>
<body>
<html>
<script>
function GetImage() {
var imagearray = new Array("https://cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte.jpg", "https://deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c.jpeg", "https://static.toiimg.com/thumb/53099699.cms?width=1200&height=900", "https://www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan.jpg");
var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray.length)];
$("#img1").attr("src", randomimagesrc);
}
</script>
<style>
#img1 {
size: 400px;
z-index: 1000;
}
</style>
You have provided change src sript outside the GetImage() function and when you already have created new variable which is random, then you can use it directly in randomimagesrc
function GetImage()
{
var imagearray= new Array(
"https://cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte.jpg",
"https://deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c.jpeg",
"https://static.toiimg.com/thumb/53099699.cms?width=1200&height=900",
"https://www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan.jpg"
);
var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray.length)];
$("#img1").attr("src", randomimagesrc);
}
#img1 {
size: 400px;
z-index: 1000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img1" src="" alt="" />
<button class="foodbtn" onclick="GetImage();" id="imagebtn">
Begin!
</button>
The problems you had:
You had html lang="en">. You forgot to add an extra < before that code.
Secondly, I think it would be better if the script and style tag were inside the html tag.
I recommend using HTML DOM over jQuery.
Also put the HTML dom inside the function.
Now you're done!
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://images-na.ssl-images-amazon.com/images/I/41I+vcnXn-L._AC_UL600_SR600,600_.png" />
<title>Noice Game</title>
</head>
<body>
<img id="img1" src="" alt="" /> <br>
<button class="foodbtn" onclick="GetImage();" id="imagebtn">
Begin!
</button>
<body>
<script>
function GetImage()
{
var imagearray= new Array("https://cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte.jpg","https://deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c.jpeg","https://static.toiimg.com/thumb/53099699.cms?width=1200&height=900","https://www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan.jpg");
var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray.length)];
document.getElementById('img1').src = randomimagesrc;
}
$("#img1").attr("src", imagearray[randomimagesrc]);
</script>
<style>
#img1 {
size: 400px;
z-index: 1000;
}
</style>
<html>
Here's your new code.
Edit: Forgot to add that you can make the picture fixed size, so you don't need to chase the button.
<style>
img#img1 {
width: 100px;
height: 100px;
}
</style>
I have 3 identical page only a banner changes on the 3 pages in html, I'd like to put in a file js this part of code to have only one function call and that in my js every time I am on such a page he calls me the right banner.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img id="image0" src="page1" />
TEXTE
TEXTE
TEXTE
</body>
<script src ="index.js"></script>
</html>
and Js
const page1 = index.html;
const page2 = euratech.html;
const page3 = eurasanté.html;
function changeImage(element)
{
let changeUrl = element.getElementsByTagName("img").item(0);
let img = changeUrl.getAttribute("src");
if(img === page1)
{
img = "2BOA-305.jpg";
}
if(img === page2)
{
img = "574b5545444ea.jpg";
}
if(img === page3)
{
img = "e233b0f310e17d1d40f1d3d49cb7d5a1.jpg";
}
changeUrl.setAttribute("src", img);
}
I have nothing that throws me I'm afraid of having an error :/
I'm trying to change a picture in a webpage using the tag button and the onclick attribute that call a function that I did in a js document, but it isn't working, this is what a did:
in Javascript:
function store (a,z) {
var pic;
if (a>z) {
pic = "images_weddings/desing_logo-01.jpg";
}else{
pic = "images_weddings/rose1.jpg";
}
document.getElementById('change1').src = pic;
}
and in html:
MATRIMONIOS
<div>
<img src="images_weddings/desing_logo-01.png" id="change1" >
</div>
<button type="button" onclick="store(2,3)">change the image</button>
I change links to images and code works - strange in your code is that in html you have PNG file "desing_logo-01.png" but in js you have JPG file "desing_logo-01.jpg"
function store (a,z) {
var pic;
if (a>z) {
pic = "https://i.ytimg.com/vi/ktlQrO2Sifg/maxresdefault.jpg";
}else{
pic = "https://thechive.files.wordpress.com/2018/03/girls-whose-hotness-just-trumped-cute-89-photos-257.jpg?quality=85&strip=info&w=600";
}
document.getElementById('change1').src = pic;
}
<div>
<button type="button" onclick="store(2,3)">change the image</button>
<img src="https://i.ytimg.com/vi/ktlQrO2Sifg/maxresdefault.jpg" id="change1" >
</div>
Try this code in your lapy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title> </title>
</head>
<body>
<div>
<img src="images_weddings/desing_logo-01.png" id="change1" >
</div>
<button type="button" onclick="store(2,3)">change the image</button>
<script type="text/javascript">
function store (a,z) {
var pic;
if (a>z) {
pic = "images_weddings/desing_logo-01.png";
}else{
pic = "images_weddings/rose1.png";
}
document.getElementById('change1').src = pic;
}
</script>
</body>
I am trying to show picture after choosing it from html form following this code:
http://jsfiddle.net/LvsYc/
and my code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="bootstrap/favicon.ico">
<title>Image Test</title>
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/jquery.min.js"></script>
<link href="bootstrap/signin.css" rel="stylesheet">
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function() {
readURL(this);
});
</script>
</head>
<body>
<div class="container">
<form id="form12" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
But the chosen image is not shown. What am I doing wrong? It looks almost like the example above.
Each time I load a page in Internet Explorer 7 or greater I get the error Object Expected when calling the function below. The script appears right at the bottom of the page before the closing </body> tag. There are no elements with the same name or id.
<script type="text/javascript">
window.onload = show();
</script>
The Javascript function it is attempting to call is
function show() {
obj1
= document.getElementById("container").innerHTML
= '<div style="width: 960px; height: 2000px;"><p>Hello World.<br>Here I am.</p>'
+ '<p>test</p></div>';
}
Why does this error not appear in any of the other browsers?
What do I need to change to resolve the issue?
EDIT 0
If I move the function show into the same block at window.onload, hide() now no longer works.
Javascript code
function show() {
obj1
= document.getElementById("container").innerHTML
= '<div style="width: 960px; height: 2000px;"><p>Hello World.<br>Here I am.</p>'
+ '<p>test</p></div>';
}
function hide() {
obj1 = document.getElementById("container");
if(obj1){
alert("Hi");
obj1.style.display = "none";
obj1.style.visibility = "hidden";
}else{
alert("Cannot find the element with id container.");
}
}
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8" />
<meta http-equiv="content-language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="copyright" content="© 2012" />
<title>takeover</title>
<base href="" />
<link rel="stylesheet" href="" />
<style type="text/css" media="all" />
#container {
position:absolute;
text-align:center;
background-color:#fff;
z-index:9999;
}
</style>
<script type="text/javascript" src="takeover.js"></script>
</head>
<body>
<div>
<div id="container"></div>
<p>qwe</p>
</div>
<script type="text/javascript">
window.onload = show;
</script>
</body>
</html>
EDIT 1
Message that appears when using non-Internet Explorer browsers when placing alert(show) before window.onload
EDIT 2
The message displayed after removing all the white spaces. Again this only works in non-Internet Explorer browsers.
EDIT 3
Tried window.show = function show() and window.hide = function hide() however still get an error in Internet Explorer. The error is show as below.
EDIT 4
Here is the updated code with all the functions in a single file. This does not work in any other browser and I get the error show is undefined.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8" />
<meta http-equiv="content-language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="copyright" content="© 2012" />
<title>takeover</title>
<base href="" />
<link rel="stylesheet" href="" />
<style type="text/css" media="all" />
#container {
position:absolute;
text-align:center;
background-color:#fff;
z-index:9999;
}
</style>
</head>
<body>
<div>
<div id="container"></div>
<p>qwe</p>
</div>
<script type="text/javascript">
alert(show)
window.show = function show() {
obj1 = document.getElementById("container").innerHTML = '<div style="width: 960px; height: 2000px;"><p>Hello World.<br>Here I am.</p><p>test</p></div>';
}
window.hide = function hide() {
obj1 = document.getElementById("container");
if(obj1)
{
alert("Hi");
obj1.style.display = "none";
obj1.style.visibility = "hidden";
}
else
{
alert("Cannot find the element with id container.");
}
}
window.onload = window.show;
</script>
</body>
</html>
This line...
window.onload = show();
Should be this...
window.onload = show;
...because you need to assign the show function itself to window.onload, not its return value from calling it.
Move the <script> block that references container to a point after container is defined:
<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV id="container"></DIV>
<script type="text/javascript">
window.onload = show;
function show() {
obj1 = document.getElementById("container").innerHTML = '<div style="width: 960px; height: 2000px;"><p>Hello World.<br>Here I am.</p>' +
'<p>test</p></div>';
}
</script>
</BODY>
</HTML>
If the <script> block is, for example, inside the <head> then Internet Explorer gives the error:
SCRIPT5007: Unable to set value of the property 'innerHTML': object is null or undefined
on page load.