1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 Custom BB Code with file extension

Discussion in 'XenForo Questions and Support' started by Jesepi, Jun 4, 2016.

  1. Jesepi

    Jesepi Well-Known Member

    I'm having an issue trying to implement a custom media bbcode to allow folks to directly load animations from the website imgur when the URL ends in .gifv. I am aware there is an add-on that does this - but I do not want to install an add-on to accomplish this.

    I created the following:

    Match URL
    Code:
    i.imgur.com/{$id:alphanum}.gifv
    Embed HTML
    Code:
    <video poster="//i.imgur.com/{$id:alphanum}.jpg" preload="auto" autoplay="autoplay" muted="muted" loop="loop" webkit-playsinline>
                    <source src="//i.imgur.com/{$id:alphanum}.webm" type="video/webm">
                    <source src="//i.imgur.com/{$id:alphanum}.mp4" type="video/mp4">
    </video>
    If I edit the above example to an exact match of a working URL it loads correctly, but when I add the "id" portion it does not load. Looking at the source, it shows {$id:alphanum} instead of the custom part of the url

    What am I missing/doing wrong?

    My example is the following: http://i.imgur.com/viQHrVM.gifv
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  3. Jesepi

    Jesepi Well-Known Member

    The {$id} only in the embed HTML field did it.

    So the end result is:

    Match URL:
    Code:
    http://i.imgur.com/{$id:alphanum}.gifv
    https://i.imgur.com/{$id:alphanum}.gifv
    Embed HTML:
    HTML:
    <video poster="https://i.imgur.com/{$id}.jpg" preload="auto" autoplay="autoplay" muted="muted" loop="loop" webkit-playsinline>
                    <source src="//i.imgur.com/{$id}.webm" type="video/webm">
                    <source src="//i.imgur.com/{$id}.mp4" type="video/mp4">
    </video>
    The above can only handle links to individual images, so I also added the following bb code media match for multi-image albums:

    Match URL:
    Code:
    http://imgur.com/gallery/{$id:alphanum}
    https://imgur.com/gallery/{$id:alphanum}
    Embed HTML:
    HTML:
    <iframe class="imgur-album" width="100%" height="550" frameborder="0" src="//imgur.com/a/{$id}/embed"></iframe>
    Thank you for the help, much appreciated!
     

Share This Page