Complete Newbie Help needed :)

krembo99 · July 9, 2006

Hello Guys (& girls)

I am a 3D guy, the only Connection I have to programming is through Scripting for my 3D APP. and some actionscript for Flash..
I want to re-do my portfolio, and I want to do it in PHP, becasue I appreciate it much and also I would to learn it.
I want the Portfolio to be Super-simple, that is :

1. First Page - only thumbnails (fixed size) , no boarders, frames , or spaces between them. BUT (first problem) - I want it RANDOM on each load.

2. Clicking on an image (thumb) it will go to a next page, where graphics is fixed (always the same), and the only thing that changes is the main image, description, and caption.

I know for you PHP wizards it would be easy to do, but i can't seems to get it to work...

I have my XML file :

<?xml version="1.0" encoding="ISO-8859-1"?>
<menu name="work">
<item>
<caption>Arc1</caption>
<Image>Image1.jpg</Image>
<Desc>Description</Desc>
<Thumb>Thumbs.jpg</Thumb>
<url value="1.php"/>
</item>
<item>
<caption>Arc2</caption>
<Image>Image2.jpg</Image>
<Desc>Description2</Desc>
<Thumb>Thumbs2.jpg</Thumb>
<url value="2.php"/>
</Work>
.
.
.

</menu>

And this is a thing I tried to assemble with copy - paste from some tutorials ( one major here and the others i can't even remember where)

<?PHP
function print_error() {
global $parser;
die(sprintf("XML Error: %s at line %d",
xml_error_string($xml_get_error_code($parser)),
xml_get_current_line_number($parser)
));
}

//create xml parser object
$parser = xml_parser_create();
xml_parser_set_option($parser,XML_OPTION_SKIP_WHITE,1);

//casing
xml_parser_set_option($parser,XML_OPTION_CASE_FOLDING,0);

//read XML file into $data
$data = implode("",file('menu.xml'));

//parse XML input $data
xml_parse_into_struct($parser,$data,&$d_ar,&$i_ar) or print_error();

//echo '<pre>';
//print_r($d_ar);
//print_r($i_ar);

//cycle all <item> tags.
//$i_ar['item'] contains all pointers to <item> tags
for($i=0; $i<count($i_ar['item']); $i++) {
//<item> nested inside another <item>
if($d_ar[$i_ar['item'][$i]]['type']=='open') {
//extract needed information
for($j=$i_ar['item'][$i]; $j<$i_ar['item'][$i+1]; $j++) {
if($d_ar[$j]['tag'] == 'caption') {
$caption = $d_ar[$j]['value'];
}elseif($d_ar[$j]['tag'] == 'url') {
$url = $d_ar[$j]['attributes']['value'];
}
}elseif($d_ar[$j]['tag'] == 'Image') {
$Image = $d_ar[$j]['attributes']['value'];
}
}elseif($d_ar[$j]['tag'] == 'Desc') {
$Desc = $d_ar[$j]['attributes']['value'];
}
}elseif($d_ar[$j]['tag'] == 'Thumb') {
$Thumb = $d_ar[$j]['attributes']['value'];
}

}
//output link
echo '<a href="'.$url.'">'.str_repeat('=',$d_ar[$j]['level']-1).$caption.'</a><br>';
}
}

//unseting XML parser object
xml_parser_free($parser);
?>

so ... Question is Here :

