360 graden foto’s op Weebly

Ben je op zoek hoe je 360 graden foto's op Weebly kan plaatsen? Dat is betrekkelijk eenvoudig met de software van Webrotate. Deze software hoef jij als webshop eigenaar niet aan te schaffen omdat wij dat al gedaan hebben. Tevens heeft Webrotate een gratis plugin en een uitgebreide installatiehandleiding beschikbaar.

Wij zijn natuurlijk fotografen (en geen software-boeren) maar willen je toch graag met dit artikel uitleggen hoe je deze draaiende afbeeldingen in je webshop kan integreren.

Snel en makkelijk te intergreren!

Een 360 graden foto is de intuïtiefste manier om producten online te laten beleven. Een 360 graden productfoto is ook nog eens zeer onderscheidend op de markt!

Met onze gebruikte viewer zijn de afbeeldingen heel makkelijk op alle bekende platformen te integreren.

"Wij maken niet enkel de foto's, maar leveren ook een website-ready bestand aan.
Makkelijker kunnen wij het niet maken!"
NORBERT
Norbert
fotograaf en eindchef

De gratis plug-in maakt integratie easy-peasy

Wij snappen dat PageSpeed key is!

Wij gebruiken de software van Webrotate om een HTML5 bestand te genereren. Deze software hoef jij niet aan te schaffen, dat hebben wij namelijk al gedaan! Webrotate heeft gratis plugins beschikbaar voor alle bekende webshops en brengt regelmatig updates uit.

Een complete 360 graden foto bestaat uit een aantal foto’s en een viewer. Deze worden in één bestandsmap geleverd. Deze folder krijg je van ons kant en klaar geleverd. De door ons gebruikte viewer geeft een snel resultaat voor webshopbezoekers en werkt in alle bekende browsers. Een ideale keuze dus.

Wil je meer over 360 graden fotografie weten? Neem dan een kijkje op onze speciale bladzijde over 360 gradenfotografie.

360 graden foto’s op Weebly

Dit is in het kort hoe het werkt

Weebly staat het uploaden van mappen met 360-productafbeeldingen naar hun hosting niet toe, dus een apart webhosting account is vereist. Je kunt bijvoorbeeld een bestaande website gebruiken die al buiten Weebly wordt gehost, een extra hosting account instellen of onze geoptimaliseerde PixRiot-service overwegen. 

Snelle integratie met een iFrame

Voor een snelle integratie in ‘YouTube-stijl’ met iFrame, raadpleeg je onze gebruikershandleiding onder Webintegratie -> Insluiten via iFrame. Als dit goed voor je werkt, kun je de rest van het bericht negeren.

Dit artikel is uit het Engels vertaald. De Engelse versie is via deze link te raadplegen.

Goed om te weten; de genoemde 360 viewer is met onze licentie kosteloos en onbeperkt te gebruiken.

Belangrijk om te weten!

Weebly staat het uploaden van mappen met 360-productafbeeldingen naar hun hosting niet toe, dus een apart webhosting account is vereist. Je kunt bijvoorbeeld een bestaande website gebruiken die al buiten Weebly wordt gehost, een extra hosting account instellen of onze geoptimaliseerde PixRiot-service overwegen. 

Snelle integratie met een iFrame

Voor een snelle integratie in ‘YouTube-stijl’ met iFrame, raadpleeg je onze gebruikershandleiding onder Webintegratie -> Insluiten via iFrame. Als dit goed voor je werkt, kun je de rest van het bericht negeren.

Echte intergratie met onze plugin

1. Upload de bestanden

Upload met een FTP applicatie de inhoud van de 360_assets-map naar je webhosting. 

let op: Weebly staat het uploaden van mappen met 360-productafbeeldingen naar hun hosting niet toe, dus een apart webhosting account is vereist.

2. Noteer de URL

