Difference between revisions of "ScreenGallery"

From Sega Retro
Line 23: Line 23:
  
 
we probably need a better method of showing multiple screenshots - when I wrote [[Template:InfoTable]] I wasn't expecting 347294372 screenshots per level. Fun thing is, I don't think any other wikis have a solution either -[[User:Black Squirrel|Black Squirrel]] ([[User talk:Black Squirrel|talk]]) 04:44, 21 April 2022 (EDT)
 
we probably need a better method of showing multiple screenshots - when I wrote [[Template:InfoTable]] I wasn't expecting 347294372 screenshots per level. Fun thing is, I don't think any other wikis have a solution either -[[User:Black Squirrel|Black Squirrel]] ([[User talk:Black Squirrel|talk]]) 04:44, 21 April 2022 (EDT)
 +
 +
That's definitely better. For the sake of reducing boilerplate, can you add a screens argument to <nowiki>{{gallery}}</nowiki> that the gitems inherit but can override (like how <code>widths</code> works)? So like:
 +
 +
<pre>
 +
{{gallery|widths=160|screens=yes|
 +
{{gitem|TaleSpin GG, Stage 1.png | The Jungle}}
 +
{{gitem|TaleSpin GG, Stage 1 Boss.png | The Jungle, Boss}}
 +
...
 +
</pre>
 +
 +
Alternatively, I can probably make a gscreen template that simply wraps around gitem to set the argument.
 +
 +
For stages, I was thinking about transitioning the stages from InfoBoxes to something like:
 +
 +
<div style="background: #e8e8e8; border-radius: 1em; margin: 1em 0;">
 +
<div style="background: #1077cb; border-radius: 1em 1em 0 0; color: #fff; font-size: 1.25rem; font-weight: bold; padding: 0 1em;">Ibaraki Province, Japan</div>
 +
<div style="padding: 1em;">
 +
<div style="display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 1em;">
 +
{{Bobscreen|Revenge of Shinobi, Stage 1-1.png|width=200}}
 +
{{Bobscreen|Revenge of Shinobi, Stage 1-2.png|width=200}}
 +
{{Bobscreen|Revenge of Shinobi, Stage 1 Boss.png|width=200}}
 +
</div>
 +
<p>This bamboo forest is where the game begins. Through these ancient ruins, Musashi must make his way to The House of Confusion. At the end of this district, he is confronted by the mighty samurai Blue Lobster.</p>
 +
</div>
 +
</div>
 +
 +
<div style="background: #e8e8e8; border-radius: 1em; margin: 1em 0;">
 +
<div style="background: #1077cb; border-radius: 1em 1em 0 0; color: #fff; font-size: 1.25rem; font-weight: bold; padding: 0 1em;">Tokyo</div>
 +
<div style="padding: 1em;">
 +
<div style="display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 1em;">
 +
{{Bobscreen|Revenge of Shinobi, Stage 2-1.png|width=200}}
 +
{{Bobscreen|Revenge of Shinobi, Stage 2-2.png|width=200}}
 +
{{Bobscreen|Revenge of Shinobi, Stage 2 Boss.png|width=200}}
 +
</div>
 +
<p>Musashi begins this stage near a rocky canyon. Winged ninja swoop down from the sky to attack him. Past the waterfalls, Joe stalks the darkened roof tops of Tokyo, and eventually enters a blinding disco where he must battle with the Shadow Dancer.</p>
 +
</div>
 +
</div>
 +
 +
Where the screen shots flow like galleries so that they can accept an arbitrary number of images.
 +
 +
<div style="background: #e8e8e8; border-radius: 1em; margin: 1em 0;">
 +
<div style="background: #1077cb; border-radius: 1em 1em 0 0; color: #fff; font-size: 1.25rem; font-weight: bold; padding: 0 1em;">Final Stage</div>
 +
<div style="padding: 1em;">
 +
<div style="display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 1em;">
 +
{{Bobscreen|Magical Taruruto-kun MD, Stage 4-1.png|width=200}}
 +
{{Bobscreen|Magical Taruruto-kun MD, Stage 4-2.png|width=200}}
 +
{{Bobscreen|Magical Taruruto-kun MD, Stage 4-3.png|width=200}}
 +
{{Bobscreen|Magical Taruruto-kun MD, Stage 4-4.png|width=200}}
 +
{{Bobscreen|Magical Taruruto-kun MD, Stage 4-5.png|width=200}}
 +
{{Bobscreen|Magical Taruruto-kun MD, Stage 4-6.png|width=200}}
 +
{{Bobscreen|Magical Taruruto-kun MD, Stage 4-7.png|width=200}}
 +
{{Bobscreen|Magical Taruruto-kun MD, Stage 4-7 Boss.png|width=200}}
 +
</div>
 +
</div>
 +
</div>
 +
 +
It also doesn't have the problem of the text column being shrunk down when there are a lot of screen shots, and it would flow better on pages with really long Bob templates.
 +
 +
Speaking of really long Bob templates, I was also thinking about a horizontal format for those so there isn't as much stuff floating on each page:
 +
 +
<div style="display: grid; grid-template-columns: repeat(3, 1fr); margin: 1em 0; height: 25em;">
 +
<div style="background: #c0c0c0; border-radius: 1em 0 0 1em; display: flex; flex-direction: column; justify-content: space-between;">
 +
<ul style="justify-content: center; display: flex; flex-wrap: wrap; font-size: 0.8rem; gap: 0.5em; list-style: none;">
 +
<li style="background: #a0a0a0; padding: 0 0.5em;">NTSC-U/PAL</li>
 +
<li style="background: #a0a0a0; padding: 0 0.5em;">NTSC-J</li>
 +
<li style="background: #a0a0a0; padding: 0 0.5em;">NTSC-U/PAL (02)</li>
 +
<li style="background: #a0a0a0; padding: 0 0.5em;">NTSC-J (02)</li>
 +
<li style="background: #a0a0a0; padding: 0 0.5em;">NTSC-U/PAL (03)</li>
 +
<li style="background: #a0a0a0; padding: 0 0.5em;">NTSC-J (03)</li>
 +
<li style="background: #a0a0a0; padding: 0 0.5em;">NTSC-U/PAL (Virtual Console)</li>
 +
<li style="background: #a0a0a0; padding: 0 0.5em;">NTSC-J (Virtual Console)</li></ul>
 +
<div style="overflow: auto; padding: 1em; text-align: center;">{{Bobscreen|RevengeOfShinobi title.png}}</div>
 +
<div style="background: #1077cb; border-radius: 0 0 0 1em; color: #fff; font-size: 1.25rem; font-style: italic; font-weight: bold; text-align: center;">The Revenge of Shinobi / The Super Shinobi</div></div>
 +
 +
<div style="background: #e0e0e0; font-size: 0.9rem; overflow: auto; padding: 1em;">
 +
<div>'''System(s):''' [[Sega Mega Drive]], [[Sega Mega-Tech]], [[PlayStation 3]], [[Virtual Console]], [[Steam]], [[PlayStation Now]], [[Android]], [[iOS]]</div>
 +
<div>'''Publisher:''' [[Sega]]</div>
 +
<div>'''Developer:''' [[Sega R&D 2]]</div>
 +
<div>[[M2]]</div>
 +
<div>'''Licensor:''' [[Marvel Entertainment Group]] (1.01, 1.02, 1.03)</div>
 +
<div>'''Sound driver:''' [[SMPS 68000]]</div>
 +
<div>'''Genre:''' Action</div>
 +
<div>'''Number of players:''' 1</div>
 +
</div>
 +
 +
<div style="background: #f0f0f0; border-radius: 0 1em 1em 0; font-size: 0.9rem; overflow: auto; padding: 1em;">
 +
<table><tr><th>Release</th><th>Date</th><th>RRP</th><th>Code</th>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr>
 +
<tr><td>JP</td><td>1989-12-02</td><td>¥6,0006,000</td><td>G-4019</td></tr></table></div>
 +
</div>
 +
 +
That's a fairly major change, but I'm curious what others think.
 +
 +
--[[User:Typhoon|Typhoon]] ([[User talk:Typhoon|talk]]) 11:37, 21 April 2022 (EDT)

Revision as of 10:37, 21 April 2022

TaleSpin GG, Stage 1.png

The Jungle
TaleSpin GG, Stage 1.png

TaleSpin GG, Stage 1 Boss.png

The Jungle, Boss
TaleSpin GG, Stage 1 Boss.png

TaleSpin GG, Stage 2.png

The Lost City
TaleSpin GG, Stage 2.png

TaleSpin GG, Stage 2 Boss.png

The Lost City, Boss
TaleSpin GG, Stage 2 Boss.png

TaleSpin GG, Stage 3.png

Italy
TaleSpin GG, Stage 3.png

TaleSpin GG, Stage 3 Boss.png

Italy, Boss
TaleSpin GG, Stage 3 Boss.png

TaleSpin GG, Stage 4.png

Greece
TaleSpin GG, Stage 4.png

TaleSpin GG, Stage 4 Boss.png

Greece, Boss
TaleSpin GG, Stage 4 Boss.png

TaleSpin GG, Stage 5.png

Egypt
TaleSpin GG, Stage 5.png

TaleSpin GG, Stage 5 Boss.png

Egypt, Boss
TaleSpin GG, Stage 5 Boss.png

TaleSpin GG, Stage 6.png

India
TaleSpin GG, Stage 6.png

TaleSpin GG, Stage 6 Boss.png

India, Boss
TaleSpin GG, Stage 6 Boss.png

TaleSpin GG, Stage 7.png

New York
TaleSpin GG, Stage 7.png

TaleSpin GG, Stage 7 Boss.png

New York, Boss
TaleSpin GG, Stage 7 Boss.png

TaleSpin GG, Stage 8.png

San Francisco
TaleSpin GG, Stage 8.png

TaleSpin GG, Stage 8 Boss.png

San Francisco, Boss
TaleSpin GG, Stage 8 Boss.png

TaleSpin GG, Stage 9.png

The Iron Claw
TaleSpin GG, Stage 9.png

TaleSpin GG, Sea Duck.png

Sea Duck
TaleSpin GG, Sea Duck.png

it can probably be simplified

we probably need a better method of showing multiple screenshots - when I wrote Template:InfoTable I wasn't expecting 347294372 screenshots per level. Fun thing is, I don't think any other wikis have a solution either -Black Squirrel (talk) 04:44, 21 April 2022 (EDT)

That's definitely better. For the sake of reducing boilerplate, can you add a screens argument to {{gallery}} that the gitems inherit but can override (like how widths works)? So like: 

{{gallery|widths=160|screens=yes|
{{gitem|TaleSpin GG, Stage 1.png | The Jungle}}
{{gitem|TaleSpin GG, Stage 1 Boss.png | The Jungle, Boss}}
...

Alternatively, I can probably make a gscreen template that simply wraps around gitem to set the argument.

For stages, I was thinking about transitioning the stages from InfoBoxes to something like:

Ibaraki Province, Japan

Revenge of Shinobi, Stage 1-1.png

Revenge of Shinobi, Stage 1-2.png

Revenge of Shinobi, Stage 1 Boss.png

This bamboo forest is where the game begins. Through these ancient ruins, Musashi must make his way to The House of Confusion. At the end of this district, he is confronted by the mighty samurai Blue Lobster.

Tokyo

Revenge of Shinobi, Stage 2-1.png

Revenge of Shinobi, Stage 2-2.png

Revenge of Shinobi, Stage 2 Boss.png

Musashi begins this stage near a rocky canyon. Winged ninja swoop down from the sky to attack him. Past the waterfalls, Joe stalks the darkened roof tops of Tokyo, and eventually enters a blinding disco where he must battle with the Shadow Dancer.

Where the screen shots flow like galleries so that they can accept an arbitrary number of images.

Final Stage

Magical Taruruto-kun MD, Stage 4-1.png

Magical Taruruto-kun MD, Stage 4-2.png

Magical Taruruto-kun MD, Stage 4-3.png

Magical Taruruto-kun MD, Stage 4-4.png

Magical Taruruto-kun MD, Stage 4-5.png

Magical Taruruto-kun MD, Stage 4-6.png

Magical Taruruto-kun MD, Stage 4-7.png

Magical Taruruto-kun MD, Stage 4-7 Boss.png

It also doesn't have the problem of the text column being shrunk down when there are a lot of screen shots, and it would flow better on pages with really long Bob templates.

Speaking of really long Bob templates, I was also thinking about a horizontal format for those so there isn't as much stuff floating on each page:

  • NTSC-U/PAL
  • NTSC-J
  • NTSC-U/PAL (02)
  • NTSC-J (02)
  • NTSC-U/PAL (03)
  • NTSC-J (03)
  • NTSC-U/PAL (Virtual Console)
  • NTSC-J (Virtual Console)

RevengeOfShinobi title.png

The Revenge of Shinobi / The Super Shinobi
Publisher: Sega
Developer: Sega R&D 2
Licensor: Marvel Entertainment Group (1.01, 1.02, 1.03)
Sound driver: SMPS 68000
Genre: Action
Number of players: 1
ReleaseDateRRPCode
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019
JP1989-12-02¥6,0006,000G-4019

That's a fairly major change, but I'm curious what others think.

--Typhoon (talk) 11:37, 21 April 2022 (EDT)

Retrieved from "https://segaretro.org/index.php?title=Template_talk:ScreenGallery&oldid=770974"