1.How do I take the data , and turn it into a RANDOM ORDER from my XML ??
2.How do I create the next page (the one with the description and the main image ??
3. Actually all the questions should be just this one "" HHHEEELLPPP "

(I am over my head here ;D )

ShogunWarrior · July 9, 2006

Hey, for a beginner it's not too bad.
I worked on your code for a bit and now have it outputting the items and their thumbnail.
[code]
<?php

function print_error() {
global $parser;
die(sprintf("XML Error: %s at line %d",
xml_error_string($xml_get_error_code($parser)),
xml_get_current_line_number($parser)
));
}

//create xml parser object
$parser = xml_parser_create();
xml_parser_set_option($parser,XML_OPTION_SKIP_WHITE,1);

//casing
xml_parser_set_option($parser,XML_OPTION_CASE_FOLDING,0);

//read XML file into $data
$data = implode("",file('menu.xml'));

//parse XML input $data
xml_parse_into_struct($parser,$data,$d_ar,$i_ar) or print_error();

//print_r($d_ar);

//print_r($i_ar);

//cycle all <item> tags.

for($i=0; $i<count($i_ar['item']); $i+=2) {
//<item> nested inside another <item>
if($d_ar[$i_ar['item'][$i]]['type']=='open') {
//extract needed information
for($j=$i_ar['item'][$i]; $j<$i_ar['item'][$i+1]; $j++) {

if($d_ar[$j]['tag'] == 'caption') {
$caption = $d_ar[$j]['value'];
}elseif($d_ar[$j]['tag'] == 'url') {
$url = $d_ar[$j]['attributes']['value'];
}
elseif($d_ar[$j]['tag'] == 'Image') {
$Image = $d_ar[$j]['value'];
}
elseif($d_ar[$j]['tag'] == 'Desc') {
$Desc = $d_ar[$j]['value'];
}
elseif($d_ar[$j]['tag'] == 'Thumb') {
$Thumb = $d_ar[$j]['value'];
}
}
}
//output link
echo '<a href="'.$url.'">'.str_repeat('=',$d_ar[$j]['level']-1).$caption.'<img src="'.$Thumb.'" alt="" />'.'</a><br />';
}

//unseting XML parser object
xml_parser_free($parser);
?>
[/code]

I changed quite alot, namely this:
[code] for($i=0; $i<count($i_ar['item']); $i+=2) { [/code]
You see, I changed it to add 2 each time around the loop.
I did this because for each item in the menu there are two entries in the index, one for each opening and beginning tag. This will now skip to each beginning tag.

To see it working go here: [url=http://igoradio.com/xmlMenu/]http://igoradio.com/xmlMenu/[/url]
To see it working with randomization: [url=http://igoradio.com/xmlMenu/?i=2]http://igoradio.com/xmlMenu/?i=2[/url]

The code for randomization is:
[code]
<?php

function print_error() {
global $parser;
die(sprintf("XML Error: %s at line %d",
xml_error_string($xml_get_error_code($parser)),
xml_get_current_line_number($parser)
));
}

//create xml parser object
$parser = xml_parser_create();
xml_parser_set_option($parser,XML_OPTION_SKIP_WHITE,1);

//casing
xml_parser_set_option($parser,XML_OPTION_CASE_FOLDING,0);

//read XML file into $data
$data = implode("",file('menu.xml'));

//parse XML input $data
xml_parse_into_struct($parser,$data,$d_ar,$i_ar) or print_error();

//print_r($d_ar);

//print_r($i_ar);

//cycle all <item> tags.

//Create the items array
$items = array();

for($i=0; $i<count($i_ar['item']); $i+=2) {
//<item> nested inside another <item>
if($d_ar[$i_ar['item'][$i]]['type']=='open') {
//extract needed information
for($j=$i_ar['item'][$i]; $j<$i_ar['item'][$i+1]; $j++) {

if($d_ar[$j]['tag'] == 'caption') {
$items[$i]['caption'] = $d_ar[$j]['value'];
}elseif($d_ar[$j]['tag'] == 'url') {
$items[$i]['url'] = $d_ar[$j]['attributes']['value'];
}
elseif($d_ar[$j]['tag'] == 'Image') {
$items[$i]['Image'] = $d_ar[$j]['value'];
}
elseif($d_ar[$j]['tag'] == 'Desc') {
$items[$i]['Desc'] = $d_ar[$j]['value'];
}
elseif($d_ar[$j]['tag'] == 'Thumb') {
$items[$i]['Thumb'] = $d_ar[$j]['value'];
}
}
}
}

//Shuffle it up!!
shuffle($items);

//Now display them in the shuffled order
foreach($items as $it)
{
echo '<a href="'.$it['url'].'">'.str_repeat('=',$d_ar[$j]['level']-1).$it['caption'].'<img src="'.$it['Thumb'].'" alt="" />'.'</a><br />';
}

//unseting XML parser object
xml_parser_free($parser);
?>
[/code]

If that's working then I'll help with the single item page.

krembo99 · July 10, 2006

Thanks Man !!!

You are a genious!!!

I just saw your reply now , THANKS !!!!

It works great (gave me an error first, but i got through it)

The example is here (only the start, it will have something like 400 thumbs of my works..):

[url=http://www.magmalab.net/k99_tk/chromotest/index.php]http://www.magmalab.net/k99_tk/chromotest/index.php[/url]

The only thing i changed was the output :

echo '<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><a href="'.$it['url'].'"><img src="'.$it['Thumb'].'" alt="'.str_repeat('=',$d_ar[$j]['level']-1).$it['Caption'].'" hspace="0" vspace="0" border="0"/>'.'</a>';

(by the way, the ALT is not working, I tried to change it to alt="'.str_repeat('=',$d_ar[$j]['level']-1).$it['Desc'].'", but it did not show. But i know how to fix that ..)

So , actually, if i would like to add some feature (like "alt" ) or to take something down , there will be no problem as i understood...

But how do i go now to the construction of the single page , that will use the same features ?

And is it possiable, FROM THE XML , to establish some trigger, that would say that ONLY for this item, the link is fixed and not dynamic ,and more important - can i , based on the XML again, divide it to categories, so the user can define "now i want only 3d" , " now i want only photography", "now i want only architecture " etc...

THANKS AGAIN MAN !!!!! I can't belive what a fast reply !!

ShogunWarrior · July 10, 2006

I have taken my code and change it to do what yours does, with some size improvements and so that the ALT tag works. See here:[url=http://igoradio.com/xmlMenu?i=3]http://igoradio.com/xmlMenu?i=3[/url]
I wasn't 100% sure what you meant about the static link so you may have to clarify.
I think the easiest thing to do is forget the URL tag in the XML and instead use the image name as the URL so it would be like: [b]index.php?img=th00000h.jpg[/b], this will save manually adding a URL for each one.

As for the categories the XML could be changed to this:
[code]
<item>
<caption>Arc4</caption>
   <Image>th00000H.jpg</Image>
   <Desc>Description</Desc>
   <Categories>3D,Abstract,Maya</Categories>
   <Thumb>th00000hthumb.gif</Thumb>
</item>
[/code]
Then, the code would check and return the images for the category you want.

Here's the code, the HTML is at the bottom, so you can customise the page.
[code]
<?php

function print_error() {
global $parser;
die(sprintf("XML Error: %s at line %d",
xml_error_string($xml_get_error_code($parser)),
xml_get_current_line_number($parser)
));
}

//create xml parser object
$parser = xml_parser_create();
xml_parser_set_option($parser,XML_OPTION_SKIP_WHITE,1);

//casing
xml_parser_set_option($parser,XML_OPTION_CASE_FOLDING,0);

//read XML file into $data
$data = implode("",file('menu.xml'));

//parse XML input $data
xml_parse_into_struct($parser,$data,$d_ar,$i_ar) or print_error();

//print_r($d_ar);

//print_r($i_ar);

//cycle all <item> tags.

//Create the items array
$items = array();

for($i=0; $i<count($i_ar['item']); $i+=2) {
//<item> nested inside another <item>
if($d_ar[$i_ar['item'][$i]]['type']=='open') {
//extract needed information
for($j=$i_ar['item'][$i]; $j<$i_ar['item'][$i+1]; $j++) {

if($d_ar[$j]['tag'] == 'caption') {
$items[$i]['caption'] = $d_ar[$j]['value'];
}elseif($d_ar[$j]['tag'] == 'url') {
$items[$i]['url'] = $d_ar[$j]['attributes']['value'];
}
elseif($d_ar[$j]['tag'] == 'Image') {
$items[$i]['Image'] = $d_ar[$j]['value'];
}
elseif($d_ar[$j]['tag'] == 'Desc') {
$items[$i]['Desc'] = $d_ar[$j]['value'];
}
elseif($d_ar[$j]['tag'] == 'Thumb') {
$items[$i]['Thumb'] = $d_ar[$j]['value'];
}
}
}
}

//Shuffle it up!!
shuffle($items);

//Init Thumbs
$thumbs = '';

//Now display them in the shuffled order
foreach($items as $it)
{
$thumbs .= '<a href="'.$it['url'].'">'.'<img src="'.$it['Thumb'].'" alt="'.$it['Desc'].'" />'.'</a>';
}

//unseting XML parser object
xml_parser_free($parser);
?>

<html>
<head>
<title>Gallery Page</title>
<style type="text/css">
body,html{margin:0;padding:0;background-color:#000000;}
img{padding:0;margin:0;border:0;display:inline;}
</style>
</head>

<body>

<?php echo($thumbs); ?>

</body>

</html>
[/code]

So, I'll do the single page if you'd like, once we clarify some stuff.

krembo99 · July 12, 2006

Hi ...

Well... the TAG still does not work for me, but I think it is because I use Firefox. in IE it works , and it worked also before. I do not know why my Firefox does not show it, but never mind, it is a minor problem.

about the URL :

I see what you mean about the URL like ---- index.php?img=th00000h.jpg --- but then, and I might be wrong here, after one clocks the link, only an image will be opened as the next page.

Instead what I wanted is that after I click a thumb, a page will dynamicly (php) created, with the same attributes from the xml, which means caption, description,image, category, and so on....
BUT - some of the thumbs, should not be made dynamicly, but remain static (sometimes HTML,sometimes FLASH sometimes external links to other websites etc...) - so what maybe what i need is to leave the URL in the XML but to do something like this:

If the URL is null (i leave the tag empty, or write 0 ) so the page is created dynamiclly, taking the image name, caption etc.
If the URL is indicated, so the link will be a simple link that will go to where it is indicated to go, weather a pdf, external link, or HTML inside the server..

About the category,the system you suggested is great, but how do I make the script know what are the categories ?
If you will go to the test page here:

[url=http://www.magmalab.net/k99_tk/chromotest/index.php]http://www.magmalab.net/k99_tk/chromotest/index.php [/url]

you will see i have put some example thumbs, photo, 3dviz,design,arch. etc.
When I click on one of those, I want only the thumbs of THIS category to stay, (maybe with a drop down manu, I did not decided yet)
but after all , this is all the same problem i think, how do i seperate te links that has do be dynamically made, from those who just sort, and those who are static ??
Wouldn't it be easier to define categories with another level of xml, like this :

<?xml version="1.0" encoding="ISO-8859-1"?>
<menu name="work">
<item>
<Photo>
<caption>Arc1</caption>
<Image>Image1.jpg</Image>
<Desc>Description</Desc>
<Thumb>Thumbs.jpg</Thumb>
<url value="1.php"/>
</Photo>
</item>
<item>
<Design>
<caption>Design2</caption>
<Image>Image2.jpg</Image>
<Desc>Description</Desc>
<Thumb>Thumbs.jpg</Thumb>
<url value="2.php"/>
</Design>
</item>

.
.
.

</menu>

so the script could just IGNORE the items where this level is present ? (well, after writing it i have realized that it will be just the same to add a <Category> tag :-) but i still do not know how to sort it, this script is over my capabilities here :-)

Well, I really hope I have explained well... :-\ i am not so sure :)
Thanks again for everything, you have been extremely helpful so far !!
Ciao
k99

ShogunWarrior · July 12, 2006

Ok, let's begin:

[b]1)[/b] Internet Explorer incorrectly displays the ALT tag an mouse-over, it is meant only as an alternative to the image, but we have got used to the IE behaviour as normal.

[b]2)[/b] The URL [b]index.php?image=th000001.jpg[/b] isn't limited to displaying the image, what it does is give the name of the image to the script, which will search the XML and display the Description, Caption etc. [u]in whatever way you want[/u].

[b]3)[/b] As for the static pages, the best way to do this is to leave the <url></url> tag empty where it should be dynamic and where it is not empty, the script should output the link to the static page, simple enough.

[b]4)[/b] As for know, I think you should go through the XML, emptying the [b]<URL>[/b] tag where not needed and adding categories in the [b]<category>[/b] tag.

It's all within scope, if the information's there.

[b][u]I've implemented the following:[/u][/b]
[b]1)[/b] Caption should display by using link's title tag.
[b]2)[/b] Implemented dynamic display page for a single image.
[b]3)[/b] Static pages can be used by adding the URL to <url> tag.

