• When deciding how best to present the "end cards" of each episode on my Wiki, I decided that rather than taking screen captures of 200+ episodes' worth of end cards, all of which are of varying quality, it would be best to simply take the three different end card types used during the series and overlay the corresponding text for each episode dynamically, using an overlay text template I modified from the "My Summer Car" wiki, adding left and right position functionality:

    Here's an example of this template that I used on a userpage:
    As you can see, the "Test caption" text is dynamically generated and is not part of the image file. However, I soon realized another problem; this template only allows for one piece of text to be applied to an image. I would like to know how to modify this template so I can apply multiple different text overlays, and possibly in different font families as well. I know Wikipedia has templates that allow multiple overlays, but those contain far more complex code than the example I sourced.

      Loading editor
    • I do it by separating the image outside the template and then can reuse Template:Overlay text for each different text overlay. And you can added an additional {{{3}} into the template for font family

      <div style="position: relative;">
      [[File:S1 End Card.png|600px|centre]]
      {{Overlay text| |Test caption  |bottom=80px|left=0px|size=2em}}
      {{Overlay text| |Test caption 2|bottom=48px|left=0px|size=2em}}
      {{Overlay text| |Test caption 3|bottom=16px|left=0px|size=2em}}
        Loading editor
    • Aha, that's great! Didn't think that you could separate the image from the template, but that's solved half of my problems. I'll try and add a font family selection to the existing code and make another reply in case I can't get it to work. Thanks once more!

        Loading editor
    • Yeah, I'll admit I'm not an expert in templates and know that I have to add a series of curly braces along with a "3" in addition to declaring a font-family variable, but don't want to break my existing code. Sorry for doubleposting but how would I add this font-family selector?

        Loading editor
    • font-family is on the top row of the template. You could make it {{{3}}} with default as impact


      <div class="overlay-text" style="position:relative; font-family:{{{3|impact}}}; text-align:center; font-size:{{{size|1.5em}}}; text-shadow:2px 2px #000000;">{{{1|}}}<div style="position:absolute; {{#if:{{{top|}}}|top:{{{top|}}};}} {{#if:{{{bottom|}}}|bottom:{{{bottom|}}};}} {{#if:{{{left|}}}|left:{{{left|}}};}} {{#if:{{{right|}}}|right:{{{right|}}};}} width:100%; pointer-events:none;">{{{2|}}}</div></div>
        Loading editor
    • Ah, I understand now. Wasn't sure if I had to delete it and declare a new {{{3}}} variable at the end of the code.
      Now all I need to know is how to define the font family when using the template: I've tried
      {{Overlay text| |Test caption  |font-family=arial|bottom=80px|left=0px|size=2em}}
      In addition to moving the "font-family" variable to the end of the declaration, after size=2em, and the font remains as Impact. Not sure if this is due to me inputting it wrong or Arial not being an existent font family, but once this is sorted out the template should be ready for general use.

        Loading editor
    • There are 2 types of variable entry

      1) non-labelled
      you use {{{1}}}
      so {{{2}}} is replaced with Test caption in {{Overlay text| |Test caption |bottom=80px|left=0px|size=2em}}

      2) labelled
      you use bottom=
      so bottom=80px in used in the template
      you have decided to use this option (|font-family=arial) for font-family so needs {{{font-family}}} instead of {{{3}}}

      <div class="overlay-text" style="position:relative; font-family:{{{font-family|impact}}}; text-align:center; font-size:{{{size|1.5em}}}; text-shadow:2px 2px #000000;">{{{1|}}}<div style="position:absolute; {{#if:{{{top|}}}|top:{{{top|}}};}} {{#if:{{{bottom|}}}|bottom:{{{bottom|}}};}} {{#if:{{{left|}}}|left:{{{left|}}};}} {{#if:{{{right|}}}|right:{{{right|}}};}} width:100%; pointer-events:none;">{{{2|}}}</div></div>
        Loading editor
    • There we go, now everything works! Thank you so much.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.