XF 2.2 Embed Komoot route via BB Code

[darkeye]

I run a cycling tour forum, and links to Komoot tours are posted daily. I would like to embed this tour route via iFrame. I've seen on other forums (not Xenforo) that this is possible.

Can someone tell me what code I need to enter in these two fields on admin.php?bb-code-media-sites/

 

[Gemma]

Can someone tell me what code I need to enter in these two fields on admin.php?bb-code-media-sites/

I've got a Komoot bb code on my website. I'm sure you could do something similar for the German site.

Added via Custom BB Codes

• BB code tag: komoot
• Title: Komoot
• Description: Embed a Komoot route using its tour ID.
• Replacement mode: Simple
• Supports option parameter: No
• HTML replacement:
• <iframe src="https://www.komoot.com/tour/{text}/embed?profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe>
• Example usage: [komoot]586819011[/komoot]

You can switch between the route and gallery, and you can remove the altitude profile by amending the bb code embed, changing embed?profile=1 to embed?profile=0.

There is maybe a better way of doing it but this works for me.

 

[darkeye]

Hello, thank you for the reply!

I've tested it now, and it works if I post this: [komoot]586819011[/komoot]

However, most users post the URL to a Komoot tour. Is there a way to automatically change the URL to an iFrame? The URL looks like this:

https://www.komoot.com/de-de/tour/123456789

Is this possible?

Best regards

 

[chillibear]

You want to add a BB code media site so similar to the media embeds for YouTube, Twitter and so forth. The screen shot you posted is totally correct, so you're on the right path. You can look at a few of the other media sites to get an idea of how they work. In your case (not being familiar with the cycling site in question so caveat emptor and all) I'd say you want something like:

match URLs:

https://www.komoot.com/tour/{id}
https://www.komoot.com/de-de/tour/{id}

Embed template:

<div class="bbMediaWrapper" data-media-site-id="{$siteId}" data-media-key="{$id}">
    <div class="bbMediaWrapper-inner">
    <iframe src="https://www.komoot.com/tour/{$id}/embed?profile=1" 
            width="100%" 
            height="700" 
            frameborder="0" 
            scrolling="no"></iframe>
    </div>
</div>

So you'd have something like this:



You'll no doubt want to tweak the iframe options to suit and I would guess the de-de is a language setting so that might either need further options or maybe a wildcard matching (you can do much more advanced matches by regular express in the advanced options section if needed). I've chosen to wrap the iframe in XenForo's standard media divs for consistency, but you can use whatever code makes the best sense for your site.