Check it out: http://igoradio.com/xmlMenu/

I haven't yet done the categories, need clarification.

krembo99 · July 22, 2006

Well ....

First of all i have to appologize for the late replay, I had some seriouse personal problem, and I could not have replyed before..

Now for your reply :

1) , yes, I have found out by myself that the ALT is not working ONLY in my firefox.... :-) it is working great with explorer ...

How did you maake it work with Firefox as well ??

2) About the URL ... Thanks for the explanation, i thought that a URL like index.php?image=th000001.jpg will only show the image, if it can create any page, and if it is te easiest way, so it is perfect :-)

3) I also thinks that just leaving the URL empty to create a dynamic page and filling it to go to static pages is the best way....

about your new implementations - how did you did that for Firefox ?? (iv'e already asked that once, I know :-) )

The categories is a s following :

All of the work I am doing, and will do, can be divided to 5-6 categories.

3D , Photography, Architeecture, Photography, Design, Graphics ETC.... I would like to have some kind of a "filter" , with adrop down menu, or maybe with normal buttons, (it does not matter - I will decide it better) that when chosen, will show ONLY thumbs from that category....
For example, a user could choose to see only Photography works, or only Architecture (or a comination of both) and when choosing that, only those relevant thumbs will be shown. If a user clicks ALL, the page will display all categories.
I hope I made myself clear , but even if not - it is not so important - with wht you helped me so far, I am quite happy with what i have up to now.....

I really do not know how to thank you for your help,I am usually on the helping side in 3D Forums and i never realised how important it is, and if I will find out how to shoot your KARMA up, i would be happy to do so !!!
(that is the only thing I can do to help, unless you need some graphic design or something for your web ..)

Thanks again

k9

ShogunWarrior · July 23, 2006

Hi,

Sorry to here that, it's not a problem at all.

[b]1) [/b] Because all the images link to another page, I set the TITLE of the links, these are displayed by default in all browsers.

