Widget:HouseTile

Loading image...

Some quick example text to build on the card title and make up the bulk of the card's content.

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

<script> 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
       if (firstImageTitle) {
           // Construct the URL to display the image
           var imageUrl = "https://wb.manorhouses.tibwiki.io/wiki/Special:FilePath/" + firstImageTitle.replace('File:', );
           document.getElementById("firstImageContainer").innerHTML = '<img src="' + imageUrl + '" alt="First Image" style="max-width:100%;">';
       } else {
           document.getElementById("firstImageContainer").innerHTML = "No image found.";
       }
   })
   .catch(function(error) {
       console.log("Error: " + error);
       document.getElementById("firstImageContainer").innerHTML = "Error retrieving image.";
   });

</script>