CODEWITHSUNDEEP
javascriptreactjswebgatsbysharing
Arun Doss
Arun Doss

Reputation: 65

How to get a small thumbnail of a webpage link inside html

I am planning to show a list of blog post of others as a link on my Gatsby web page. Instead of adding working on adding a image and title into the html I want to extract info from the blog post/web page. Like how WhatsApp gets a small thumbnail in the attached snap: Do i have to extract info from the page or is there a library that can do that for me?

Upvotes: 1

Views: 570

Answers (1)

Sudip Shrestha
Sudip Shrestha

Reputation: 451

If you own those websites, you can allow X-Frame-Options: ALLOW-FROM [uri]. If you don't most sites will not work.

Otherwise, you will have to take a screenshot and keep the image, either manually, or using a scheduled process.

$(document).ready(function() {
  var mouseX;
  var mouseY;
  $(document).mousemove( function(e) {
     mouseX = e.pageX; 
     mouseY = e.pageY;
  });  

  $('a').mouseover(function() {
    console.log('mouse over <a />');
    console.log(this.href);
    $('#previewFrame').attr('src', this.href);
    $('#frameContainer').css({'top':mouseY+20,'left':mouseX+20});
    $('#frameContainer').show();
  });
  
    $('a').mouseout(function() {
    console.log('mouse out of <a />');
    $('#frameContainer').hide();
  });
});
#frameContainer {
    display:none; position: absolute;
    background-color: #ffffff;
    height:1000px;
    width:1000px;
    overflow: hidden;
}

#previewFrame {
  transform-origin: left top;
  -webkit-transform:scale(0.2);
  -moz-transform-scale(0.2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://www.bbc.com">BBC</a> - Works<br/>
<div>Other texts and page content....................<div>
<div>Other texts and page content....................<div>
<div>Other texts and page content....................<div>
<a href="https://www.cnn.com/">CNN</a> - Won't work<br/>
<div>Other texts and page content....................<div>
<div>Other texts and page content....................<div>
<div>Other texts and page content....................<div>
<div>Other texts and page content....................<div>
<a href="https://stackoverflow.com/">stackoverflow</a> - Won't work<br/>
<div>Other texts and page content....................<div>
<div>Other texts and page content....................<div>
<div id='divtest' style='display:none; position: absolute;'>This is a test</div>
<div id="frameContainer">
  <iframe id='previewFrame' width="500" height="500" src="" style="">
  </iframe>
 </div>

Upvotes: 1

Related Questions