Selected Sub Sections in a Table

[graphicz]

I am trying to present selected subsections in a table on the home page.
I created a variable for showing the section in the home page table then I started with a code Norman suggested a while ago for top level sections on the home page:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">
<h2 class="clearall"><actinic:variable name="HomePageCatalogueTitle" /></h2>
	<table border="0" cellpadding="0" cellspacing="10" ><tr>
	<actinic:block type="TopLevelSectionList" >
		<td style="padding:5px; border:1px dotted silver; vertical-align:top;">
		<actinic:block if="%3cactinic%3avariable%20name%3d%22IsSectionIncludedInSiteMap%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22ShowInHomepageSectionList%22%20%2f%3e" >
		<actinic:variable name="SectionLinkHomePage" />								
		</actinic:block>		
		</td><td><div class="best_selling_items_spacing"><img src="theme_shim.gif" height="1" width="1" alt=" " /></div></td>
		<actinic:block if="%28%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%25%204%29%20%3d%3d%200" ></tr><tr></actinic:block>	
		</div>
	</actinic:block>
	</tr></table>
</actinic:block>

I adapted it thus:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">
<h2 class="clearall"><actinic:variable name="HomePageCatalogueTitle" /></h2>
	<table border="0" cellpadding="0" cellspacing="10" ><tr>
	<actinic:block type="EntireSectionList" >
		<td style="padding:5px; border:1px dotted silver; vertical-align:top;">
		<actinic:block if="%3cactinic%3avariable%20name%3d%22IsSectionIncludedInSiteMap%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22ShowInExtraHomePageList%22%20%2f%3e" >
		<actinic:variable name="SectionLinkHomePage" />								
		</actinic:block>		
		</td><td><div class="best_selling_items_spacing"><img src="theme_shim.gif" height="1" width="1" alt=" " /></div></td>
		<actinic:block if="%28%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%25%204%29%20%3d%3d%200" ></tr><tr></actinic:block>	
		</div>
	</actinic:block>
	</tr></table>
</actinic:block>

As can be seen from the live test site http://www.graphicz.eu.com/site1/ There are lots of empty boxes corresponding with the list indices that are not selected. (The section dump (again c/o Norman) is at the bottom of the page.)
The issue seems to be around using the list index to create the new lines in the table but I tried making a selector along the lines of the home page best sellers list but ran into all sorts of coding errors (it didn't like the section variables). Please can anyone lay healing hands on this problem?
Thanks so much.

PS-Here is a screenshot of the content tree if that is of any help:
http://www.graphicz.eu.com/screenshot-sampleimages.jpg

[IanSaunders]

If I were to hazard a guess, I'd say it's because you're generating the table cell in the code before you test whether or not you're going to fill it. Immeditately afterwards, you close the cell. If the item tested isn't eligible, you've just generated an empty table cell.

I'm afraid I can't spare any time to delve. If I were doing it, I wouldn't use a table at all - I'd use floated divs, but that's probably an additional layer of complexity you don't need.

[graphicz]

Thanks Ian

Here is my second attempt:

<b>2nd attempt</b>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">
<h2 class="clearall"><actinic:variable name="HomePageCatalogueTitle" /></h2>
	<table border="0" cellpadding="0" cellspacing="10" ><tr>
	<actinic:block type="EntireSectionList" ><actinic:block if="%3cactinic%3avariable%20name%3d%22IsSectionIncludedInSiteMap%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22ShowInExtraHomePageList%22%20%2f%3e" >
		<td style="padding:5px; border:1px dotted silver; vertical-align:top;">
		
		<actinic:variable name="SectionLinkHomePage" />								
				
		</td><td><div class="best_selling_items_spacing"><img src="theme_shim.gif" height="1" width="1" alt=" " /></div></td>
	</actinic:block>	<actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%206" ></tr><tr></actinic:block>	
		</div>
	</actinic:block>
	</tr></table>
</actinic:block>

It looks OK:
http://www.graphicz.eu.com/site1/and scroll down to 2nd attempt.
I moved the selecting blockifs to before the table is generated as per Ian's advice.
The blockif (

(<actinic:variable name="ListIndex" /> % 4) == 0

) to make the new line didn't work so I used

<actinic:variable name="ListIndex" /> == 6

which worked fine except I new the last image was list index 6. How can I code the blockif for the new line for clients who won't know what listindex number the sections are? I suspect there is some javascript or php that will help but I am not up to creating such. Any help would be much appreciated. Thanks.

[NormanRouxel]

You'll need 2 bits of PHP.

1) Before the loop.

<actinic:block php="true">$myindex = 0;</actinic:block>

Instead of the blockIf

<actinic:block php="true">
  if ($myindex++ >= 4)
    {
    $myindex=0;
    echo '</tr><tr>';
    }
</actinic:block>

N.B. Untested. Your job to debug / tweak.

[graphicz]

Thank you very much Norman.
I have uploaded the revisions.
http://www.graphicz.eu.com/site1/

if ($myindex++ >= 4) 

yields three columns.

if ($myindex++ >= 5) 