[b]2) , 3)[/b] That's great that they're ok.

I've implemented the categories feature, so you XML might be like:
[code]
<item>
<caption>Title 1</caption>
<Thumb>th00000H.jpg</Thumb>
<Desc>Description 1</Desc>
<Image>th00000H.jpg</Image>
<url value=""/>
<categories>3d,Graphics</categories>
</item>
<item>
<caption>Static</caption>
<Thumb>th000000.jpg</Thumb>
<Desc>StaticContent</Desc>
<Image>th000000.jpg</Image>
<url value="static_example.html"/>
<categories>3d,Design</categories>
</item>
[/code]
You can supply multiple categories for a picture, and then request multiple categories from the page.
So, for example:
[b]index.php?cat=3D[/b] will display both the images because they are both in the 3D category.
[b]index.php?cat=Design,graphics[/b] will display them both because the first is Graphics, the second Design.

[b]I put[/b] a select box at the top of the gallery page as a working example, which I can change.
The page code is:
[code]
<?php

function print_error() {
global $parser;
die(sprintf("XML Error: %s at line %d",
xml_error_string($xml_get_error_code($parser)),
xml_get_current_line_number($parser)
));
}

//create xml parser object
$parser = xml_parser_create();
xml_parser_set_option($parser,XML_OPTION_SKIP_WHITE,1);

