source code generator

[Dada78]

Hello. I seem to have a lot going on getting bored with some pages and starting on others. Anyways. I have a page I am building when I need to display the source code so people can paste on thier site, blog, myspace, etc. I don't mean like right-click view source code ethier. I have several icons on this page where people can select one or more icons and then hit a button that says generator code. It will then show a generated HTML code they can past on thier site or whatever of the icons they had selected. Now building the page is now problem. What I am unsure of is how to go about generating the HTML for the selected feilds the visitors select. Any suggestions or ideas would be great.

-Thanks

[bpat1434]

Give an example. Are you using radio buttons or checkboxes? What are you creating HTML code of? Images or textual links?

Are you trying to create a type of "free advertisement" so that your site can have "badges" on other blogs and such that links back?

If that's what you want, then it's just as easy as generating the basic code, and running the code through [man]html_entities/man or [man]str_replace/man to replace the HTML tags, and then display. Or, you can put the HTML code directly into a text-field and have the user copy it.

Many sites use the text-field option since the text-field value isn't parsed as HTML....

~Brett

[Dada78]

Here is the page it will be for.

http://www.texascaching.com/index.php?page=cache_icons

Note that if they select a box with then select a radio button next to if for "no" it will display the icon with a line through it. Then after they select the icons they need you would hit the generate button and have it display a preview and below it a code to create the icons they selected like this.

http://www.texascaching.com/test/selector.php

Now I would be calling the script with a IFRAME so all of it can take place on 1 page.

Is this fesible?

-Thanks

[bpat1434]

Okay... i get what you're saying. Assuming you have the images already done (which it seems you do) it's just a matter of creating an image with the GD library and placing those "badges" along the top. You can define how many there will be with how many check-boxes are selected. And when you go to add them, you can check to see if the radio-button is Yes or No to define which image should be added.

NOw, looking at your code you can simply create a massive array and then based upon the $_POSTed variables, you can loop through it and create your image. I would suggest that if you're using the same name for each checkbox, you make it an array by adding the square brackets to the end of the name (i.e. name="attributes[]").

~Brett

[Dada78]

Ok, maybe you lost me I understand the array part, just need to remember how to do those again. How does all this tie into generating the HTML code for one to copy and paste. I guess where you lost me is where you said

you can loop through it and create your image.

Now the images are going to stay on my server. I just need to output the html code to link to the images depending on what the user selected. For exmaple the select the images they want to use and hit "generate code" well in the box below it will generate a code that will look like this.

<table align="center" style="font-size:12pt;font-family:arial;" border="0" cellpadding="2" cellspacing="0" width="80%">
<tr>
<td align="center">
<img src='http://www.texascaching.com/images/cache_icons/ivy0.gif' border='1' align='middle' > No Poison Plants Nearby <img src='http://www.texascaching.com/images/cache_icons/thorn0.gif' border='1' align='middle' > No Thorns<br> <img src='http://www.texascaching.com/images/cache_icons/snake.gif' border='1' align='middle' alt='Snakes' > Snakes<br> <img src='http://www.texascaching.com/images/cache_icons/mud0.gif' border='1' align='middle' alt='No Mud' > No Mud! <img src='http://www.texascaching.com/images/cache_icons/offroad0.gif' border='1' align='middle' alt='No offroad vehicles' > No Offroad Vehicles <img src='http://www.texascaching.com/images/cache_icons/pw.gif' border='1' align='middle' alt='Muggles' > Beware of Muggles!</td></tr>
</table>

Then that user can copy and past it where they need it on thier site, page, where every. I don't know if that's what you were trying to explain to me or not. If so forgive me, it's late and I need some sleep.

-Thanks

[bpat1434]

So.... something like:

<?php
$generated = ''; // A string to hold the generated code...
$images = array( 'kid'=>'kid.gif', 'lunch'=>'lunch.gif', 'ivy'=>'ivy.gif', 'thorn'=>'thorn.gif', 'cactus'=>'cactus.gif', 'date1'=>'date.gif'); // Just a select few..
$extra = array('lunch' => 'soup', 
'ivy'=>'poisonplants', 
'poisonplants'=>array('yes'=>'ivy.gif', 'no'=>'ivy0.gif'), 
'thorn'=>'briars', 
'briars'=>array('yes'=>'thorn.gif', 'no'=>'thorn0.gif'), 
'cactus'=>'sting', 
'sting'=>array('yes'=>'cactus.gif', 'no'=>'cactus0.gif'), 
'date1'=>'yearround', 
'yearround'=>array('yes'=>'date.gif', 'no'=>'date0.gif')); // Just a select few

if(isset($_POST['attributes']))
{
  // If they've submitted the form
  foreach($_POST['attributes'] as $var=>$val)
  {
    // Loop through each "attribute" to get the images
    if(array_key_exists($var, $extra))
    {
      // If it's in our "extra" array, we need to figure out if it's img.gif or img0.gif (yes or no)
      if($_POST[$extra[$var]]=='yes')
      {
        $image = $extra[$extra[$var]]['yes'];
      }
      else
      {
        $image = $extra[$extra[$var]]['no'];
      }
    }
    else
    {
      $image = $images[array_search($var, $images)];
    }

// We've got $image defined with the image name, now just display the code:
echo '<img src="http://www.texascaching.com/images/cache_icons/'.$image.'" align="middle" border="1" alt="'.ucfirst($var).'">';
$generated .= '<img src="http://www.texascaching.com/images/cache_icons/'.$image.'" align="middle" border="1" alt="'.ucfirst($var).'">';
  }
  echo 'Just copy and paste the code below:<br>
<textarea cols="40" rows="40">'.$generated.'</textarea>';
}

Something like that. You have arrays defining what images are used based upon the user input. Then, you also have an array for extra info in case that specific image has a Yes or No question attached to it. Then, you just output the image, and store the code in the $generated string. Once you're done with their selections, output the $generated string inside of a text-area.

[Dada78]

Thanks, that makes more sense now after some sleep. I am getting this error though.

Warning: Invalid argument supplied for foreach() in /home/texascac/public_html/attribute_code_generator.php on line 17

which is this line

// If they've submitted the form
  foreach($_POST['attributes'] as $var=>$val) 

I changes the name of the form to attributes but that didn't work.

Also if I wanted to add text next to the image it would be something like this correct for each image?

'briars'=>array('yes'=>'thorn.gif Thorns', 'no'=>'thorn0.gif No Thorns'),

etc. That would be correct right?

-Thanks

[bpat1434]

No, if you wnated to add text, you'd have to turn it into an array, and reference it properly. Make it an array like:

array('briars'=>array('yes'=>array('img'=>'thorn.gif', 'alt'=>'Thorns', 'tag'=>'Thorns in the area'),
'no'=>array('img'=>'thorn0.gif', 'alt'=>'No Thorns', 'tag'=>'No Thorns in the area')
));

The form checkboxes should have the name: "attributes[]". That makes it an array.

~Brett

[Dada78]

Ok thank you, I have got it working. It was the whole attributes[] thing in the form. I had changed the name but like you said I needed to make it "attributes[]" It is outputing the source code and preview image. Even though it's not showing the right one. That's not a biggie just need to tweak it but I understand how it works now. If you see my up past midnight again starting new pages send me to bed...LoL

-Thanks again.

[Dada78]

Ok this is only one small adjustedment I am trying to make that I just can't get. I know where I need to set it but cant get it right.

In this code.

 // We've got $image defined with the image name, now just display the code:
    echo '<img src="http://www.texascaching.com/images/cache_icons/'.$image.'" align="middle" border="1" alt="'.ucfirst($var).'">';
    $generated .= '<img src="http://www.texascaching.com/images/cache_icons/'.$image.'" align="middle" border="1" alt="'.ucfirst($var).'">';
  }
  echo '<textarea cols="55" rows="15">'.$generated.'</textarea>';
} 
?>

I want the generate image sample to be between the button and the text feild.