yields four columns.
In both instances the </tr><tr> is taken early on the second row but not the first and between different images.

However making the code before the loop myindex=1

<actinic:block php="true">$myindex = 1;</actinic:block>

And increasing the if ($myindex++ >= to 5 but leaving the next myindex at 0 the display seems to be OK. I don't know if this is a legit fix, please can someone check?

<table border="0" cellpadding="0" cellspacing="10" width="600"><tr>
		<actinic:block php="true">$myindex = 1;</actinic:block>
		<actinic:block type="EntireSectionList" ><actinic:block if="%3cactinic%3avariable%20name%3d%22IsSectionIncludedInSiteMap%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22ShowInExtraHomePageList%22%20%2f%3e" >
		<td style="padding:5px; border:1px dotted silver; vertical-align:top;">
		
		<actinic:variable name="SectionLinkHomePage" />								
				
		</td>
	</actinic:block>	<actinic:block php="true">
  if ($myindex++ >= 5)
    {
    $myindex=0;
    echo '</tr><tr>';
    }
</actinic:block>
		</div>
	</actinic:block>
	</tr></table>

Thanks again to Norman and Ian

[NormanRouxel]

Duff logic. You are counting items outside the test for valid products. You also have a completely spurious </div> in there.

Try this:

<table border="0" cellpadding="0" cellspacing="10" width="600"><tr>
<actinic:block php="true">$myindex = 0;</actinic:block>
<actinic:block type="EntireSectionList" >
	<actinic:block if="%3cactinic%3avariable%20name%3d%22IsSectionIncludedInSiteMap%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22ShowInExtraHomePageList%22%20%2f%3e" >
		<td style="padding:5px; border:1px dotted silver; vertical-align:top;"><actinic:variable name="SectionLinkHomePage" /></td>
		<actinic:block php="true">
			if (++$myindex >= 4)
				{
				$myindex = 0;
				echo '</tr><tr>';
				}
		</actinic:block>
	</actinic:block>
</actinic:block>
</tr></table>

I've indented the code for readability. When you get it working it would be a good idea to remove the newlines within the loop as you'll end up with several for every product on your site. View the generated source to see.

[leehack]

Jonathan,

<td style="padding:5px; border:1px dotted silver; vertical-align:top;">

Is rather inefficient coding, that will be repeated for every <td>. In the interest of cleaner code, do this instead:

<td class="cleanCode">

and have a class in your css, like so:

.cleanCode {
padding: 5px;
border: 1px dotted silver;
vertical-align: top;
}

That should result in around 40% less code producing the table.

[graphicz]

It's looking good Norman:
http://www.graphicz.eu.com/site1/
Only thing is that
if ($myindex++ >= 4) gave five columns
if ($myindex++ >= 3) gave four columns
if ($myindex++ >= 2) gave three columns
and
if ($myindex++ >= 1) gave two columns

Lee is absolutely correct, it is clumsy coding, my excuse is that I am still playing with it!

Thanks again to Norman who is a diamond contributor. Thank you.

[NormanRouxel]

Change the

			if ($myindex++ >= 4)

to

			if (++$myindex >= 4)

And the 4 will become the true number of columns. Also will let you have single column tables.

[graphicz]

Fabulous Norman, thank you.

Making a variable for the number of columns works nicely too.

Here to summarise is the code you developed for showing selected subsections in a table on the home page.

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">
<h2 class="clearall">Sub Section List</h2>
<table border="0" cellpadding="0" cellspacing="10" width="580"><tr>
<actinic:block php="true">$myindex = 0;</actinic:block>
<actinic:block type="EntireSectionList" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsSectionIncludedInSiteMap%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22ShowInExtraHomePageList%22%20%2f%3e" >
<td style="padding:5px; border:1px dotted silver; vertical-align:top;"><actinic:variable name="SectionLinkHomePage" /></td>
<actinic:block php="true">
if (++$myindex >= <actinic:variable name="SubsectionListColumnCount" />)
{
$myindex = 0;
echo '</tr><tr>';
}
</actinic:block>
</actinic:block>
</actinic:block>
</tr></table>	
</actinic:block>

[NormanRouxel]

No code changes below but I've removed a couple of the line breaks so that you're not inadvertently outputting 2 newlines for every Section on the page. Could be rather a lot of redundant white space if you have thousands of Sections.

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">
<h2 class="clearall">Sub Section List</h2>
<table border="0" cellpadding="0" cellspacing="10" width="580"><tr>
<actinic:block php="true">$myindex = 0;</actinic:block>
<actinic:block type="EntireSectionList" ><actinic:block if="%3cactinic%3avariable%20name%3d%22IsSectionIncludedInSiteMap%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22ShowInExtraHomePageList%22%20%2f%3e" >
<td style="padding:5px; border:1px dotted silver; vertical-align:top;"><actinic:variable name="SectionLinkHomePage" /></td>
<actinic:block php="true">
if (++$myindex >= <actinic:variable name="SubsectionListColumnCount" />)
{
$myindex = 0;
echo '</tr><tr>';
}
</actinic:block>
</actinic:block></actinic:block>
</tr></table>	
</actinic:block>