Matterport + WordPress (& HTML long titles)65
 WGAN ForumFounder & WGAN-TV Podcast Host Atlanta, Georgia |
DanSmigrod private msg quote post Address this user | |
| Do you use Matterport iFrame embed code with a WordPress website? One of our clients would like to embed a 3D Showcase in her WordPress blog, BUT is struggling ... Does she need to install this WordPress iFrame Plugin first? https://wordpress.org/plugins/iframe/ Or, a different Plugin? If a plug-in is not the fix, what questions would you like me to ask her to help solve the puzzle? I've asked for screen grabs of both the HTML view and public facing view (to see what looks wrong). Thanks all for your help! Dan |
||
| Post 1 • IP flag post | ||
Missoula, MT |
rpetersn private msg quote post Address this user | |
| Hi Dan... I make my living building WordPress-based web applications and have embedded the Matterport viewer in several (responsive) sites in the past few months. I'm not sure if your client has a responsive site...but that detail can make a big difference when it comes to getting these embeds to behave on smaller screens. Here are a couple responsive examples: http://missoula3d.com/ http://missoula3d.com/model/vantage-wilma/ http://inhabitmissoula.com/3d-virtual-home-tours/ I typically build out a solution to make it easier on my clients for various embed types, I've found that this resource is a great tool: http://embedresponsively.com/ Your client could just copy the Matterport embed code into the "Generic iFrame" tab and then re-copy the generated code. Pasting this re-generated code into the "TEXT" tab (next to the "VISUAL" tab, near the upper right corner of the WYSIWYG content editor field) when editing a WordPress post should do the trick for both responsive and non-responsive sites. Hope that helps...Ross |
||
| Post 2 • IP flag post | ||
|
WGAN Forum Founder & WGAN-TV Podcast Host Atlanta, Georgia |
DanSmigrod private msg quote post Address this user | |
| Ross, You rock. I love how easy you made this client friendly solution with the embed tool. Plus, love your WordPress examples. Great to know you offer this service. And, thanks for the super-fast reply. Dan |
||
| Post 3 • IP flag post | ||
|
Missoula, MT |
rpetersn private msg quote post Address this user | |
You bet! Glad I could help!  |
||
| Post 4 • IP flag post | ||
|
Bryn private msg quote post Address this user | |
| Ross is the man. We have built a few sites to show good implementations of the matterport viewer/product. Creating the content is one part helping clients use in a meaningful way is the other half of the battle for sales in many situations. Ross has a big advantage as he can provide both. We all should be learning some code and iframe tricks etc. Now anybody doing Java? | ||
| Post 5 • IP flag post | ||
|
Missoula, MT |
rpetersn private msg quote post Address this user | |
| Thx guys! I just re-read my own post here and want to be sure I clarify that I didn't build the site "embedresponsively.com". The way I worded that almost makes it sound like that was the case. I have, however, borrowed from that site heavily when building out tools for my clients to make embedding content easier. The "tools" I build are typically located inside a custom WordPress admin and then auto-generate the needed HTML/CSS to generate whatever embed the client is trying to post (Twitter/Instagram/YouTube & now Matterport!). Anyway...I didn't want to take credit for something I didn't do..as whomever build that solution did a great job. |
||
| Post 6 • IP flag post | ||
|
jessetutt private msg quote post Address this user | |
| I drop in the iframe code into the text tab as well! | ||
| Post 7 • IP flag post | ||
|
WGAN Forum Founder & WGAN-TV Podcast Host Atlanta, Georgia |
DanSmigrod private msg quote post Address this user | |
| How about we all post to this thread, an example of an embed so we (all) can see various ways we are embedding ... Here's a We Get Around blog post example. The embeds are at the bottom of the blog post. We use Squarespace.com (and paste the iFrame code into the insert code box) ... Dan |
||
| Post 8 • IP flag post | ||
|
WGAN Forum Founder & WGAN-TV Podcast Host Atlanta, Georgia |
DanSmigrod private msg quote post Address this user | |
| Good news all ... Our client showed us their HTML and preview this morning. We simply changed: iframe width="853" to iframe width="100%" And, that fixed it. @rpetersn I love this ---> http://embedresponsively.com/ (We did try it and the default height was about 1.5" ... what would you change the height to for responsive ...?) Dan |
||
| Post 9 • IP flag post | ||
|
Missoula, MT |
rpetersn private msg quote post Address this user | |
| Hey guys... Dan, your solution will definitely work for the width...but it will leave the embed viewer at 480px tall ALL the time, regardless of device size. On a phone in landscape mode, it has the potential to still be taller than your viewport. Also, I'm not sure why your embed would have ended up smaller, height-wise than what I've demonstrated below in my URL. Can you send/post a link to an example where the "default height was about 1.5"? I've also found that when one embeds more than 1-2 models on a page it can create really dramatic load times, as well as slowly responding web pages. I'd recommend not embedding more than 1 or 2 of these suckers at any given URL. Anyway, I've added a little example showing the differences between the stock Matterport Embed and one that can be done using Embed Responsively (http://embedresponsively.com/). http://missoula3d.com/embed-examples/ Do note that WordPress’ WYSIWYG will typically strip out any inline <style> tags if you switch away from “Text” to “Visual” mode (on the stock WYSIWYG content editor) when editing a post. This is certainly not ideal, but can easily be solved with a bit of custom code or admin template. Otherwise, if your theme offers a place to add some custom CSS, you could enter this: .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } And then use this for the Embed Code: (obviously swapping out your own model ID) <div class='embed-container'><iframe width='853' height='480' src='https://my.matterport.com/webgl_player/#model=rQBwr3AHcSu' frameborder='0' allowfullscreen></iframe></div> I realize this is a little "code-heavy" and I apologize. Properly embedding the Matterport viewer (so that it can be seen on phones) is a little tricky. Please feel free to reach out to me if you have questions re: your WordPress specific site(s). |
||
| Post 10 • IP flag post | ||
|
WGAN Forum Founder & WGAN-TV Podcast Host Atlanta, Georgia |
DanSmigrod private msg quote post Address this user | |
| Ross, WOW WOW WOW. Ross @rpetersn been slammed today. Just had enough time to read. Your post deserves a full-reply (and much thanks). I will write this weekend. Thanks, Dan |
||
| Post 11 • IP flag post | ||
|
|
Bryn private msg quote post Address this user | |
| Ross do you know how to break the mobile re-direct? We have not been able to figure that part out. I have some stuff to put in here as well I just need to get the code. | ||
| Post 12 • IP flag post | ||
|
Missoula, MT |
rpetersn private msg quote post Address this user | |
| Hey Bryn...I guess I'm not sure what you mean by "mobile re-direct", can you elaborate? Or, better yet, do you have an example URL you can share? thx..rp | ||
| Post 13 • IP flag post | ||
|
|
Bryn private msg quote post Address this user | |
| Any model you load on a mobile device or ios device I guess to be more accurate redirects to a new window with a matterport url. taking viewers off site. Maybe its not a big deal for everyone but I don't like it. You can try it with any model on a mibile device. Is everyone getting that or just us? I imagine this may be how they will steer people into their matterport app when that is out but my Jedi Force is not strong with such things so I don't know for sure. | ||
| Post 14 • IP flag post | ||
|
Missoula, MT |
rpetersn private msg quote post Address this user | |
| Oh...I get what you mean. I guess technically it does take you out of the current browser window so it can go full screen. It seems to me that it is pretty easy to return (Back Button) and I think this is actually a good thing. I feel like we need every bit of the screen size (on mobile) to be able to actually navigate around a model. Additionally, this is the exact same way YouTube/Vimeo/etc work when you click "Play" inside one of their embeds, on mobile. |
||
| Post 15 • IP flag post | ||
|
WGAN Forum Founder & WGAN-TV Podcast Host Atlanta, Georgia |
DanSmigrod private msg quote post Address this user | |
| Ross @rpetersn thanks again for your detailed notes and example. Simply excellent. Since the Embed Responsively Generic iFrame embed solution is much better than the default Matterport embed code, can you think of any reason that Matterport does not use the Embed Responsively solution? We have already started replacing iFrame embed code on our We Get Around website (starting with the main menu selections.) A lot more 3D Showcases to swap the embed code too. @Bryn Yes. When I click on an embed on our website that uses Ross' solution, I see Matterport on my iPhone 6. I would rather have the embeds resize properly ... We will migrate all our clients' embeds to the Embed Responsively Generic iFrame embed solution. Ross, about the 1.5" depth, I am almost positive that this was caused by us substituting "100" instead of "100%" ... I will confirm this with our client. Ross, thanks again for the before and after examples too. Bryn, thanks for identifying a challenge using the Embed Responsively solution with the Matterport 3D Showcases. Happy Thanksgiving, Dan |
||
| Post 16 • IP flag post | ||
|
|
jessetutt private msg quote post Address this user | |
| Great work Ross! | ||
| Post 17 • IP flag post | ||
|
Missoula, MT |
rpetersn private msg quote post Address this user | |
| Thx guys... Dan, I can't think of any reason why the Matterport crew isn't offering a "responsive" solution for their embeds. They aren't alone either....Instagram's embeds require tons of fiddling to get them to work responsively, along with Facebook, YouTube and Vimeo. Others (like Twitter & Soundcloud) are doing an amazing job of providing slick embed solutions that fully resize. I guess we can only hope that Matterport and the rest will follow suit. In the meantime, we just need to apply these various hacks. |
||
| Post 18 • IP flag post | ||
|
WGAN Forum Founder & WGAN-TV Podcast Host Atlanta, Georgia |
DanSmigrod private msg quote post Address this user | |
| @rpetersn We give you a 'shout-out' at the bottom of this blog post today about Matterport embed code (7 January 2014) BTW, Atlanta is just as cold as Missoula today! Happy New Year, Dan |
||
| Post 19 • IP flag post | ||
|
Missoula, MT |
rpetersn private msg quote post Address this user | |
| Happy New Year to you Dan! Thanks for the shout out too! I trust it has warmed up some in Atlanta by now...not so much here. Thx! Ross |
||
| Post 20 • IP flag post | ||
|
ToddRuhl private msg quote post Address this user | |
| Great information Ross! Really appreciate your coding expertise. | ||
| Post 21 • IP flag post | ||
|
Missoula, MT |
rpetersn private msg quote post Address this user | |
| Thanks Todd! One thing to note (for anyone else following this) is that a LONG title for your model will end up pushing the "3D Showcase" button down on devices with limited width (phones), and sometimes even completely out of the viewable portion of the iframe. This can be remedied by adding a separate media query that includes more padding-bottom for very small devices. Here's a live example: http://flatheadbeaconcreative.com/3d-home-tour/ Here's the code: <style> .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 15px; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { .embed-container { padding-bottom: 100%; } } </style> <div class="embed-container"><iframe width="853" height="480" src="http://my.matterport.com/show/?m=c6G48tCsfs1" frameborder="0" allowfullscreen></iframe></div> Hope that helps! rp |
||
| Post 22 • IP flag post | ||
|
WGAN Forum Founder & WGAN-TV Podcast Host Atlanta, Georgia |
DanSmigrod private msg quote post Address this user | |
| @rpetersn Ross, this is SO helpful! For clarification, should this code be added to ALL iFrame embed code or only models with "x" number of characters? If "x" characters, can that live in the code too? By the way, can you copy and paste our tip/reply/edit above in the Matterport 3D Workshop Show "Wish List" thread? Seems like: a) we all should be following your tip as "best practice" (along with embed responsively tip (above) and Matterport to make this change to the iFrame embed code in 3D Workshop. Best, Dan |
||
| Post 23 • IP flag post | ||
|
Missoula, MT |
rpetersn private msg quote post Address this user | |
| Sorry for the delay in getting back to this thread...was away from the screen for a few days. The challenge here is that there is no way for us (on the embedding end) to programmatically determine how BIG/LONG a title is. The code below should work for almost all cases and you'll just need to replace "REGULAR-MATTERPORT-IFRAME-EMBED-CODE-HERE" with the generated IFRAME code for your model at Matterport. <style> .matterport-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 15px; } .matterport-container iframe, .matterport-container object, .matterport-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { .matterport-container { padding-bottom: 100%; } } </style> <div class="matterport-container"> REGULAR-MATTERPORT-IFRAME-EMBED-CODE-HERE </div> ******* NOTE / DISCLAIMER ******** A better solution to all of this is to store specific styles globally in your site's CSS: .matterport-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 15px; } .matterport-container iframe, .matterport-container object, .matterport-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { .matterport-container { padding-bottom: 100%; } } Then...all you'd have to do is wrap the Matterport IFRAME with this specific <div>: <div class="matterport-container"> REGULAR-MATTERPORT-IFRAME-EMBED-CODE-HERE </div> |
||
| Post 24 • IP flag post | ||
|
WGAN Forum Founder & WGAN-TV Podcast Host Atlanta, Georgia |
DanSmigrod private msg quote post Address this user | |
@rpetersn You are a rock star! I  you!  Dan |
||
| Post 25 • IP flag post | ||
|
cornerstone private msg quote post Address this user | |
| @rpetersn Thank you for your info on this fourm. I am trying to post a matterport model to wordpress and have followed your instructions above. Only the embed code is showing up when I preview. I would love any help. Thanks | ||
| Post 26 • IP flag post | ||
|
alx3D private msg quote post Address this user | |
| Make sure you are in the text section rather than the visual section. | ||
| Post 27 • IP flag post | ||
|
|
cornerstone private msg quote post Address this user | |
| I am in the Text section and I am using the Generic iFrame Embed code from embedresponsively.com. I have also tried using the embed directly from matterport?? | ||
| Post 28 • IP flag post | ||
|
Missoula, MT |
rpetersn private msg quote post Address this user | |
| Hi cornerstone....it does sound like the code isn't properly being added to the "Text" (HTML) section of the WordPress editor. Do you have a link you can share? | ||
| Post 29 • IP flag post | ||
Orange, California |
craigsauer private msg quote post Address this user | |
| I just found and caught up with this thread that I'd missed before. I saw the first post but since it dealt with WordPress I didn't follow it any further. Great stuff here! Craig |
||
| Post 30 • IP flag post | ||
This topic is archived. Start new topic?