Incorpora foto e video a 360 gradi nelle pagine di Wordpress

Istruzioni: Installa VR in Wordpress

Il filmato delle telecamere a 360 gradi è ipnotizzante. Ovviamente vuoi mostrare tali fotografie al resto del mondo. Ma come possono le fotografie a 360 gradi che puoi scattare, ad esempio, con il Insta360 OneX ha fatto in un post Wordpress o in una pagina Wordpress. Spiego esattamente come funziona in questa guida.

Esempio di una foto a 360° che ho scattato con la mia Insta360 One X (Foto: Sir Apfelot).
Esempio di una foto a 360 gradi che ho scattato con il mio Insta360 OneX realizzato (foto: Sir Apfelot).

Una foto come quella mostrata sopra è fondamentalmente il materiale di partenza per un panorama a 360 gradi. Tuttavia, affinché questo non venga visualizzato come un semplice grafico, ma come un'immagine VR che puoi visualizzare con il tuo Mac, iPad o iPhone in modalità VR, è necessario un po' di codice di programmazione, che puoi installare facilmente con un plug-in. Ciò significa che aggiungi solo una scorciatoia nel post e il plug-in lo utilizza per creare il codice appropriato in modo da ottenere la vista VR a 360 gradi nel browser.

Un lettore mi ha scritto che dovrei includere un'immagine a 360 gradi sopra in modo da avere qualcosa da guardare. Eccoci qui:

