Character bios below thumbnail image

[agent47]

What I'm asking may have nothing to do with Tiny Portal but I tried asking this on the SMF forums and I haven't got a single response ever since. Anyways as the title says it all I want to create superhero character database and it should basically display a thumbnail image of the the superhero with a couple of details below the image. I tried using the article feature but I don't want the bios to be displayed in that manner.
I'm not looking for a mod or anything in particular, atleast HTML code to have it displayed in this manner would do.

EXAMPLE:

[IchBin]

Are you looking to manually enter the information in? That layout can be created very simply with a table. But it depends on how you're storing the data? Is this information in a database already? There are some things that people need to know if you want them to figure out how to do this.

[agent47]

No the information is not stored in a DB, I basically want to create them manually.

[lurkalot]

No the information is not stored in a DB, I basically want to create them manually.

So you'll just dump the pics in a folder and use a block to display them?

[agent47]

No the information is not stored in a DB, I basically want to create them manually.

So you'll just dump the pics in a folder and use a block to display them?

Correct. Is there an easier way?
I need this done for 2 sections of my site:

To display superhero characters and their details
http://www.superheroalliance.net/index.php?page=5

And to display a movie DB or all superhero movies.
http://www.superheroalliance.net/index.php?page=6

[IchBin]

There could be. Depends on how complicated one wants to make it. It might be easy to put all that info into an array, and then just loop through the array to output all the characters. I did something similar just the other day for a guy here with a WOW site. The nice part is that you don't have to add a bunch of HTML or anything each time you add a character. You just need to add a line in the array and it will automatically add the character to your output.

This code assumes you name the image the same as their character name, ie. Darkstar.jpg
You must also set the image path. To add a character just copy one of the lines in the array and change the info. You'll need to add any of the text you want to appear for details and powers in their respective places in between the empty quotes.

Code Select Expand


// Settings that need to be edited
$imagePath = '/home/user/www/heroes';
$columns = 3;
$heroes = array('Darkstar' => array('name' => 'Laynia Petrovna', 'details' => '', 'powers' => ''),
'SuperMan' => array('name' => 'Clark Kent', 'details' => '', 'powers' => ''),
'Wolverine' => array('name' => 'Logan', 'details' => '', 'powers' => ''),
'Flash' => array('name' => 'Jay Garrick', 'details' => '', 'powers' => ''),
'Cyclops' => array('name' => 'Scott Summers', 'details' => '', 'powers' => ''),
);


// Do not edit below this line unless you know what you're doing
echo '
<table border="0" cellpadding="0" cellspacing="5">
<tr>';

// Create the output
$i = 1;

foreach ($heroes as $hero => $value) {
// Create a new row if the counter is > or = to $columns.
if ($i >= $columns) {
echo '
<td>
<img src="'. $imagePath .'/'. $hero .'.jpg" alt="'. $hero .'" />
<h3 style="text-align: center;">', $hero ,'</h3>
<p>', $value['name'] ,'</p>
<p>Details: ', $value['details'] ,'</p>
<p>Super Powers: ', $value['powers'] ,'</p>
</td>
</tr>
<tr>';
$i = 0;
}
else {
echo '
<td>
<img src="'. $imagePath .'/'. $hero .'.jpg" alt="'. $hero .'" />
<h3 style="text-align: center;">', $hero ,'</h3>
<p>', $value['name'] ,'</p>
<p>Details: ', $value['details'] ,'</p>
<p>Super Poweers: ', $value['powers'] ,'</p>
</td>';
$i++;
}
}

echo '
</tr>
</table>';

[agent47]

So the code stated above, where exactly do I make or append those changes?

[IchBin]

You see the comment I put in the code?
// Settings that need to be edited.

$imagepath needs to be set to your path where you put the images.
$columns is how many columns you want to display when you start adding heroes.
$heroes = array is where you need to add your heroes. If you look at the pattern, you can see how each hero is on a separate line.

[agent47]

No I mean that entire code stated above, I simply create a php block, edit the $imagepath, $columns and $heroes, append the entire code to the block and I'm good to go?
Sorry for this many questions mate BUT I'm like a TOTAL noob at coding. It's thanks to SMF and TP or rather, you guys that actually gave me the power to build a website.

[IchBin]

Ah yes. You just put the code in your php block or php article. Adjust the things I mentioned and it should display your heroes.