Why content people shouldn't try to be template people:

[embyr_75]

Hello all,

I'm hoping some code savvy people will be willing to offer some aid to a Metroid Wiki editor in need. I created (more like copy and pasted and then mulched) a modified version of our Template:Tab to created a Featured Article rotation for our main page (Template:FA-Tab). It ended up working pretty nicely (Template:FA-Rotation).

So I decided today, all full of confidence, that I'd try making something similar for our Feature Pictures (Template:FP-Tab and Template:FP-Rotation). This created a couple problems:

#1: I need to find some way to make the various images all resize automatically to fit within their Tabs. Obviously, setting them all to the same px doesn't help because they all have different dimensions, but I don't want to just thumbnail them all because I want them to display as large as possible in the space that is available. When I toggle between tabs, I want the appearance to be smooth and uniform, the way the Template:FA-Rotation looks on the main page. And speaking of that little monster...

#2: When I toggle between the tabs on the FP-Rotation on the main page, the FA-Rotation tabs also toggle!! That was, uhm. Unexpected, for me. That's about when my ego crumbled and I realized I was a dum-dum.

So if someone would care to glance over my little disaster of an operation and offer some friendly advice, I'd appreciate it. Even if it's not-so-friendly, I'll take it.

[Greenpickle]

The way {{FP-Rotation}} achieves #1 is by setting a fixed height on the text body.  This is actually a bad idea, because the content is allowed to overflow this box, but elements below will not be moved down.  So if I make my browser window small enough (< 1160px), the text of article 1 flows into the 'Vote...' link.

(This can be worked around by increasing the 200px set in the template a little, since the main page has a minimum size.)

Your problem in #1 is that you want them all to have the same height.  This is easy: [[File:<filename>|x270px]], for example, will display an image at 270px high.  If you want to restrict the image's height to its natural size, so that raster images don't get scaled up and look blurry, pass frameless: [[File:<filename>|frameless|x270px]].

I don't get why {{FA-Tab}} and {{FP-Tab}} don't just use {{Tab}}, but okay.  You get #2 because these define identifiers used by the JavaScript, but they're both set to 'tab': {{#vardefine:name|{{{name|tab}}}}}.  Just change 'tab' in that to something unique for each of those templates.  Better yet, use {{Tab}} and pass the name parameter to that.

[embyr_75]

The way {{FP-Rotation}} achieves #1 is by setting a fixed height on the text body.  This is actually a bad idea, because the content is allowed to overflow this box, but elements below will not be moved down.  So if I make my browser window small enough (< 1160px), the text of article 1 flows into the 'Vote...' link.

(This can be worked around by increasing the 200px set in the template a little, since the main page has a minimum size.)

Your problem in #1 is that you want them all to have the same height.  This is easy: [[File:<filename>|x270px]], for example, will display an image at 270px high.  If you want to restrict the image's height to its natural size, so that raster images don't get scaled up and look blurry, pass frameless: [[File:<filename>|frameless|x270px]].

I don't get why {{FA-Tab}} and {{FP-Tab}} don't just use {{Tab}}, but okay.  You get #2 because these define identifiers used by the JavaScript, but they're both set to 'tab': {{#vardefine:name|{{{name|tab}}}}}.  Just change 'tab' in that to something unique for each of those templates.  Better yet, use {{Tab}} and pass the name parameter to that.

Thanks for looking this over for me!

First of all, the only reason I'm not using the preexisting {{Tab}} (and created the {{FA-Tab}})  is for aesthetic reasons. They look totally different. What I don't understand is this: You say that they're all toggling because they're both set to the following in their base code:  {{#vardefine:name|{{{name|tab}}}}}. However, when I have multiple templates using the regular {{Tab}}, from which all the code for {{FP-Tab}} and {{FA-Tab}} were copied, we don't encounter this problem (For example, pages with multiple navigation templates on the bottom).

Thanks for the info, I'll try implementing this! (Though I'm still puzzled by the JavaScript issue you described, since {{Tab}} works fine).

[Greenpickle]

It seems that most, but not all, of the navigation templates pass the name parameter to {{Tab}}, and you've just been lucky enough not to have any pages with two templates that don't do this.  Any pages in particular you would expect to be broken?

[embyr_75]

It seems that most, but not all, of the navigation templates pass the name parameter to {{Tab}}, and you've just been lucky enough not to have any pages with two templates that don't do this.  Any pages in particular you would expect to be broken?

Uhm, no... I guess the issue is I only have a(n extremely) rudimentary understanding of what the problem was. But that's fine, I implemented your fixes and it works so... I have no problem remaining ignorant.

[KidIcarus]

Hahaha well you learn as you go! That "rudimentary" understanding will grow with time