MediaWiki:SearchThumbnails.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

//Adds search thumbnails
//Replicating https://www.mediawiki.org/wiki/Extension:SearchThumbs
//From https://dev.miraheze.org/w/index.php?title=User:Stackd/stackdenhancements.js&action=raw&ctype=text/javascript'
// Credits to stackd


// Adds images before each search result on Special:Search
(function () {
  $(document).ready(function () {
    if (mw.config.get("wgCanonicalSpecialPageName") !== "Search") {
      // Only run on Special:Search
      return;
    }

    var searchResultTitles = new Map();

    // Collect search result titles and their corresponding <li> elements
    $(".mw-search-result-heading").each(function () {
      var $heading = $(this);
      var $link = $heading.find("a").first();

      if ($link.length) {
        var title = $link.attr("title");
        if (title) {
          var $resultItem = $heading.closest("li.mw-search-result");
          if ($resultItem.length) {
            searchResultTitles.set(title, $resultItem);
          }
        }
      }
    });

    var titles = Array.from(searchResultTitles.keys());
    if (titles.length === 0) return;

    // Fetch page images from the API
    var api = new mw.Api();
    api
      .get({
        action: "query",
        format: "json",
        formatversion: 2,
        prop: "pageimages",
        piprop: "thumbnail",
        pithumbsize: 500,
        titles: titles.join("|"),
      })
      .done(function (data) {
        if (!data.query || !data.query.pages) {
          return;
        }

        // Iterate over results and add images
        data.query.pages.forEach(function (page) {
          var title = page.title;
          var thumbnail = page.thumbnail;

          if (searchResultTitles.has(title)) {
            var $resultItem = searchResultTitles.get(title);

            if (thumbnail) {
              var $img = $("<img>")
                .attr("src", thumbnail.source)
                // .attr("width", thumbnail.width)
                // .attr("height", thumbnail.height)
                .attr("loading", "lazy")
                .attr("class", "search-result-thumbnail-image");

              // Insert the image at the beginning of the search result item
              $resultItem.prepend($img);
            } else {
              // Optional: Add a fallback image here if needed
              // None used rn (enews)
              var $fart = $("<div>")
            	  .attr("class", "search-result-no-thumbnail-image");
            	  
              $resultItem.prepend($fart);
            }
          }
        });
      });
  });
})();