Ottogal, do you know how I would implement this, given that the content of the boxes (i.e. products) will change over time, so the URL it points to will change? I assume there is a way of not having to hard code this. Each of the 9 boxes is a template variable where the user can write a title and insert a picture through the CMS.
Hardcoding the nine [tt]div[/tt]s for your products in your template and using an own Template Variable for every product is really unflexible.
That can be done in a more dynamic way using Wayfinder (as izzy said) or getResources.
To achieve that you would have to create a single resource for each product, based on a common template, say "prodtemplate". They all have to be children of the page id=3 on which you want to show the links.
You create Template Variables "pbrand", "pdesc", "pprice" and "pimage" of type text and assign them to the template "prodtemplate".
To insert a new product the manager user just has to create a new resource (child of id=3) with the template "prodtemplate" and edit the individual product information in the Template Variables.
On the page containing the links (or in its template) you replace all your code for the nine divs by the Wayfinder call, f.e.
[[!Wayfinder? &startId=`3` &rowTpl=`prodTpl` ]]
By default the Wayfinder output is a unordered list ( [tt]ul[/tt] ) where the parameter [tt]&rowTpl[/tt] contains a chunk for the [tt]li[/tt] elements (like in izzy’s example above).
But Wayfinder is so flexible that you can keep your [tt]div[/tt]s instead (perhaps modified as in the previous discussion). So the chunk [tt]prodTpl[/tt] for the parameter [tt]&rowTpl[/tt] , could look like this:
<div class="productHome">
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>
<p>[[+pbrand]]</p>
<p class="proddesc">[[+pdesc]]</p>
<p class="prodprice">[[+pprice]]</p>
<div><img src="assets/templates/homepage/images/[[+pimage]]" /></div>
</a>
</div>
(You see that we can not - and must not - use anymore id="Home#" .)
The point is: Wayfinder will control dynamically the output of the products, that is if you add a new product it will be automatically inserted in the page of links (and automatically sorted in in the wanted order, default is by menuindex).
You would not be limited to nine products per page. Using Floats in the styling you also could achieve a flexibility in the number of products per row, dependent on the width of the view port. And so on ...
Have a try. Best wishes!
ottogal