For an example click select the first icon with the bear. then hit the generate button. You will see the sample image is at the bottom left. I would like it between the button and text feild but can't seem to get it.

http://www.texascaching.com/index.php?page=cache_icons

Also something is not right, It will generate the code for as many as you select, but it only generates one image. The rest are numbers. Not sure why, everything looks the same as the first one that is working.

Any suggestions?

-Thanks

[Dada78]

Is this correct the correct way to set up this array.

This is how it is now

// Just a select few..
$extra = array('lunch' => 'soup',
'ivy'=>'poisonplants',
'poisonplants'=>array('yes'=>'ivy.gif', 'no'=>'ivy0.gif'),
'thorn'=>'briars',
'briars'=>array('yes'=>'thorn.gif', 'no'=>'thorn0.gif'),
'cactus'=>'sting',
'sting'=>array('yes'=>'cactus.gif', 'no'=>'cactus0.gif'),
'date1'=>'yearround',
'yearround'=>array('yes'=>'date.gif', 'no'=>'date0.gif'));
 // Just a select few

With this, the section with the briiars is the code of question.

// Just a select few..
$extra = array('lunch' => 'soup',
'ivy'=>'poisonplants',
'poisonplants'=>array('yes'=>'ivy.gif', 'no'=>'ivy0.gif'),
'thorn'=>'briars',
''briars'=>array('yes'=>array('img'=>'thorn.gif', 'alt'=>'Thorns', 'tag'=>'Thorns in the area'),
'no'=>array('img'=>'thorn0.gif', 'alt'=>'No Thorns', 'tag'=>'No Thorns in the area'),
'cactus'=>'sting',
'sting'=>array('yes'=>'cactus.gif', 'no'=>'cactus0.gif'),
'date1'=>'yearround',
'yearround'=>array('yes'=>'date.gif', 'no'=>'date0.gif'));
 // Just a select few

-Thanks

[Dada78]

This is currently how I have it now

