Can enyone help please????

[cubikated]

Hi,

I'm totally new to web design and have been following YouTube tutorials and so far managed to achieve results.

In my gallery page I'm using the Highslide Mini Gallery and I have four Mini Galleries on the page. as you can see the HTML markup in infinite (this is just for four, imagine having 10).

Could someone please help me, give tips on using PHP to cut down on the infinite HTML markup? Maybe I could create a separate HTML file for each gallery and "I think" include the file dynamically using PHP. Hope I got the terminology right 🙂

Here goes my code......... 🙂

Thanks in advance for any help.

THIS IS ONLY FOR TWO GALLERIES....CANT POST THE WHOLE THING BECAUSE OF THE LIMITATION. ACTUALLY I HAVE TWO MORE LIKE THIS, AND THAT'S WHY I SAY IT'S INFINITE!!!!

<!-- gallerytable begins -->
		<div id="gallerytable"><table width="100%" border="1" align="center" cellpadding="5" cellspacing="20">
  <tr>
    <td width="23%">Phasellus tempor elementum metus vitae imperdiet. Nulla orci neque, convallis sed suscipit nec, iaculis nec odio. Phasellus sagittis sodales semper. Integer aliquam lectus a lectus mollis mollis rhoncus felis vestibulum. Etiam faucibus ipsum acmetus vehicula porttitor</td>
    <td width="23%">Phasellus tempor elementum metus vitae imperdiet. Nulla orci neque, convallis sed suscipit nec, iaculis nec odio. Phasellus sagittis sodales semper. Integer aliquam lectus a lectus mollis mollis rhoncus felis vestibulum. Etiam faucibus ipsum acmetus vehicula porttitor</td>
    <td width="23%">Phasellus tempor elementum metus vitae imperdiet. Nulla orci neque, convallis sed suscipit nec, iaculis nec odio. Phasellus sagittis sodales semper. Integer aliquam lectus a lectus mollis mollis rhoncus felis vestibulum. Etiam faucibus ipsum acmetus vehicula porttitor</td>
    <td width="23%">Phasellus tempor elementum metus vitae imperdiet. Nulla orci neque, convallis sed suscipit nec, iaculis nec odio. Phasellus sagittis sodales semper. Integer aliquam lectus a lectus mollis mollis rhoncus felis vestibulum. Etiam faucibus ipsum acmetus vehicula porttitor</td>
  </tr>
  <tr>
    <td><div class="highslide-gallery">
	<a id="thumb1"href="highslide/images/1.jpg" class="highslide" 
			title="This is just an image" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/1thumb.jpg"  alt=""/>
	</a>
	<div class="hidden-container">
	<a href="highslide/images/2.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/2thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images/3.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/3thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images/4.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/4thumb.jpg"  alt=""/>
	</a>
    <a href="highslide/images/5.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/5thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images/6.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/6thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images/7.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/7thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images/8.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/8thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images/9.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/9thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images/10.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/10thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images/11.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/11thumb.jpg"  alt=""/>
	</a>
	</div>
</div>
</td>
    <td><div class="highslide-gallery">
	<a id="thumb2"href="highslide/images1/1.jpg" class="highslide" 
			title="This is just an image" 
			onclick="return hs.expand(this, config2 )">
		<img src="highslide/images1/1thumb.jpg"  alt=""/>
	</a>
	<div class="hidden-container">
	<a href="highslide/images1/2.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config2 )">
		<img src="highslide/images1/2thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images1/3.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config2 )">
		<img src="highslide/images1/3thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images1/4.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config2 )">
		<img src="highslide/images1/4thumb.jpg"  alt=""/>
	</a>
    <a href="highslide/images1/5.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config2 )">
		<img src="highslide/images1/5thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images1/6.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config2 )">
		<img src="highslide/images1/6thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images1/7.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config2 )">
		<img src="highslide/images1/7thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images1/8.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config2 )">
		<img src="highslide/images1/8thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images1/9.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config2 )">
		<img src="highslide/images1/9thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images1/10.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config2 )">
		<img src="highslide/images1/10thumb.jpg"  alt=""/>
	</a>
	<a href="highslide/images1/11.jpg" class="highslide" 
			title="Caption from the anchor's title attribute" 
			onclick="return hs.expand(this, config2 )">
		<img src="highslide/images1/11thumb.jpg"  alt=""/>
	</a>
	</div>
</div>

[sneakyimp]

I have no idea what this 'highslide gallery' is, but I think the trick in making this easier is to determine what bits are repeated in this html and what bits are different each time. The bits that are different each time are probably much smaller than all the repeated HTML bits.

Then you can make a nested array (meaning an array of arrays) of the bits that are different in PHP and loop through it, echoing the repeated stuff.

$arr = array(
  array('href' => 'highslide/images/2.jpg', 'title' => 'Caption from the anchor\'s title attribute'),
  array('href' => 'highslide/images/3.jpg', 'title' => 'Caption from the anchor\'s title attribute'),
  array('href' => 'highslide/images/4.jpg', 'title' => 'Caption from the anchor\'s title attribute'),
  array('href' => 'highslide/images/5.jpg', 'title' => 'Caption from the anchor\'s title attribute')
);

foreach($arr as $item) {
  echo '
	<a href="' . $item['href'] . '" class="highslide" 
			title="' . $item['title'] . '" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/2thumb.jpg"  alt=""/>
	</a>
';
}

This is fairly basic php and it looks like your code is a bit more involved than just one array like that, but that's the basic idea. The trick here is to determine which bits are repeated and how they are repeated and then create some data structures accordingly.

The PHP code I just wrote is still a bit verbose because you have to type all that 'array' stuff. If you are feeling motivated, you could easily parse a text file or use a database and eliminate even more redundant info. Your text file might look like this:

"highslide/images/2.jpg", "Caption from the anchor's title attribute"
"highslide/images/3.jpg", "Caption from the anchor's title attribute"
"highslide/images/4.jpg", "Caption from the anchor's title attribute"
"highslide/images/5.jpg", "Caption from the anchor's title attribute"
"highslide/images/6.jpg", "Caption from the anchor's title attribute"

And you could parse it like so:

$row = 1;
if (($handle = fopen("test.csv", "r")) !== FALSE) {
    while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
        $row++;
        echo '
	<a href="' . $data[0] . '" class="highslide" 
			title="' . $data[1] . '" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/2thumb.jpg"  alt=""/>
	</a>' . "\n";

}
fclose($handle);
}