Wikipedia BB code media site

[Walter]

Walter submitted a new resource:

Wikipedia BB code media site - Integrate Wikipedia (or other sites) as a BB code media site

It is very simple to integrate a site like Wikipedia in a forum post. In Xenforo this works just like Youtube - a user inserts a link in a forum post and this is automatically transformed.

Step by step instructions:

1. In the admin control panel go to"BB Code Media Sites" and click on "Add BB Code Media Site"
2. Media Site ID: wikipedia
3. Site Title: Wikipedia
4. Site URL: http://en.wikipedia.org
5. Match URLs:

   en.wikipedia.org/wiki/{$id}

6. Embed HTML:...

Read more about this resource...

 

[Janmaat]

This is awesome

But is this legal (especially in Germany) and corresponding to Wikipedia's terms of use?

Is it possible to create one media site entry for both en.wikipedia and de.wikipedia? Or do I have to create a media site entry for each site?

@Walter

 

[DRE]

This looks pretty cool. Question though... why include the sidebar since it's not related to the article?

 

[Scharesoft]

This looks pretty cool. Question though... why include the sidebar since it's not related to the article?

If you want to disable the sidebar, you could maybe use the printable version of wikipedia.

Instead of

<iframe src="http://en.wikipedia.org/wiki/{$id}" scrolling="yes" frameBorder="0" height="350" width="900"></iframe>

you could use

<iframe src="http://en.wikipedia.org/w/index.php?title={$id}&printable=yes" scrolling="yes" frameBorder="0" height="350" width="900"></iframe>

 

[Lindal_Oronar]

Thanks for this, is it possible to set the height to automatically?

 

[Axel B]

@Lindal_Oronar you can use % instead of px, so yes. I don't think it is wise to do this because it will blow up your forum if the wiki page is very long. Just my 2 cents See example below for a width="100%".

Some tips for the general population:

If you wrap <figure> tag (HTML5) around the iframe you can easily put a caption below the iFrame. I also changed the border so it is easier to identify the iFrame.

<figure>
<iframe src="https://nl.wikipedia.org/w/index.php?title={$id}&printable=yes" scrolling="yes" style="border:1px solid grey" height="400" width="100%"></iframe>
  <figcaption><a href='https://nl.wikipedia.org/wiki/{$id}'>Wikipedia NL: {$id}</a></figcaption>
</figure>

You can now change the caption with CSS like the example below. Just paste it in your extra.css.

figcaption {
    font-size: 10px;
    text-align: right;
    }

 

[Lindal_Oronar]

@Lindal_Oronar you can use % instead of px, so yes. I don't think it is wise to do this because it will blow up your forum if the wiki page is very long. Just my 2 cents See example below for a width="100%".

Some tips for the general population:

If you wrap <figure> tag (HTML5) around the iframe you can easily put a caption below the iFrame. I also changed the border so it is easier to identify the iFrame.

<figure>
<iframe src="https://nl.wikipedia.org/w/index.php?title={$id}&printable=yes" scrolling="yes" style="border:1px solid grey" height="400" width="100%"></iframe>
  <figcaption><a href='https://nl.wikipedia.org/wiki/{$id}'>Wikipedia NL: {$id}</a></figcaption>
</figure>

You can now change the caption with CSS like the example below. Just paste it in your extra.css.

figcaption {
    font-size: 10px;
    text-align: right;
    }

When i do that I see this:

 

[Axel B]

Correct.

See example below for a width="100%".

So change the code to also change the height to 100% if this is what you want

 

[Lindal_Oronar]

Correct.



So change the code to also change the height to 100% if this is what you want

With the height and width set to 100% we get this :

 

[Axel B]

The syntax is ok, but there is something in UI.X that suppresses the 100%. I tried to find it, but could not figure out where it is in UI.X. Haven't checked the default skin.
You'll need a CSS guru to do this. My capabilities are limited

 

[Lindal_Oronar]

The syntax is ok, but there is something in UI.X that suppresses the 100%. I tried to find it, but could not figure out where it is in UI.X. Haven't checked the default skin.
You'll need a CSS guru to do this. My capabilities are limited

Thank you for your time and help.
@Mike Creuzer or @Jake B. any idea how to fix this?