Widget:HouseTile

Loading image...

   <a href="" class="btn btn-primary">EXPLORE</a>

<script> document.addEventListener('DOMContentLoaded', function() { var page = "" var card_id = "HouseTile-"+page var url = "https://wb.manorhouses.tibwiki.io/w/api.php";

var params = {

   action: "query",
   prop: "images",
   titles: "",  // Page title whose first image you want to retrieve
   format: "json"

};

url = url + "?origin=*"; Object.keys(params).forEach(function(key) {

   url += "&" + key + "=" + params[key];

});

fetch(url)

   .then(function(response) {
       return response.json();
   })
   .then(function(response) {
       var pages = response.query.pages;
       var firstImageTitle = null;

       // Find the first image title
       for (var page in pages) {
           if (pages[page].images && pages[page].images.length > 0) {
               firstImageTitle = pages[page].images[0].title;
               break;  // Exit loop after getting the first image
           }
       }

       // If a first image is found, display it
      // var card = document.querySelector('.card:not(.processed1)'); 
       var card = document.querySelector('#'+card_id); 
      if (firstImageTitle) {
           // Construct the URL to display the image
           var imageUrl = "https://wb.manorhouses.tibwiki.io/wiki/Special:FilePath/" + firstImageTitle.replace('File:', );
        
          card.querySelector('#imageContainer').innerHTML = '<img src="' + imageUrl + '" alt="First Image" style="max-width:100%;">';
         //document.getElementById("imageContainer").innerHTML = '<img src="' + imageUrl + '" alt="First Image" style="max-width:100%;">';
          card.classList.add('processed1');
       } else {
           document.getElementById("imageContainer").innerHTML = "No image found.";
           card.classList.add('processed1');
       }
   })
   .catch(function(error) {
       console.log("Error: " + error);
       document.getElementById("firstImageContainer").innerHTML = "Error retrieving image.";
        var card = document.querySelector('.card:not(.processed1)'); 
       card.classList.add('processed1');
   });

// now get wikitext from page var params = {

   action: "parse",
   page: "",  
   format: "json"

}; url = "https://wb.manorhouses.tibwiki.io/w/api.php"; url = url + "?origin=*"; Object.keys(params).forEach(function(key) {

   url += "&" + key + "=" + params[key];

}); console.log(url); fetch(url)

   .then(function(response) {
       return response.json();
   })
   .then(function(response) {
       var pagehtml = response.parse.text['*'];
       
       // If a first image is found, display it
        //var card = document.querySelector('.card:not(.processed2)');
        var card = document.querySelector('#'+card_id); 
        if (pagehtml) {
           var tempDiv = document.createElement('div');
           tempDiv.innerHTML = pagehtml;
           var mainTextElement = tempDiv.querySelector('#tileabstract');
           
            if (mainTextElement) {
              var mainTextContent = mainTextElement.textContent;
             
              card.querySelector('#textContainer').innerHTML = mainTextContent.substring(0,250) +"(...)";
              //document.getElementById("textContainer").innerHTML = mainTextContent.substring(0,250) +"(...)";
           } else {
              document.getElementById("textContainer").innerHTML = "No text found.";
          }
    }       
    card.classList.add('processed2');
   })
   .catch(function(error) {
       console.log("Error: " + error);
       document.getElementById("textContainer").innerHTML = "Error retrieving text.";
      card.classList.add('processed2');
   });

});

</script>