Screenshots af websites i WordPress
Her kommer en lille guide til hvordan du arbejder med screenshots af websites i WordPress. (Kan også bruges på andre sites).
Har du sommetider behov for at vise et screenshot af et website, så er her en nem måde at gøre det på. Det kan være et website der viser anmeldelser, et linkkatalog eller lignende hvor man gerne vil vise et billede af et website.
WordPress har en service som automatisk kan vise et screenshot, så du ikke behøver at lave et print screen og klippe/klistre i Photoshop.
<img alt="" src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.larsbachmann.dk?w=400" />
ovenstående kode viser et screenshot af denne blog med en bredde på 400px. Parameteren w= bestemmer bredden på billedet.
Bruger du WordPress, og har du ofte brug for at vise et screenshot, så kan du med fordel lave en shortcode, så du nemt kan indsætte et screenshot.
function myScreenshot($atts, $content = null) {
extract(shortcode_atts(array(
"width" => 'width'
), $atts));
return '<img src="http://s.wordpress.com/mshots/v1/http%3A%2F%2F'.$content.'?w=' . esc_attr($width) . '" />';
}
add_shortcode("screenshot", "myScreenshot");
ovenstående kode indsætter du i functions.php som du finder i din tema mappe (husk at tage backup først.). Er du ikke meget for at rode med koden selv, så scroll lidt længere ned og download det hele som et plugin. Nemmere bliver det ikke.
Og så er det bare at indsætte:
[screenshot width=400]www.larsbachmann.dk[/screenshot]
der hvor du gerne vil vise et screenshot af et website.
Her kan du teste screenshots af din egen side: https://www.larsbachmann.dk/wp-screenshots
WP-screenshot plugin
Er du typen der ikke bryder dig om at rode med koden selv, så har jeg lavet funktionen som et plugin.
Download [wp-screenshot] fra WordPress.org og upload til din plugin mappe, og aktiver.
Nu skal du blot tilføje en shortcode der hvor du vil vise et screenshot. Du skal bruge en URL og en “width”.
Ex:
[screenshot width=500]www.wordpress.org[/screenshot]
Smart – Tak for det!
Det er bare skide smart – super!
Genialt. Gemmer den så screenshottet eller bliver der hentet et nyt hver gang siden kaldes? Ovre på dit test link er den nemlig ret langsom til at hente screenshottet…
Nikolaj og Morten: Tak og velbekomme
Jacob: Den gemmer screenshot’et i en periode. Ved dog ikke hvor længe, men jeg synes det er rimelig opdateret deres screenshots.
Har iøvrigt lige opdateret indlægget med en ekstra funktion, samt lavet det som et plugin, til dem der ikke vil rode med koden.
Lars: Okay, der er ikke mulighed for at styre hvor længe den gemmer det?
Nope. Så skal du selv lave noget caching på billedet?
Men når først billedet er genereret, så loader det hurtigt synes jeg, så jeg oplever ikke problemer med det.
Super smart har allerede brugt det, havde dog nogle problemer med at det tog lang tid før billedet bliver genereret. Men det ser ud til at virke fint nu.
Så er “WP-Screenshot” tilføjet til WordPress.org som et officielt plugin.
http://wordpress.org/extend/plugins/wp-screenshot/
Okay, det er fandme smart! Tak for det! 🙂
Super fedt plugin. Super anvendelige til mange forskellige formål.
Super smart! Vidste ikke det var SÅ nemt!
Og med dit plugin, kan det jo ikke gøres nemmere;-)
TAK!:-)
Skidesmart, mange tak! 🙂
Pluginnet driller på mit site. Kommer med et 404 ikon: http://www.renefrederiksen.dk/blog-2/rejsebeskrivelser-og-blogs-om-usa/
Nogen idéer?
Hej René
Jeg tjekkede lige det ene 404 billede og det ser ud til at du har http:// med 2 gange?
Det ser ud til at du har brugt [screenshot..]http://adresse.dk..[/screenshot]
Men du skal blot bruge [screenshot..]adresse.dk[/screenshot] (altså uden http)
Så virker det. Tak!
Det var godt. Velbekomme
Hej Lars
Jeg får blot en hvid firkant, hvis jeg prøver at linke til http://www.visuell.dk – hvis jeg fra visuell.dk linker til visivi.dk, ja så virker det fint? Hvor kan jeg gøre noget?
Hej Espen. Det kan tyde på at du har “http://” i linket? Prøv lige at tjekke det, eller smid en kommentar med et link til siden hvor det går galt?
Hej Igen 🙂 fandt selv ud af hvor det er galt, og de linker til http://www.visuell.dk men domænet er sat til at køre uden www. Så fjern www foran så skulle det virke.
Hej Lars – Tak for det hurtige svar. Jeg har ikke http:// i koden på http://visivi.dk/fotografering/ , blot “[screenshot width=400]www.visuell.dk[/screenshot]”.
Det mærkelige er, at fra visuell.dk virker det fint med at hente screenshot fra visivi.dk. Min mistanke er, at det må være “et-eller-andet” i opsætningen på visuell.dk, der gør knuder?
Jeg prøvede lige at fjerne www – nu er der blot den berømte hvide firkant. Det er meget sært.
Hej Espen. Det har noget at gøre med hvordan dit site det loader. Problemet er at screenshot’et af din forside er hvid/blankt
Kilde: https://www.larsbachmann.dk/wp-screenshots?www=visuell.dk
Tester jeg f.eks. med din kontaktside, så virker det bedre
Kilde: https://www.larsbachmann.dk/wp-screenshots?www=visuell.dk%2Fkontakt-2%2F
Så der er desværre ikke umiddelbart noget at gøre ved det.
Hej Lars
Ja, det anede mig, at visuell.dk var selve problemet her; det har sikkert noget med selve galleriet der at gøre. Jeg vil lige påpege, at jeg ikke mistænkte dit fine plugin på noget tidspunkt, men tænkte at du måske fandt problemet “interessant” som udvikler 😉 Oh well, jeg laver bare et godt gammeldags screendump. Tak for indsatsen! 🙂
Hey Lars,
Great plugin – I really love it! I was wondering if you could help me out placing text next to the screenshot. I am currently creating lots of white space, therefore I would like to have text floating right next to the image. I tried different things but nothing worked.
You find an example here: http://www.gegen-langeweile.org/fotoposter-bestellen/