Noteer (kopieer/plak) na het uploaden de locatie van het xml-bestand in de geüploade map (bijvoorbeeld http://my-domain.com/360-views/my-product/my-product.xml). Je hebt deze URL nodig voor de volgende stappen.

Voor het testen kun je ook de onderstaande link gebruiken: https://cdn.webrotate360.com/examples/3.6/sampleshoe/config.xml<code\>

3. Log in

Log in op Weebly en ga naar Instellingen -> SEO

4. plak regels

Plak de regels onder Voettekst Code en klik op Opslaan.

Voor het testen kun je ook de onderstaande instellingen gebruiken:

<script src="https://cdn.webrotate360.com/lib/jquery/jquery.js"></script><script src="https://cdn.webrotate360.com/lib/imagerotator/latest/js/imagerotator.js"></script>

5. Instellingen sluiten

Sluit de Instellingen en open een Weebly-pagina uit waar je je 360-productrotatie wilt toevoegen.

6. Build selecteren

Selecteer Build en sleep de insluitcode-widget naar je pagina indien nodig..

7. Bewerkingsmodus openen

Klik op de insluitcode-widget die je zojuist op je pagina hebt geplaatst om de bewerkingsmodus te openen en plak het volgende fragment, waarbij je de URL naast “xmlfile” vervangt door de URL die je in de vorige stap hebt geüpload of de voorbeeld-URL die wordt getoond in stap 4.

8. Wijzig de waarden van de lay-out

Wijzig de waarden voor breedte en hoogte indien nodig.

Voor het testen kun je ook onderstaande paramaters gebruiken:

<div class="wr360embed-cdl" style="width: 100%; height: 600px;" data-imagerotator="{&quot;xmlfile&quot;:&quot;http://your-config-url.xml&quot;}"></div>

Er zijn enkele opties die je in de laatste stap kunt configureren. Hieronder zie je een voorbeeld met alle beschikbare opties:

<div class="wr360embed-cdl" style="width:100%;height:600px;" data-imagerotator='{ "xmlfile":"http://your-config-url.xml", "graphics": "https://cdn.webrotate360.com/lib/imagerotator/graphics", "basewidth": 1024, "minheight": 400 "events": true, "name": "my-view", "rootpath": "http://my-cdn-for-images.com/product1/", "onready": your-javascript-callback}'> </div>

overige details en instellingen

Hier zijn meer details over elke opties:

basiswidth
breedte in pixels die je kunt instellen om het kijkvenster niet alleen horizontaal te laten schalen, wat standaard werkt als een bovenliggende container een relatieve breedte heeft, maar ook verticaal. Het vertegenwoordigt gewoonlijk je standaard viewer breedte in de paginalay-out voordat een responsieve schaal wordt toegepast. Wanneer het is ingesteld, wordt de hoogte van de kijker automatisch geschaald ten opzichte van de geschaalde breedte.

minheight
als basewidth is opgegeven, vertegenwoordigt deze instelling de minimum viewer-hoogte in pixels. Dit kan handig zijn op kleine beeldschermen waar je misschien niet wilt dat de kijker een bepaald minimum overschrijdt.

events
stel dit in op true als Google Analytics op je website is geïntegreerd en je de gebruikersbetrokkenheid met uw 3D-product weergaven wilt volgen volgens dit recente artikel op onze blog.

name
indien opgegeven, wordt deze naam weergegeven in het bijhouden van gebeurtenissen in Google Analytics, zodat je de gebeurtenissen op elke weergave kunt sorteren.

rootpath
als je afbeeldingen host op een CDN-server of als je één xml-configuratie nodig heeft voor al je 360-weergaven, kun je de afbeeldingslocatie configureren met behulp van dit pad.

norbert-tomas

Waar kunnen wij je verder mee helpen?


Wij vinden het fotograferen van producten echt heel erg leuk en gaan graag voor je aan de slag.

Wil je meer weten over ons aanbod in productfotografie weten? Neem dan eens kijkje op onze speciale bladzijde over packshots of juist 360 graden productfotografie.

Natuurlijk mag je ook direct contact met ons opnemen of een mail sturen naar [email protected]

Scroll to Top