Different navigation style

Hi everybody

I am trying to port a static php site to modx but I am stucked on one page

The product navigation page (apart from the main menu which works fine with wayfinder) looks like that :

<div style="float:left; width:150px; margin:5px; border:1px solid #656565; background:#bab196;" onmouseover="style.backgroundColor=’#AB1315’;" onmouseout="style.backgroundColor=’#bab196’;">
<div style="float:left; width:100%; text-align:center;padding-top:5px; padding-bottom:5px;font-family:arial; font-size:12px; color:#FFFFFF;">Product1Title</div>
<div style="float:left; border:0px solid #00CC00; width:100%; text-align:center;"><a href="Product1Link"><img src="Product1Image.jpg" width="150" height="150" border="0" alt="Product1LongTitle" title="Product1LongTitle"></a></div>
</div>

<div style="float:left; width:150px; margin:5px; border:1px solid #656565; background:#bab196;" onmouseover="style.backgroundColor=’#AB1315’;" onmouseout="style.backgroundColor=’#bab196’;">
<div style="float:left; width:100%; text-align:center;padding-top:5px; padding-bottom:5px;font-family:arial; font-size:12px; color:#FFFFFF;">Product2Title</div>
<div style="float:left; border:0px solid #00CC00; width:100%; text-align:center;"><a href="Product2Link"><img src="Product2Image.jpg" width="150" height="150" border="0" alt="Product2LongTitle" title="Product2LongTitle"></a></div>
</div>

<div style="float:left; width:150px; margin:5px; border:1px solid #656565; background:#bab196;" onmouseover="style.backgroundColor=’#AB1315’;" onmouseout="style.backgroundColor=’#bab196’;">
<div style="float:left; width:100%; text-align:center;padding-top:5px; padding-bottom:5px;font-family:arial; font-size:12px; color:#FFFFFF;">Product2Title</div>
<div style="float:left; border:0px solid #00CC00; width:100%; text-align:center;"><a href="Product3Link"><img src="Product3Image.jpg" width="150" height="150" border="0" alt="Product3LongTitle" title="Product3LongTitle"></a></div>
</div>

... etc etc

It is just floating divs with the product name, product product image and product links.
Assuming each product image is named after the id (document_id.jpg) and the links are {~document_id~] is there any way to make this dynamic?

Thanks in advance
Dimitris

If each product has it’s own page (with a Template Variable for the image), you should be able to do it with the Ditto snippet - putting tags in the Ditto tpl chunk for each of the dynamic items.

Thanks

I thought that it should be better to be made with wayfinder (since it is navigation) but I’ll check it with ditto

Regards
Dimitris