De populariteit van 360 graden panorama foto’s wordt steeds groter en bereikbaarder qua prijs. Maar hoe integreer je deze beelden in de WordPress website?

Er zijn een aantal gratis plugins voor WordPress die dit kunnen verzorgen. Deze transformeren het “fisheye” beeld (zie hieronder) naar een vlakke foto die 360 graden bewogen kan worden. Op PC’s met de muis (klikken en vasthouden) en op apparaten met een kompas (ipad, iphone en dergelijke) draaien deze als je rond draait met het device.

360-BMW-3-Serie-Interieur-fisheye

Let op! Dit is een preview, geen actieve 360 graden foto.

Panopress plugin
De Panopress plugin vind je hier. Deze sluit keurig aan bij het programma Pano2VR. Pano2VR is een (gratis trial version) bewerkingsprogramma voor 360 Graden foto’s. Helaas is het niet zo ideaal als het klinkt. Panopress werkt keurig alleen het draaien op ipads en iphones werkt niet. Op een PC werkt het uitstekend.

WP VR View plugin
Deze plugin vind je hier. Een veel simpelere plugin. Deze sluit minder aan bij Pano2VR maar laat wel de 360 graden foto draaien op de kompas funktie van IPads en IPhones bijvoorbeeld.

GGPKG Import plugin
Deze plugin vind je hier. Je zou verwachten dat deze plugin, gemaakt door de ontwikkelaars van Pano2VR perfect werkt. Ik moet eerlijk zeggen dat ik binnen 5 minuten het al heb laten vallen. Uiterst onduidelijke plugin waar ik niet de eenvoud in vond die ik mijn klanten zou willen bieden. Ik zal er nog eens een poging toe wagen op een aparte test site maar voorlopig zit ie in “de opslag”.

Hoe gebruik ik Panopress?

Panopress laat het toe om een echte viewer te laten zien. MET de besturingsknoppen die je het in Pano2VR hebt gegeven EN eventuele hotspots die je hebt gemaakt. Net wat meer dus als WP VR View. Maar dat komt met wat extra hindernissen, eigenaardigheden. Als je die weet dan is er mee te werken en met mooier resultaat. Waardevolle tips dus hieronder.
Zodra de plugin is geinstalleerd en geactiveerd kun je al aan de slag. Je kunt eventueel al kijken of veranderen bij Instellingen > Panopress maar dat hoeft niet.
In de balk van de WordPress editor zit nu een extra knopje:
panopress-wordpress-shortcode-buttons
Eerst de werking zoals het hoort te zijn.
Upload de gehele folder die gemaakt is met Pano2VR met FTP naar de wp-content/uploads directory op de server. Laten we als voorbeeld aannemen dat die folder “demo” heet. Open de wordpress editor op de pagina/bericht waar de panorama foto in moet komen. Klik nu het knopje:
panopress-wordpress-shortcode-buttons
Als je hier op klikt opent zich onderstaand venstertje.

Vul de link, URL in naar het (enige) HTML document in “Demo”. Vul een gewenste breedte en hoogte in. Laat de rest voor nu maar even zitten. Klik op Insert (rechtsonder, maar let op opmerking 1),
Save de pagina / het Bericht en bekijk hem. (maar lees eerst opmerking 2)
Je ziet nu de Play button. Als je daar op drukt opent de 360 graden foto zich.

Hier moet ik even wat uitleggen.
Opmerking 1) Je ziet dat de onderste balk met de buttons Cancel en Insert doorzichtig zijn. Dat komt omdat die niet zichtbaar worden! Ik heb gewisseld van theme, alle andere plugins gedeactiveerd maar geen oplossing. Maar als je de laatste hebt ingevuld (Preview) druk dan 2 maal op Tab en Insert wordt wel zichtbaar.
Opmerking 2) Vreemd genoeg gebeurt er niks als je op Insert klikt. De verwachte shortcode duikt niet op. Ook dit is niet te wijten aan conflicten met andere plugins of het theme. Maar toen ik de pagina heropende om bij te werken stond de shortcode er ineens wel. Conclusie: Insert klikken, Publiceren/Bijwerken en dan opnieuw de pagina openen ?
Gewoon met de hand de shortcode opbouwen en in de “Tekst” mode van de editor invullen werkt namelijk ook niet.

Hoe gebruik ik WP VR view ?

De eenvoudigste is WP VR view plugin. Zodra deze plugin geinstalleerd en geactiveerd is krijg je 2 extra knopjes er bij in de WordPress editor.
wp-vr-view-wordpress-shortcode-buttons
De linker is voor het invoegen van foto’s, de rechter voor het invoegen van filmpjes.

Foto uploaden
Upload eerst de 360 graden foto met WordPress via Media > Nieuw Bestand. Als deze ge-upload is en je klikt er op krijg je rechts boven de link naar het bestand te zien. (zie foto) Kopieer deze.
kopieer-link-naar-jpeg-360-foto

Als je op de linker klikt krijg je onderstaand schermpje.
wp-vr-view-invoegen-360-graden-fotoLINK URL. Kopieer hier de link, de URL die je zojuist gekopieerd hebt nat het uploaden.
BREEDTE HOOGTE Geef hier aan welke maten de 360 graden foto op de site moet worden. Dit mag in procenten en in pixels. In dit voorbeeld dus 100% breedte en 500 pixels hoog. Let wel.. zeker op 3G en 4G data verbindingen kan dit een behoorlijke belasting zijn.Houd de maten dus bescheiden.
OPSLAAN EN INVOEGEN. Door op INSERT te klikken wordt de shortcode gegenereerd en in de tekst geplaatst.
Dat is alles. Opslaan en trots het resultaat bekijken!

Nog wat opmerkingen.
Ik heb gemerkt dat WP VR View conflicten gaf met bijvoorbeeld Panopress. Mocht het dus om 1 of andere reden niet werken…. deactiveer dan eerst even alle andere plugins en test het dan weer.

In de schermafbeelding zie je ook een blauw vlakje “Preview image URL”. Plak ook hier weer een link naar een (kleine) foto uit de WordPress Media bibliotheek. Dit zorgt ervoor dat er direct een fotootje zichtbaar is voor de bezoeker. In de tijd dat men die bekijkt wordt de echte 360 garden afbeelding geladen. Is wat vriendelijker.

Het resultaat ziet u op onze test server: demo