TinyPortal

Development => Block Codes => Topic started by: agent47 on December 21, 2010, 05:47:38 PM

Title: Character bios below thumbnail image
Post by: agent47 on December 21, 2010, 05:47:38 PM
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:
(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fdl.dropbox.com%2Fu%2F915297%2Fbios.jpg&hash=112ed8916951c4c7a54f2456830a4f15a07d1a29)
Title: Re: Character bios below thumbnail image
Post by: IchBin on December 21, 2010, 06:42:53 PM
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.
Title: Re: Character bios below thumbnail image
Post by: agent47 on December 21, 2010, 06:47:13 PM
No the information is not stored in a DB, I basically want to create them manually.
Title: Re: Character bios below thumbnail image
Post by: lurkalot on December 21, 2010, 07:50:03 PM
Quote from: agent47 on December 21, 2010, 06:47:13 PM
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?
Title: Re: Character bios below thumbnail image
Post by: agent47 on December 21, 2010, 08:02:38 PM
Quote from: lurkalot on December 21, 2010, 07:50:03 PM
Quote from: agent47 on December 21, 2010, 06:47:13 PM
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
Title: Re: Character bios below thumbnail image
Post by: IchBin on December 21, 2010, 09:02:04 PM
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.


// 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>';
Title: Re: Character bios below thumbnail image
Post by: agent47 on December 21, 2010, 09:24:10 PM
So the code stated above, where exactly do I make or append those changes?
Title: Re: Character bios below thumbnail image
Post by: IchBin on December 21, 2010, 09:40:26 PM
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.
Title: Re: Character bios below thumbnail image
Post by: agent47 on December 21, 2010, 10:07:58 PM
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.
Title: Re: Character bios below thumbnail image
Post by: IchBin on December 21, 2010, 10:37:22 PM
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. :)
Title: Re: Character bios below thumbnail image
Post by: agent47 on December 22, 2010, 12:17:28 AM
Ok I basically created a "heroes" folder in the root of my site and set this "/home/theinfo/public_html/superherocomics.tk/heroes" as my $imagepath to test it out. But image seems to be broken. I'm assuming it has something to do with my image path but that's pretty much what Admin panel > Configuration > Server Settings > Database and Paths gave me.
Title: Re: Character bios below thumbnail image
Post by: IchBin on December 22, 2010, 12:37:26 AM
Any time an image is missing you should right click on the image and choose properties. On the popup window for that image look at the path where it is looking for the image, and then compare it to your server path by trying to follow where it is looking. Without seeing your page I cannot tell you why it is missing.
Title: Re: Character bios below thumbnail image
Post by: agent47 on December 22, 2010, 07:28:21 AM
Ok something's quite weird here as Chrome gives me a broken image whereas Firefox gives me the name of image in bold letters with no broken image or anything.

Here's a link to where I have used your code, please take a look and  tell me what may be wrong: http://www.superheroalliance.net/index.php?page=7
Title: Re: Character bios below thumbnail image
Post by: lurkalot on December 22, 2010, 09:13:05 AM
Quote from: IchBin on December 21, 2010, 09:02:04 PM

This code assumes you name the image the same as their character name, ie. Darkstar.jpg


agent47 , just a thought.  did you add  .jpg  to the end of each of your images file names?
Title: Re: Character bios below thumbnail image
Post by: agent47 on December 22, 2010, 09:55:53 AM
Quote from: lurkalot on December 22, 2010, 09:13:05 AM
Quote from: IchBin on December 21, 2010, 09:02:04 PM

This code assumes you name the image the same as their character name, ie. Darkstar.jpg


agent47 , just a thought.  did you add  .jpg  to the end of each of your images file names?
Yes mate. The image is a jpg file which includes the extension in its name.
Title: Re: Character bios below thumbnail image
Post by: WillyP on December 22, 2010, 01:15:25 PM
The url in the source to your image is:http://www.superheroalliance.net/home/theinfo/public_html/superherocomics.tk/heroes/namora

There is no file extension.  Adding jpg to the url, I still can't find the image.
Title: Re: Character bios below thumbnail image
Post by: ZarPrime on December 22, 2010, 01:19:55 PM
I can't even find his site.  I have Norton DNS installed.  Maybe that's blocking me from seeing it.

ZarPrime
Title: Re: Character bios below thumbnail image
Post by: agent47 on December 22, 2010, 01:32:33 PM
According to IchBin's code, the .jpg is automatically created and that's the reason you don't see it when u right click > inspect element.