// Just a select few..
$extra = array('lunch' => 'soup',
'ivy'=>'poisonplants',
'poisonplants'=>array('yes'=>'ivy.gif', 'no'=>'ivy0.gif'),
'thorn'=>'briars',
'briars'=>array('yes'=>array('img'=>'thorn.gif', 'alt'=>'Thorns', 'tag'=>'Thorns in the area',
'no'=>array('img'=>'thorn0.gif', 'alt'=>'No Thorns', 'tag'=>'No Thorns in the area'), 
'cactus'=>'sting',
'sting'=>array('yes'=>'cactus.gif', 'no'=>'cactus0.gif'),
'date1'=>'yearround',
'yearround'=>array('yes'=>'date.gif', 'no'=>'date0.gif'));
// Just a select few

and I am getting this error.

Parse error: parse error, unexpected ';', expecting ')'

[bpat1434]

Missing the closing ")" on this line:

array('img'=>'thorn.gif', 'alt'=>'Thorns', 'tag'=>'Thorns in the area', 

[Dada78]

I have made the changes and looked for any other missing or un-needed symbols but everything looks normal. I am still getting the Parse error: parse error, unexpected ';', expecting ')' in /home/texascac/public_html/cache_icons.php on line 178 which would be this line.

'yearround'=>array('yes'=>'date.gif', 'no'=>'date0.gif'));

also no matter what icon you select it just shows the bear icon and that's the only one it shows. You select more then one it shows the bear and then numbers I don't know of anything else to check or why it's doing this.

-Thanks

[bpat1434]

This small sub-unit works for me. Does exactly what you want. You can follow the rest in-line as to making the arrays with all your images:

cache_icons.php

<?php // Added for proper syntax highlighting ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Geocaching </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<?php
##
## Deal with all the posted info here:
##

// Give us an empty string to write code to:
$output = '';

// Include our files with informational arrays:

if(isset($_POST))
{
	include_once('informational_array.inc.php');
	$imgroot = 'http://www.texascaching.com/images/cache_icons/';
	foreach($_POST['attributes'] as $val)
	{
		if(array_key_exists($val, $info))
		{
			$img = (is_array($info[$val]['img']))?$info[$val]['img'][$_POST[$val]]:$info[$val]['img'];
			$alt = (array_search($val, $yesno)!== FALSE)?ucfirst($_POST[$val]):'';
			$output .= '<img src="'.$imgroot.$img.'" alt="'.$alt.' '.$info[$val]['alt'].'" border="1" vspace="1" align="middle"> '.$alt.' '.$info[$val]['alt'].' ';
		}
	}
}
?>
<BODY>
<form action="?page=cache_icons" method="post" enctype="application/x-www-form-urlencoded">
<table class="fullbox" align="center" height="105" width="600">
    <tbody><tr>
      <td font="" class="contenttext" align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="550">
    <tbody><tr>
      <td align="left" width="50%"><input name="attributes[]" value="kid" type="checkbox"><img src="http://www.texascaching.com/images/cache_icons/kid.gif" align="middle" border="1" vspace="1"> Kid Friendly</td>
      <td align="left" width="50%"><input name="attributes[]" value="lunch" type="checkbox"><img src="http://www.texascaching.com/images/cache_icons/lunch.gif" align="middle" border="1" vspace="1"> Lunchtime Cache - Yes<input name="lunch" value="yes" type="radio"> No<input name="lunch" value="no" type="radio"></td>

</tr>
	</tbody>
</table>
 <table align="center" border="0" cellpadding="0" cellspacing="0" width="600"><tbody><tr><td><img alt="" src="http://images.weathertrackcast.com/themes/smooth_gray/misc/1pixel.gif" border="0" height="7" width="7"></td><td class="shadow-mid" width="100%"><img alt="" src="http://images.weathertrackcast.com/themes/smooth_gray/misc/1pixel.gif" border="0" height="7" width="7"></td><td><img alt="" src="http://images.weathertrackcast.com/themes/smooth_gray/misc/1pixel.gif" border="0" height="7" width="7"></td></tr></tbody></table> 

<table class="fullbox" align="center" cellpadding="2" cellspacing="2" width="600">
    <tbody><tr>
      <td font="" class="contenttext" style="text-align: center;" valign="top">
		<font class="contenttext"><input name="Submit" value="Click to generate your code!" type="submit"></font></td>
</tr>
<tr>
<td colspan="3" align="center" height="100">
<font class="contenttext">
<?php
##
## Print out the images & info
echo $output;
?>
<br>
<textarea cols="55" rows="15">
<?php
## Print out the code...
echo htmlentities($output);
?>
</textarea><br>

Select the <b>code</b> above then copy (CTRL + C) and paste (CTRL + V) directly into your cache page. <br>
Be sure to have the "HTML" box check on your cache edit page!</font></td>
	</tr>
</tbody></table>
 <table align="center" border="0" cellpadding="0" cellspacing="0" width="600"><tbody><tr><td><img alt="" src="http://images.weathertrackcast.com/themes/smooth_gray/misc/1pixel.gif" border="0" height="7" width="7"></td><td class="shadow-mid" width="100%"><img alt="" src="http://images.weathertrackcast.com/themes/smooth_gray/misc/1pixel.gif" border="0" height="7" width="7"></td><td><img alt="" src="http://images.weathertrackcast.com/themes/smooth_gray/misc/1pixel.gif" border="0" height="7" width="7"></td></tr></tbody></table></form>
</BODY>
</HTML>

informational_array.inc.php

<?php
$yesno = array('lunch');

$info = array(
							'kid' => array(
															'tag'=>'Kid Friendly',
															'alt'=>'Kid Friendly',
															'img'=>'kid.gif'
														),
							'lunch' => array(
															'tag' => 'Lunchtime Cache available',
															'alt' => 'Lunchtime cache',
															'img' => array('yes'=>'lunch.gif', 'no'=>'lunch0.gif')
														)
							);

?>

Hope that helps.

[Dada78]

Yes thank you this seems to be working now. I just need to enter each image one at a time. Thier are only two little things I have notice. Once you hit generate the selected checkboxes clear but every works like it's suppose to. If thier was a way to keep the check boxes checked even after a visitors hits generate.

Also I have noticed that for example you select Poison Plant Alert!, If you select Yes it will show the icon like it's suppose to and Yes Poison Plant, or for no it will say No Poison Plant. But on the lunctime it displays the same text no matter what image is displayed. I have compared the form and the array but everything is exactly the same. Does anyone else see a difference for what might be causing that.

<?php
$yesno = array('lunch');
$yesno = array('ivy');


$info = array(
                            'kid' => array(
                                                            'tag'=>'Kid Friendly',
                                                            'alt'=>'Kid Friendly',
                                                            'img'=>'kid.gif'
                                                        ),
                            'lunch' => array(
                                                            'tag' => 'Lunchtime Cache available',
                                                            'alt' => 'Lunchtime Cache',
                                                            'img' => array('yes'=>'lunch.gif', 'no'=>'lunch0.gif')
                                                        ),
                              'ivy' => array(
                                                            'tag' => 'Posion Plant Alert!',
                                                            'alt' => 'Poison Plants',
                                                            'img' => array('yes'=>'ivy.gif', 'no'=>'ivy0.gif')
                                                        )
                            );

?> 

FORM

<td align="left" width="50%"><input name="attributes[]" value="lunch" type="checkbox"><img src="http://www.texascaching.com/images/cache_icons/lunch.gif" align="middle" border="1" vspace="1"> Lunchtime Cache - Yes<input name="lunch" value="yes" type="radio"> No<input name="lunch" value="no" type="radio"></td>
</tr>
<tr>
        <td align="left" width="50%"><input name="attributes[]" value="ivy" type="checkbox"><img src="http://www.texascaching.com/images/cache_icons/ivy.gif" align="middle" border="1" vspace="1">Poison Plant Alert! - Yes<input name="ivy" value="yes" type="radio"> No<input name="ivy" value="no" type="radio"></td>

Here is the site so you can see what I am talking about

http://www.texascaching.com/index.php?page=cache_icons

-Thanks

[bpat1434]

Once again, this exact code works for me (including keeping the selection of posted items):

<?php // To set proper syntax highlighting ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Geocaching </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<?php
##
## Deal with all the posted info here:
##
$posted = FALSE;
// Give us an empty string to write code to:
$output = '';

// Include our files with informational arrays:

if(@isset($_POST['Submit']))
{
	$posted = TRUE; // Set var saying submission is posted
	include_once('informational_array.inc.php');
	$imgroot = 'http://www.texascaching.com/images/cache_icons/';
	foreach($_POST['attributes'] as $val)
	{
		if(array_key_exists($val, $info))
		{
			$img = (is_array($info[$val]['img']))?$info[$val]['img'][$_POST[$val]]:$info[$val]['img'];
			$alt = (array_search($val, $yesno)!== FALSE)?ucfirst($_POST[$val]):'';
			$output .= '<img src="'.$imgroot.$img.'" alt="'.$alt.' '.$info[$val]['alt'].'" border="1" vspace="1" align="middle"> '.$alt.' '.$info[$val]['alt'].' ';
		}
	}
}
?>
<BODY>
<form action="?page=cache_icons" method="post" enctype="application/x-www-form-urlencoded">
<table class="fullbox" align="center" height="105" width="600">
    <tbody><tr>
      <td font="" class="contenttext" align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="550">
    <tbody><tr>
      <td align="left" width="50%">
				<input name="attributes[]" value="kid" type="checkbox" <?php 
					if($posted){ 
						echo (array_search('kid', $_POST['attributes'])!==FALSE)?'checked':''; 
					} ?>
				>
				<img src="http://www.texascaching.com/images/cache_icons/kid.gif" align="middle" border="1" vspace="1"> Kid Friendly</td>
      <td align="left" width="50%">
				<input name="attributes[]" value="lunch" type="checkbox" <?php 
					if($posted){ 
						echo (array_search('lunch', $_POST['attributes'])!==FALSE)?'checked':''; 
					} ?>
					><img src="http://www.texascaching.com/images/cache_icons/lunch.gif" align="middle" border="1" vspace="1"> Lunchtime Cache - Yes<input name="lunch" value="yes" type="radio" <?php if($posted && array_search('lunch', $_POST['attributes'])!==FALSE){ echo ($_POST['lunch']=='yes')?'checked':''; } ?>> No<input name="lunch" value="no" type="radio" <?php if($posted && array_search('lunch', $_POST['attributes'])!==FALSE){ echo ($_POST['lunch']=='no')?'checked':''; } ?>></td>

</tr>
	</tbody>
</table>
 <table align="center" border="0" cellpadding="0" cellspacing="0" width="600"><tbody><tr><td><img alt="" src="http://images.weathertrackcast.com/themes/smooth_gray/misc/1pixel.gif" border="0" height="7" width="7"></td><td class="shadow-mid" width="100%"><img alt="" src="http://images.weathertrackcast.com/themes/smooth_gray/misc/1pixel.gif" border="0" height="7" width="7"></td><td><img alt="" src="http://images.weathertrackcast.com/themes/smooth_gray/misc/1pixel.gif" border="0" height="7" width="7"></td></tr></tbody></table> 

<table class="fullbox" align="center" cellpadding="2" cellspacing="2" width="600">
    <tbody><tr>
      <td font="" class="contenttext" style="text-align: center;" valign="top">
		<font class="contenttext"><input name="Submit" value="Click to generate your code!" type="submit"></font></td>
</tr>
<tr>
<td colspan="3" align="center" height="100">
<font class="contenttext">
<?php
##
## Print out the images & info
echo $output;
?>
<br>
<textarea cols="55" rows="15">
<?php
## Print out the code...
echo htmlentities($output);
?>
</textarea><br>

Select the <b>code</b> above then copy (CTRL + C) and paste (CTRL + V) directly into your cache page. <br>
Be sure to have the "HTML" box check on your cache edit page!</font></td>
	</tr>
</tbody></table>
 <table align="center" border="0" cellpadding="0" cellspacing="0" width="600"><tbody><tr><td><img alt="" src="http://images.weathertrackcast.com/themes/smooth_gray/misc/1pixel.gif" border="0" height="7" width="7"></td><td class="shadow-mid" width="100%"><img alt="" src="http://images.weathertrackcast.com/themes/smooth_gray/misc/1pixel.gif" border="0" height="7" width="7"></td><td><img alt="" src="http://images.weathertrackcast.com/themes/smooth_gray/misc/1pixel.gif" border="0" height="7" width="7"></td></tr></tbody></table></form>
</BODY>
</HTML>

[Dada78]

Thanks it's working great just taking some time to make sure I get everything put in carefully and testing each one after I have put them in. The trend I am seeing though is if the icon has a Yes or No option then the last icon that is placed is the only one that will display the Yes or No with the icon and text in the output.

for example
http://www.texascaching.com/index.php?page=cache_icons

then select a couple and then select the last one with a yes or no option. You will see that the only one that will display Yes or No with the text is the last one. I have noticed this as I have been placing them. Other then that It's working great.

-Thanks

[bpat1434]

In your informational_array.inc.php file you need to edit something....

<?php
$yesno = array('lunch');
$yesno = array('ivy'); 

should be:

<?php
$yesno = array('lunch', 'ivy', 'rest', 'of','yes', 'no', 'dependant', 'items', 'in', 'one', 'array'); 

Your way overwrites the array, when it should just be appended to.

[Dada78]

Ok thanks, that's easy enough. Would I do the same thing it I wanted to assign a certain text string to a icon? like instead of "No Available year-round" make it "Not Available year-round" Thier are some icons where I want a certain text outpit if it's a Yes or No selection. I would just make a new array for that icon correct? Or could I add it in the value of the form?

-Thanks