I think I got it to work out.
This is what I needed to accomplish
1. there are 3 levels or folders - Main, Sub, Detail
Sub is child of Main and Detail are childs of Sub. There could be as many Subs and Details as needed, in this case there are probably going to be more Subs than anything else.
2. When a detail page is created there is a description that goes to a div and a photo, similar to a product detail page. The image needs to also go to a div on the Main page and the sub page that is its parent. I wanted this done dynamically, when a new sub page is created the image goes directly to its parents page in thumbnail form.
On the main page I only wanted 4 image thumbnails, a preview of sorts.
3. The sub page gets a description that gets placed in a div from the content box. This description also needed to get dynamically placed on the MAIN page in a div. Now, the child pages images of the sub in question also needed to correspond or in the layout sit next to the description on the main page.
Ug... a puzzle of sorts. Probably makes no sense and is confusing, well I think i figured it out. Here goes.
so the tree looks like this.
Main (gets desc from sub and 4 thumbs (if 4 exist) from detail, 1 from each page)
Sub(gets image thumb from each page, and also its on desc from content box)
Detail ( gets 1 image uploaded to div)
Detail ( gets 1 image uploaded to div)
Sub
Detail
Detail
Sub
Detail
etc...
First I created template for detail that had a template variable for uploading an image to a div
Next I created a chunk to hold the image from the TV that looked like this and named it `ditto-child-subcats` .
<div class="grid_2"><div class="product_thumbs"><a href="[~[+id+]~]"><img src="[+product-image+]" width="140" height="112"></a>
<span class="prod_name">[+title+]</span></div></div>
I then created another chunk that looked like this and named it "sub-cats".
<div id="thumbs" class="grid_12">
<div id="bicycles" class="grid_4">
<p class="sub-cat">[+title+]</p>
<p class="desc-type">[+content+]</p>
</div>
[[Ditto? &parents=`[+id+] &orderBy=`createdon DESC` &display=`4` &tpl=`ditto-child-subcats`]]
</div>
On the main page I used ditto to call "sub-cats
[!Ditto? &parents=`[*id*]` &tpl=`ditto-child-cats` &orderBy=`menuindex ASC`!]
The trick here was using --- &parents=`[+id+]--- in the chunk sub cats and
--- &parents=`[*id*]`--- on the main page ditto call. I think this is what allowed the images to go with the right description.
Also by nesting the ditto call in ditto-child-subcats chunk allowed for the images 1 level deep to get used --- I think. This all really new to me and I have just been messing around trying different stuff. Anyhow it works and I am sure this was very confusing, but I have been trying to do this for a few days and I thought I would share.