//casing
xml_parser_set_option($parser,XML_OPTION_CASE_FOLDING,0);

//read XML file into $data
$data = implode("",file('menu.xml'));

//parse XML input $data
xml_parse_into_struct($parser,$data,$d_ar,$i_ar) or print_error();

//print_r($d_ar);

//print_r($i_ar);

/*
* Take the categorie(s) from $_GET
*/
$categories = ((isset($_GET['cat']))?( strtoupper($_GET['cat']) ):(FALSE));
if($categories != FALSE)
{
$cat_array = explode(',',trim($categories));
}

//cycle all <item> tags.

//Create the items array
$items = array();
$includeItem = true;
$cat_exists = false;

$cnt = count($i_ar['item']);
for($i=0; $i<$cnt; $i+=2) {
//<item> nested inside another <item>
if($d_ar[$i_ar['item'][$i]]['type']=='open') {

//extract needed information
$temp = array();
for($j=$i_ar['item'][$i]; $j<$i_ar['item'][$i+1]; $j++) {
//print_r( $d_ar[$j] );
if($d_ar[$j]['tag'] == 'caption') {
$temp['caption'] = $d_ar[$j]['value'];
}elseif($d_ar[$j]['tag'] == 'url') {
$temp['url'] = $d_ar[$j]['attributes']['value'];
}
elseif($d_ar[$j]['tag'] == 'Image') {
$temp['Image'] = $d_ar[$j]['value'];
}
elseif($d_ar[$j]['tag'] == 'Desc') {
$temp['Desc'] = $d_ar[$j]['value'];
}
elseif($d_ar[$j]['tag'] == 'Thumb') {
$temp['Thumb'] = $d_ar[$j]['value'];
}
elseif($d_ar[$j]['tag'] == 'categories'){
$cat_exists = true;
if($categories!=False)
{
$cat_explode = explode(',',((isset($d_ar[$j]['value']))?( strtoupper($d_ar[$j]['value']) ):('')));
$inter = array_intersect($cat_array,$cat_explode);
if(count($inter)>0)
{
$includeItem = true;
$temp['categories'] = $d_ar[$j]['value'];
}
else
{
$includeItem = false;
}
}
else
{
$includeItem = true;
}
}
}
if($categories===false || ($categories!==false && $cat_exists===true && $includeItem === True))
{
$items[] = $temp;
}
}
}

