Hello,
My new Ghost Blog is going to be focused primarily around 360 photography and I would like to have a way to use a 360 pano for the Publication cover if possible. It doesn’t have to be interactive, just spinning the photo a certain amount left to right is really all that’s needed.
Would anyone know if this is possible in Ghost?
EDIT: I use the default Casper theme btw
This is certainly possible but it would require an edit to the theme.
I also don’t know too much about how 360 photos are loaded or their file formats. Can you say more?
360 photos are just equirectangular jpeg’s. I think it would require some sort of javascript or something for them render in 360, but am not entirely sure.
Thanks for the follow up.
You’ll have to update your theme for this to work, but it should be possible.
Thanks, I figured anything would be possible :D Now hoping someone can help me figure out how I can make it possible :)
What’s the library that you use to render the 360 photos?
The easiest solution would likely be to load the library via Code Injection and target the class of your feature image. If you share the URL of your site and the library, I can share some additional guidance.
I’m not sure how to answer the library question. The equirectangular images come from my 360 camera already stitched in jpeg format. My website is currently password protected (private) while I work on things. Would it be okay to PM you the password and URL?
Thank you!
With library, I meant what code/website/service do you plan on using to make 360s photos work? Are you using a default theme? If you let me know, that will be enough.
I host the 360 photos directly from my site. I’m using the default Casper theme currently.
Great. But you need some kind of additional software to render the 360 photos, I believe, or they’ll just display as distorted images. Which software are you planning to use? Googling suggests panoraven and momento360 are top results, but I don’t have any clue in this regard.
Oh! I use 3DVista! Sorry about that.
I stumbled upon this bit of code that kind of works. I just don’t know how to use it to replace the publication cover.
<div class="html-embed-6 w-embed w-iframe"><iframe class="iframe-fluid" src="https://virtual-tour-page.s3-ap-southeast-2.amazonaws.com/Website+Banner/index.htm" name="" width="100%" height="100%" frameborder="0" allowfullscreen="true" allow="fullscreen; accelerometer; gyroscope; magnetometer; vr"></iframe></div>
You could put that iframe into an HTML card in the editor.
In terms of using the 360 photo as a cover image, you’ll need to see how to incorporate 360vista into your theme or alter the theme accordingly.
Only problem I have with using the iframe in an HTML card is the size it makes it is very small. Not sure how to specify a size.
You can alter the size with CSS or by adding size attributes directly to the iframe element (<iframe width="200" height="200">...</iframe>).
Please help. I can manage to get it to work somewhat, but it’s appearing above the navbar for some reason.
Using this code in my Site Header via Code Injection:
<div class="html-embed-6 w-embed w-iframe"><iframe class="iframe-fluid" src="https://website.com/banner/index.htm" name="Banner" width="100%" height="100%" frameborder="0" allowfullscreen="true" allow="fullscreen; accelerometer; gyroscope; magnetometer; vr"></iframe></div>
Do you have a link to your site? The issue is going to be something to do with CSS (positioning or z-index), but it’ll be hard to diagnose without looking at the code.
Close, I’m trying to get it to take up the space below the navbar. Specifically where the publication photo generally is (I have that disabled currently) I’ll re-enable it to show you.