[dimage url=”https://www.sir-apfelot.de/wp-content/uploads/2019/03/beispiel-360-grad-foto-2.jpg” control=true auto-rotate=false zoom_level=” 0″ anim_speed=”-1″ default-position=”180″ allow_scroll_to_zoom=false ]

Plugin Dimage 360 ​​Conforme al GDPR?

Un lettore oggi mi ha chiesto se il plugin Dimage 360 ​​può essere utilizzato se si vuole conformarsi al GDPR. Teme che i dati possano fluire attraverso l'integrazione a terzi.

Non sono un avvocato, né sono un ricercatore di sicurezza. Per questo motivo, non posso fare qui alcuna dichiarazione giuridicamente vincolante. Tuttavia, quello che vedo nel codice sorgente: l'integrazione non viene eseguita tramite iframe, come lo sai da Youtube, ma viene eseguita localmente sul tuo server.

Viene però chiamato un Javascript, che fa anche parte del plugin, che assume il controllo e la visualizzazione del panorama. In teoria potrebbe essere che i dati vengano inviati a terzi a un certo punto, ma penso che sia relativamente improbabile.

Quale plugin dovrei usare?

Ho trovato vari plugin che aiutano a incorporare un panorama a 360 gradi in Wordpress. Ecco i migliori candidati che ho trovato:

  • Vista WP VR di Aleksandr Tumanov: Sicuramente facile da usare, ma nessuna funzione di zoom e piccoli abbandoni quando lo si utilizza con il mio iPhone. Ultimo aggiornamento 7 mesi fa... Tuttavia, un vantaggio: la modalità VR viene attivata direttamente con il plug-in: ciò significa che i visitatori con un iPad o iPhone possono controllare quale area dell'immagine vogliono vedere direttamente spostando il proprio iPhone/iPad. E c'è un pulsante nell'editor di Wordpress che incorpora lo shortcode, il che è abbastanza comodo.
  • Immagine 360 da D'arteweb: Un po' meno intuitivo durante l'installazione dello shortcode, ma con più funzioni. Il plugin è stato aggiornato l'ultima volta una settimana fa. Quindi qualcuno se ne frega qui. Piccolo svantaggio: qui devi attivare la modalità VR come visualizzatore con un pulsante.
  • PanoPress di Omer Calev e Sam Rohn: Ha funzionato per me su Mac, ma a volte non è stato visualizzato nulla su iPhone. Il plugin non è stato ulteriormente sviluppato per 2 anni, il che non è un buon segno.

La mia raccomandazione o la mia scelta è caduta su quello Plugin immagine 360, poiché è aggiornato e funziona relativamente bene con i miei dispositivi iOS. L'installazione dello shortcode non è una stregoneria e una volta capito, il plugin offre semplicemente la migliore interfaccia utente per il visualizzatore.

Per me era anche importante non usare Flash. Alcuni plugin utilizzano questa vulnerabilità ambulante come visualizzatore per i panorami. Ma non vedo niente del genere sul mio computer. Detto questo, Flash non funziona su nessun dispositivo iOS, il che riguarderebbe un bel po' di persone. Tutti questi motivi combinati mi hanno portato a DImage 360.

A proposito, volutamente non ho elencato nessun servizio web come 360cities.net o Momento360.com, dove devi caricare i tuoi scatti panoramici a 360 gradi per poi integrarli tramite codice. Preferirei ospitare le mie registrazioni da solo e avere un maggiore controllo su ciò che accade loro.

Tutti i plugin cagano con i dispositivi iOS

Ho esaminato vari siti su Internet che utilizzavano plug-in per visualizzare foto a 360 gradi. Nessuno di loro funziona davvero bene con il mio iPhone o iPad. Ma alcuni plugin, come WP-VR-view, fanno cose strane, come quando si esegue lo zoom con un gesto di pizzico, l'immagine scompare completamente o si sposta parzialmente in un angolo.

Di tutte le stranezze che ho trovato, il plug-in DImage 360 ​​è stato quello che ho potuto superare di più. Ciò che non funziona qui per me sono i seguenti punti:

  • Facendo clic sulla casella nell'angolo in basso a destra normalmente si richiama la modalità a schermo intero. Funziona sul mio iPad e Mac, ma sull'iPhone non succede nulla quando clicco lì.
  • Se non sei in modalità VR, puoi muovere il dito avanti e indietro o su e giù nell'immagine. Mentre destra/sinistra funzionano perfettamente, il mio iPad e iPhone vogliono sempre scorrere la pagina quando ci si sposta su e giù, il che è un po' fastidioso.

ATTENZIONE: Se hai installato il plug-in WP-Rocket per la memorizzazione nella cache in WordPress, dovresti impostare le pagine con i panorami su "non memorizzare mai nella cache" perché WP-Rocket sembra violare il codice javascript. L'ho appena notato durante la pubblicazione dell'articolo. :-(

Configurazione e utilizzo di DImage 360

La configurazione del plugin è molto semplice: vai nell'area Plugin > Installa nell'amministratore di Wordpress e inserisci "DImage 360" nella ricerca. Dovresti quindi ricevere il seguente messaggio.

DImage 360 ​​​​Plugin per la visualizzazione di panorami sferici a 360 gradi e video VR in Wordpress.
DImage 360 ​​​​Plugin per la visualizzazione di panorami sferici a 360 gradi e video VR in Wordpress.

La parola in cui ora vedo "Attivo" dovrebbe essere un pulsante "Installa" per te. Lo premi. Quando il plug-in viene caricato, viene visualizzato un pulsante "Attiva", che anch'io premo.

Installazione della registrazione panoramica con uno shortcode

Se il plug-in è attivato, devi prima caricare la foto panoramica nella libreria multimediale di Wordpress. Una volta fatto ciò, abbiamo ancora bisogno dell'"ID allegato" della foto. Questo ID verrà richiesto in seguito nello shortcode che includeremo nel post. Sfortunatamente, WordPress non mostra l'ID dell'allegato nella libreria multimediale. Ma c'è un trucco per tirarli fuori facilmente comunque.

Se richiami la libreria multimediale, c'è un pulsante "Modifica" per ogni immagine. Se passi sopra questo pulsante con il puntatore del mouse, l'URL che verrebbe chiamato appare nella parte inferiore del browser. Anche l'ID viene fornito come numero. Nel mio screenshot puoi vedere come trovarli:

Ecco come scoprire l'ID allegato di una foto nel catalogo multimediale.
Ecco come scoprire l'ID allegato di una foto nel catalogo multimediale.

Se tutto questo vi risulta troppo macchinoso, potete utilizzare anche il plugin “Rivela ID" installare. Questo ti mostrerà quindi gli ID delle foto dopo l'attivazione nella libreria multimediale.

Un'altra alternativa: integrazione con URL anziché ID

Sfortunatamente, ho letto solo ora che puoi anche inserire l'URL della foto invece dell'ID nello shortcode. Questo è ovviamente molto più facile. Ottieni l'URL se fai clic su "Visualizza" accanto alla foto nella libreria multimediale e poi guardi nella riga dell'URL del browser. Puoi copiare e incollare l'indirizzo direttamente nello shortcode.

Ecco come appare lo shortcode

Quindi ecco le due opzioni per lo shortcode, che poi copi nel post:

Esempio dei due codici brevi che possono essere utilizzati per sovrapporre una foto a 360 gradi.
Esempio dei due codici brevi che possono essere utilizzati per sovrapporre una foto a 360 gradi.

Sfortunatamente, ho potuto incorporare lo shortcode solo come elemento grafico, perché non sono riuscito a impedire a Wordpress di convertirlo direttamente nella vista panoramica, poiché anche il plug-in è in esecuzione per me. Se vuoi uno shortcode che può essere recuperato tramite copia e incolla, allora puoi trovare questo qui nella pagina del plugin.

Visualizza con due immagini per Cardboard e occhiali VR. Ci scusiamo per la cattiva risoluzione. L'immagine è effettivamente nitida, ma qualcosa è andato storto con lo screenshot.
Possibile anche con DImage 360: una vista con due immagini per cartoni e occhiali VR. Ci scusiamo per la cattiva risoluzione. L'immagine è effettivamente nitida, ma qualcosa è andato storto con lo screenshot.

Altre opzioni del plugin per lo shortcode

Oltre all'ID o all'URL della fonte della foto, ci sono alcune altre opzioni di impostazione che possono essere utilizzate nello shortcode. Tuttavia, questi sono facoltativi. Lo shortcode funziona anche se inserisci solo l'URL o l'ID.

  • controllo {vero/falso}: Con questa opzione è possibile determinare se i pulsanti di controllo vengono visualizzati o meno. L'impostazione predefinita è: true.
  • rotazione automatica {vero/falso}: Questa opzione determina se l'immagine deve ruotare automaticamente quando viene richiamata. Se imposti "true" qui, puoi impostare la velocità con "anim_speed". L'impostazione predefinita è: true.
  • livello_zoom: Qui puoi utilizzare i valori da 0 a 100 per specificare se l'immagine deve essere ingrandita all'inizio. L'impostazione predefinita è: 0.
  • velocità_anime: Questa impostazione determina la velocità di rotazione del panorama quando la rotazione automatica è attiva. Sono possibili valori da -100 a 100. L'impostazione predefinita è: 2. La mia raccomandazione: -1.
  • posizione di default: Determina quale sezione dell'immagine dovrebbe essere l'inizio. Devi provare qualcosa qui. Non ho potuto determinare se i valori da 0 a 100 o da 0 a 360 sono possibili. L'impostazione predefinita è: 0.
  • allow_scroll_to_zoom {vero/falso}: Questo determina se puoi ingrandire l'immagine sul Mac/PC usando la rotellina. L'impostazione predefinita è: true. La mia raccomandazione: falsa.
Ecco una spiegazione dei controlli presenti sullo smartphone durante la visualizzazione di un'immagine con DImage 360. Ovviamente il controllo del giroscopio non è disponibile sui Mac, ma solo sui dispositivi che dispongono anche di un giroscopio integrato.
Ecco una spiegazione dei controlli presenti sullo smartphone durante la visualizzazione di un'immagine con DImage 360. Ovviamente il controllo del giroscopio non è disponibile sui Mac, ma solo sui dispositivi che dispongono anche di un giroscopio integrato. Un errore nella grafica: il pulsante sinistro non azzera lo zoom.

Aggiornamento: nessuna immagine a 360 gradi nel post del blog

In precedenza avevo utilizzato il plugin Dimage, ma poi mi sono reso conto che avevo solo un'immagine a 360 gradi sul blog. Era un po' troppo per me, perché ogni plugin aumenta il tempo di caricamento dell'intero blog. Quindi ho seguito un corso di austerità e ho rimosso il plugin e con esso questa immagine a 360 gradi. spero che tu non mi biasimi...

Ho inserito le seguenti opzioni nell'esempio sopra:

control=true auto-rotate=true zoom_level=”0″ anim_speed=”-1″ default-position=”180″allow_scroll_to_zoom=true

Con me su Mac e anche su iPhone, lo "scorri per ingrandire" è fastidioso. Per questo motivo, preferirei spegnerlo. Affinché tu possa provarlo, l'ho lasciato attivato sopra.

Nota sui video a 360 gradi

Per i video a 360 gradi, generalmente mi fiderei di YouTube. Con il plug-in "WP-VR-view", i video ospitati localmente con una funzione a 360 gradi possono essere installati anche in Wordpress, ma in pratica risparmi molto traffico e alleggerisci il tuo server se li carichi prima su Youtube e usi il incorpora la funzione Includi in Wordpress. E infine, YouTube offre molte funzionalità tecniche per mostrare a ogni visitatore la clip nella migliore qualità possibile. Ecco perché sto parlando solo delle foto qui.

 

I miei consigli e trucchi sulla tecnologia e su Apple

Ti è piaciuto l'articolo e le istruzioni sul blog ti hanno aiutato? Allora sarei felice se tu il blog tramite un'iscrizione stabile sosterrebbe.

9 risposte a "Incorpora foto e video a 360 gradi nelle pagine Wordpress"

    1. Ciao David! Per i video, l'opzione migliore è in realtà: caricalo su YouTube e poi incorporalo. Non conosco nessun plugin che potrei consigliare.

      1. Spiegare:
        Video: è la videosorveglianza di un nido di calabroni dotato di più telecamere - novità con una telecamera a 360° all'interno del nido. Sarebbe bello se il visitatore potesse rimanere virtualmente virtualmente - hardware = sensori mobotix.

  1. Ciao
    Grazie per la spiegazione, ma non riesco davvero a capirlo, probabilmente a causa della mia età avanzata.
    Forse qualcuno conosce un buon video esplicativo in tedesco. Non riesco nemmeno ad aggiornare alla nuova versione di WP perché non la capisco.
    grazie per l'aiuto

    1. Jen Kleinholz

      Ciao Werner! Basta cercare "aggiorna WordPress" su YouTube e troverai sicuramente una semplice guida tedesca. Non è davvero difficile. Vi auguro il successo!

Scrivi un commento

Il tuo indirizzo e-mail non verrà pubblicato. I campi obbligatori sono contrassegnati con * segnato

Nel blog di Sir Apfelot troverai consigli, istruzioni e recensioni sui prodotti Apple come iPhone, iPad, Apple Watch, AirPods, iMac, Mac Pro, Mac Mini e Mac Studio.

Speciali
Shopping
  •  
  •