//Shuffle it up!!
shuffle($items);

//Init Thumbs
$thumbs = '';

//Now display them in the shuffled order
foreach($items as $it)
{
$url = ((trim($it['url'])!='')?($it['url']):('single.php?img='.$it['Image']));
$thumbs .= '<a href="'.$url.'" title="'.$it['caption'].'">'.'<img src="'.$it['Thumb'].'" alt="'.$it['caption'].'" />'.'</a>';
}

//unseting XML parser object
xml_parser_free($parser);
?>

<html>
<head>
<title>Gallery Page <?=((isset($categories) && $categories!==false)?(', Category:'.$categories):(''))?></title>
<style type="text/css">
body,html{margin:0;padding:0;background-color:#000000;}
img{padding:0;margin:0;border:0;display:inline;}
</style>
</head>

<body>

<form name="cat_select" method="GET" action="<?= basename($_SERVER['PHP_SELF'])?>">
<select name="cat">
<option name="3d" value="3d">3D</option>
<option name="photography" value="photography">Photography</option>
<option name="architecture" value="architecture">Architecture</option>
<option name="design" value="design">Design</option>
<option name="graphics" value="graphics">Graphics</option>
</select>
<input type="submit" name="submit" value="Show Images" />
</form>

<?php echo($thumbs); ?>

</body>

</html>
[/code]

Cheers.

Working example here: http://igoradio.com/xmlMenu/

Sign In

Complete Newbie Help needed :)

Recommended Posts

krembo99

Link to comment

Share on other sites

ShogunWarrior

Link to comment

Share on other sites

krembo99

Link to comment

Share on other sites

ShogunWarrior

Link to comment

Share on other sites

krembo99

Link to comment

Share on other sites

ShogunWarrior

Link to comment

Share on other sites

krembo99

Link to comment

Share on other sites

ShogunWarrior

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information