Jeg har testet ut bedriftsversjonen av Google Site Search hvor man kan få resultatene levert som XML. Det betyr at en har rimelig stor frihet i hvordan søkeresultatene skal presenteres, også trenger man ikke å ha med Google branding (altså Google-logoen), eller reklameannonser. Bakdelen er at det koster minimum 100 bucks pr år.
For nettstedssøk er på mange måter Google Custom Search Enigne (CSE) veldig bra, men kan man vise bilder, eller thumbnails, i søkeresultatene? I utgangspunktet, nei. Den nevnte XML'en inneholder ikke noen direkte referanser til bilder, og en kan ikke på noen måte få den til å gjøre det heller. Men XML'en inneholder jo selvsagt URL'ene til de forskjellige treffene - og det er i utganspunktet alt en trenger.
Måten jeg har løst bildevisningen på er å ta fatt i alle URL'er returnert fra Google for så å sjekke hvorvidt de inneholder en "content key", eller innholdsnøkkel. Det vises kun bilder for treff som peker direkte til et blogginnlegg, og ikke de som peker til diverse andre sider. Om nøkkelen finnes hektes den på en systemside-URL som hentes vha Ajax/jQuery for hvert av resultatene.
Systemsiden i seg selv er egentlig bare et HTML-fragment som i enkelte tilfeller inneholder et bilde - og dette settes da inn i riktig treff i søkeresultatlista. Om en har såkalte pene URL'er uten ID'er og Nøkler kan en for eksempel heller hekte på en parameter ala ?åpne-meg-i-ajax-mode=true som kan brukes til å åpne lettvektsversjoner av de ulike sidene for så å lete etter eventuelle bilder der.
jQuery to the rescue - igjen
Ajax er en lek med jQuery, og det å løse bildeproblemet blir da veldig enkelt. Her er all kode som skal til:
// Google site search images
$("ul.cse-hits li[class *= 'imgurl-']").each(function(){
hit = $('span.cse-abstract', this);
thisImg = $(this).attr('class').split('imgurl-')[1];
$.ajax ( {
async: false,
url: googleImagesFeed + "&key=" + thisImg,
cache: true,
success: function(html){ $(hit).before(html); }
});
});
Alle <li>'er som inneholder en lenke som peker til en innholdsside har fått påsatt klassenavn som begynner med "imgurl-" etterfulgt av en ID / nøkkel.
Async er satt til false, og det er viktig. Om en fyrer av 10-20 Ajax-kall på rappen risikerer man at kall nr 20 er ferdig før kall nr 10 - og en har da ingen kontroll på hvor bildene havner. Bildet til treff A kan havne i treff E osv. Bakdelen med å gjøre det slik er at trege (eller mange) ajax-forespørsler kan "låse" nettleseren mens de kjører. Det er jo da et poeng å kjøre så få som mulig, samt å ikke hente opp tunge sider. Og det er med tanke på akkurat det at kun relevante lenker sjekkes, at cache er på, og at det her kun hentes et lite HTML-fragment med et lite, nedskalert bilde pr søkeresultat.
Test ut søket og gi gjerne tilbakemelding om du syntes dette var nyttig, unyttig, eller om du har forslag til andre smarte måter å løse det på. :)
Det finnes 0 kommentarer