@ZarPrime: I have been getting quite a few complaints that the site isn't accessible. I wonder what's wrong :(
Title: Re: Character bios below thumbnail image
Post by: WillyP on December 22, 2010, 01:40:05 PM
No, the jpg is appended in Ich's code.  You should see it in the source.  Something is re-writing the url, probably an .htacces, trying to prevent hot-linking or direct access to an image, which could contain malicious code.
Title: Re: Character bios below thumbnail image
Post by: ZarPrime on December 22, 2010, 02:13:33 PM
Quote from: agent47 on December 22, 2010, 01:32:33 PM
@ZarPrime: I have been getting quite a few complaints that the site isn't accessible. I wonder what's wrong :(

No idea but I can't get to it in either Chrome or Opera (latest versions of both).  I may try clearing my browser caches for both browsers in a little bit and try it again.

ZarPrime
Title: Re: Character bios below thumbnail image
Post by: IchBin on December 22, 2010, 02:46:55 PM
A couple things.

You have something wrong with your DNS. You should report to your host that people cannot access your site. The DNS is not propagating or something. I couldn't access your site from home or work. I went to a DNS site and did a lookup and was able to get the IP of your server so I could access it.

I've fixed the code above. There was a problem with the image on one part of it. I've removed some debugging code I had in there too. Let me know if it works this time.
Title: Re: Character bios below thumbnail image
Post by: agent47 on December 22, 2010, 10:13:49 PM
Yeah I'm not exactly sure what up with the server or DNS as their website seems to be down too. So I figured it's probably an issue with their DNS servers. IchBin how did u access my site? Provide me the IP if you don't mind please.

IchBin: that almost worked. I did a Right Click > Inspect element and this is what the report displayed:
<img src="/home/theinfo/public_html/www.superheroalliance.net/heroes/Darkstarjpg" alt="Darkstar">

So I tried including the dot (.) adjoining the word jpg after the '
Like this: <img src="'. $imagePath .'/'. $hero '.jpg" alt="'. $hero .'"
But that just seemed to screw the entire box. :(
Title: Re: Character bios below thumbnail image
Post by: lurkalot on December 22, 2010, 10:41:29 PM
I could view the site this morning but can't now, although it says the site is up,  http://www.downforeveryoneorjustme.com/

Title: Re: Character bios below thumbnail image
Post by: WillyP on December 23, 2010, 12:08:30 AM
Weird... I can still get to the site, it seems to work fine for me.   However, Reverse IP Lookup - Find Other Web Sites Hosted on a Web Server (http://www.yougetsignal.com/tools/web-sites-on-web-server/) says it's an invalid domain.  Did you changes servers, or domain recently?  Sometimes it takes a few days to propagate.
Title: Re: Character bios below thumbnail image
Post by: IchBin on December 23, 2010, 12:36:59 AM
174.132.130.154 was the IP I found when doing a lookup on a DNS site. I added the ip and domain to my hosts file so it would force my traffic to go to your IP. 

I've adjusted the code again on the first page so it should be working now.
Title: Re: Character bios below thumbnail image
Post by: ZarPrime on December 23, 2010, 11:34:15 AM
Just tried the site again.  Still blocked for me. :-X

ZarPrime
Title: Re: Character bios below thumbnail image
Post by: agent47 on December 23, 2010, 11:40:53 AM
Hell yeah it worked this IchBin this time! Thanks alot bud.
Now gotta get my sort sorted before I lose all my members for good :(
I'm moving my site from current host to 000webhost.
I just hope the servers their are as reliable?
Anyone from here hosting any sites from them free servers?
Title: Re: Character bios below thumbnail image
Post by: Lesmond on December 23, 2010, 02:24:50 PM
Quote from: agent47 on December 23, 2010, 11:40:53 AM

Anyone from here hosting any sites from them free servers?
I would never use free hosting, but thats me, each to their own IMO.
Title: Re: Character bios below thumbnail image
Post by: WillyP on December 23, 2010, 03:12:49 PM
000webhost - Google Search (http://www.google.com/search?q=000webhost&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a#q=000webhost&hl=en&client=firefox-a&hs=DYn&rls=org.mozilla:en-US:official&prmd=ivns&tbs=dsc:1&tbo=u&sa=X&ei=rWUTTeRrxN-WB_DsmdML&ved=0CEgQmAcwBA&fp=bdddfab3d4d782f2)
Title: Re: Character bios below thumbnail image
Post by: agent47 on December 23, 2010, 06:23:29 PM
Quote from: WillyP on December 23, 2010, 03:12:49 PM
000webhost - Google Search (http://www.google.com/search?q=000webhost&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a#q=000webhost&hl=en&client=firefox-a&hs=DYn&rls=org.mozilla:en-US:official&prmd=ivns&tbs=dsc:1&tbo=u&sa=X&ei=rWUTTeRrxN-WB_DsmdML&ved=0CEgQmAcwBA&fp=bdddfab3d4d782f2)
Yup that's it^. Still setting restoring data. U boys able to access the site now? I checked the uptime of their servers, pretty good results I have to say.
http://www.superheroalliance.net

EDIT: Here are the results (http://www.serviceuptime.com/users/monitoring.php?S=6c8ef11fcca35bab3d971cdce3d7179b)
Plus since the results are outsourced from another website, they can't be fake right.
Title: Re: Character bios below thumbnail image
Post by: IchBin on December 23, 2010, 07:49:17 PM
Can't access the site yet, but generally DNS changes can take a day or so to propagate to the rest of the world.
Title: Re: Character bios below thumbnail image
Post by: Lesmond on December 23, 2010, 08:06:27 PM
I can access the site ok, but it seems you have errors there...

Fatal error: Call to undefined function NiceTooltip() in /home/a1533235/public_html/Sources/Load.php(2092) : eval()'d code(48) : eval()'d code on line 136
Title: Re: Character bios below thumbnail image
Post by: lurkalot on December 23, 2010, 08:14:57 PM
Quote from: Lesmond on December 23, 2010, 08:06:27 PM
I can access the site ok, but it seems you have errors there...


Same here, but I think Agent47 is in the middle of installing stuff at the moment, as TP wasn't even installed about half hour ago.  ;)
Title: Re: Character bios below thumbnail image
Post by: agent47 on December 23, 2010, 09:12:12 PM
Was Lesmond right about Free hosting or what. Man! it's just a frikking mess guys. Believe me.
I just switched to Hosting24. 8/month seems pretty reasonable. Time to recreate site :D
You guys will definitely have no trouble visiting the site after this. :)
Will update you guys once I got it all setup.
Title: Re: Character bios below thumbnail image
Post by: agent47 on December 25, 2010, 10:31:47 PM
Finally got the site working on the new host. :) And I'm pretty sure DNS has been properly propagated since it's been over 24 hours.
@IchBin: First, I hope you had an awesome Christmas?........ Ok moving on to the problem, after the awesome code you wrote me, I feel so odd asking for anything more but here's the thing, "Superhero Occupations" are not always one lined occupations so is there a way where I can sort of lock images into place so that regardless the amount of characters below the superhero image, they all still stay aligned. Check my site out and you'll probably understand what I'm talking about. Here's where I have implemented the code: http://www.superheroalliance.net/index.php?page=7

Also can the images also be turned into links so that once clicked, more insight about the characters can be provided.

If any two of the above issues require alotta hard work, I should be able to manage mate. After everything you've done so far, me asking for anything more just makes me selfish.
Title: Re: Character bios below thumbnail image
Post by: IchBin on December 26, 2010, 02:39:26 PM
Are you talking about how the image seems to drop a little on each item? It looks like you've added some code to mine? The output is much different and you have some errors in your html. If you open an html tag, you have to close them in the opposite order you opened them. Take a look at this html.

<img src="/images/SuperheroDB/Aquaman.jpg" alt="Aquaman" />
<font size="4"><h3 style="text-align: center;">Aquaman</font></h3>
<b><i><p><font color="#3b87bf">Arthur Curry</b></i></p></font>
<p>Details: Waterbearer of the Secret Sea, exiled King of Atlantis</p>
<p>Super Powers: </p>
</td>


It should look like this instead:
<img src="/images/SuperheroDB/Aquaman.jpg" alt="Aquaman" />
<h3 style="text-align: center;"><font size="4">Aquaman</font></h3>
<p><font color="#3b87bf"><b><i>Arthur Curry</i></b></font></p>
<p>Details: Waterbearer of the Secret Sea, exiled King of Atlantis</p>
<p>Super Powers: </p>
</td>


The errors in the code could be what's causing the problem.

If the clean up doesn't fix it, add style="vertical-align: top;" to the <td>'s.
Title: Re: Character bios below thumbnail image
Post by: agent47 on December 26, 2010, 05:36:00 PM
**agent47 bows down to the master**
You, my friend are amazing. Thanks alot Ichi

For some reason your nick keeps reminding me of this clip :D
http://www.youtube.com/watch?v=GmHwUCdi-a0

BTW after fixing the html tags in order, problem was still persisting. The vertical align did the trick.
Title: Re: Character bios below thumbnail image
Post by: ZarPrime on December 26, 2010, 07:28:36 PM
<Hah Hah>  :2funny: lol @ Ichiban Lipstick For Men O0

Nice, your article looks great now. O0

ZarPrime
Title: Re: Character bios below thumbnail image
Post by: IchBin on December 26, 2010, 11:37:52 PM
Yeah, I'm aware of the Ichiban. lol That was a great show. Most of the people that I used to game with just called me Itch for short. I should change my name to that instead. :)