Answered Migx: show first image of all children of a parent

144 Posts

Ananda Reply #1, 11 years, 1 month ago

Hi,

I'm getting nowhere here ...

I have one parent, which has 9 children.

Each child has a "MIGX tv", containing a number of "descriptions" and a some "image+".

I want to have 9 thumbs, with their description, for the 9 children. The Image+ should be the URL of the FIRST MIGX-item of that child.

My code for the overview, shows the actual paths of the images of each children, when I use debug mode (see attachment for debug output).

[[!getResources? 
&debug=`1`
&includeContent=`1` 
&includeTVs=`1` 
&processTVs=`1` 
&limit=`9` 

 ]]

When I want to force that Array (see attachment), into a TPL, that always shows the FIRST image+, nothing useful happens :

[[!getResources? 
&debug=`1`
&includeContent=`1` 
&includeTVs=`1` 
&processTVs=`1` 
&limit=`9` 
&tpl=`referenties_one_thumb_tpl`

 ]]

"referenties_one_thumb_tpl":

<div class="referentie_item" style="background-image:url(   '[[+tv.afbeeldingen]]	`)">
    	<a class="referentie_inner"><span></span></a>
</div>

The html output now is cluttered (see hereunder a part of my mess).

<div class="col-md-8 referenties" style="margin-left: 192px;">
	<div migx_id":"1","naam":"1","beschrijving":"<p="" style="background-image: url("[{"); height: 307.667px; width: 576px;" class="referentie_item">Kelderdichting Scherminjectie<br>Sint-Niklaas2015<p></p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref8/Kelderdichting-Scherminjectie-Sint-Niklaas2015/1-2.jpg\",\n    \"width\": 1800,\n    \"height\": 1080,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 1040,\n    \"height\": 829,\n    \"x\": 726,\n    \"y\": 123\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"}]	`)">
    	<a class="referentie_inner"><span></span></a>
    </div>
    
    
	<div migx_id":"1","naam":"1","beschrijving":"<p="" style="background-image: url("[{"); height: 307.667px; width: 576px;" class="referentie_item">Plak- Cementeerwerken + Plaatsen saneermortel<br>Zwijnaarde 2015<p></p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref9/Plak-Cementeerwerken-Plaatsen-saneermortel-Zwijnaarde2015/VOOR 1.JPG\",\n    \"width\": 4224,\n    \"height\": 2376,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 2409,\n    \"height\": 1941,\n    \"x\": 0,\n    \"y\": 167\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"},{"MIGX_id":"2","naam":"2","beschrijving":"<p>Plak- Cementeerwerken + Plaatsen saneermortel<br>Zwijnaarde 2015</p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref9/Plak-Cementeerwerken-Plaatsen-saneermortel-Zwijnaarde2015/VOOR 2.JPG\",\n    \"width\": 4224,\n    \"height\": 2376,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 4224,\n    \"height\": 2374,\n    \"x\": 0,\n    \"y\": 0\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"},{"MIGX_id":"3","naam":"3","beschrijving":"<p>Plak- Cementeerwerken + Plaatsen saneermortel<br>Zwijnaarde 2015</p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref9/Plak-Cementeerwerken-Plaatsen-saneermortel-Zwijnaarde2015/VOOR 3.JPG\",\n    \"width\": 4224,\n    \"height\": 2376,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 2740,\n    \"height\": 2321,\n    \"x\": 624,\n    \"y\": 53\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"},{"MIGX_id":"4","naam":"4","beschrijving":"<p>Plak- Cementeerwerken + Plaatsen saneermortel<br>Zwijnaarde 2015</p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref9/Plak-Cementeerwerken-Plaatsen-saneermortel-Zwijnaarde2015/NA.jpg\",\n    \"width\": 2560,\n    \"height\": 1536,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 2305,\n    \"height\": 1410,\n    \"x\": 0,\n    \"y\": 0\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"}]	`)">
    	<a class="referentie_inner"><span></span></a>
    </div>
    
    
	<div migx_id":"1","naam":"1-2","beschrijving":"<p="" style="background-image: url("[{"); height: 307.667px; width: 576px;" class="referentie_item">Vochtwering Buitenfdichting<br>Aalst 2015<p></p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref2/Vochtwering-Doorslaand-vocht-Buitenafdichting-Aalst2015/1-2.jpg\",\n    \"width\": 1800,\n    \"height\": 1080,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 936,\n    \"height\": 716,\n    \"x\": 863,\n    \"y\": 116\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"},{"MIGX_id":"6","naam":"3-4","beschrijving":"<p>Vochtwering Buitenfdichting<br>Aalst 2015</p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref2/Vochtwering-Doorslaand-vocht-Buitenafdichting-Aalst2015/3-4.jpg\",\n    \"width\": 1800,\n    \"height\": 1080,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 1801,\n    \"height\": 1079,\n    \"x\": 0,\n    \"y\": 0\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"}]	`)">
    	<a class="referentie_inner"><span></span></a>
    </div>
    
    
	<div migx_id":"1","naam":"1-2","beschrijving":"<p="" style="background-image: url("[{"); height: 307.667px; width: 576px;" class="referentie_item">Kelderdichting binnenafdichting<br>Aalst 2015<p></p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref3/Kelderdichting-Binnen-afdichting--Aalst2015/1-2.jpg\",\n    \"width\": 1800,\n    \"height\": 1080,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 951,\n    \"height\": 656,\n    \"x\": 849,\n    \"y\": 424\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"}]	`)">
    	<a class="referentie_inner"><span></span></a>
    </div>
    
    
	<div migx_id":"1","naam":"1-2","beschrijving":"<p="" style="background-image: url("[{"); height: 307.667px; width: 576px;" class="referentie_item">Betonrenvatie<br>Brussel2014<p></p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref4/Betonrenovatie--Brussel2014/1-2.jpg\",\n    \"width\": 1800,\n    \"height\": 1080,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 848,\n    \"height\": 502,\n    \"x\": 953,\n    \"y\": 578\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"}]	`)">
    	<a class="referentie_inner"><span></span></a>
    </div>
    
    
	<div migx_id":"1","naam":"1-2","beschrijving":"<p="" style="background-image: url("[{"); height: 307.667px; width: 576px;" class="referentie_item">Betonherstel<br>Waregem2015<p></p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref5/Betonherstel--Waregem2015/1-2.jpg\",\n    \"width\": 1800,\n    \"height\": 1080,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 778,\n    \"height\": 630,\n    \"x\": 0,\n    \"y\": 370\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"}]	`)">
    	<a class="referentie_inner"><span></span></a>
    </div>
    
    
	<div migx_id":"1","naam":"1","beschrijving":"<p="" style="background-image: url("[{"); height: 307.667px; width: 576px;" class="referentie_item">Dichting Lifput<br>Herdersem 2014<p></p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref6/Dichting-liftput--Herdersem2014/Foto 2.JPG\",\n    \"width\": 4000,\n    \"height\": 2672,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 2508,\n    \"height\": 1960,\n    \"x\": 655,\n    \"y\": 458\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"},{"MIGX_id":"2","naam":"2","beschrijving":"<p>Dichting Lifput<br>Herdersem 2014</p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref6/Dichting-liftput--Herdersem2014/Foto 1.JPG\",\n    \"width\": 1024,\n    \"height\": 684,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 586,\n    \"height\": 434,\n    \"x\": 181,\n    \"y\": 126\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"}]	`)">
    	<a class="referentie_inner"><span></span></a>
    </div>
    
    
	<div migx_id":"1","naam":"1","beschrijving":"<p="" style="background-image: url("[{"); height: 307.667px; width: 576px;" class="referentie_item">Kelderdichting Buitenafdichting<br>Bonheiden 2015<p></p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref7/Kelderdichting-Buiten-afdichting--Bonheiden2015/IMGP2222.JPG\",\n    \"width\": 4224,\n    \"height\": 2376,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 2481,\n    \"height\": 2078,\n    \"x\": 1343,\n    \"y\": 0\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"},{"MIGX_id":"3","naam":"2","beschrijving":"<p>Kelderdichting Buitenafdichting<br>Bonheiden 2015</p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref7/Kelderdichting-Buiten-afdichting--Bonheiden2015/IMGP2225.JPG\",\n    \"width\": 4224,\n    \"height\": 2376,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 4224,\n    \"height\": 2376,\n    \"x\": 0,\n    \"y\": 0\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"},{"MIGX_id":"4","naam":"3","beschrijving":"<p>Kelderdichting Buitenafdichting<br>Bonheiden 2015</p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref7/Kelderdichting-Buiten-afdichting--Bonheiden2015/IMGP2226.JPG\",\n    \"width\": 4224,\n    \"height\": 2376,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 4224,\n    \"height\": 2374,\n    \"x\": 0,\n    \"y\": 0\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"},{"MIGX_id":"5","naam":"4","beschrijving":"<p>Kelderdichting Buitenafdichting<br>Bonheiden 2015</p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref7/Kelderdichting-Buiten-afdichting--Bonheiden2015/IMGP2227.JPG\",\n    \"width\": 4224,\n    \"height\": 2376,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 3398,\n    \"height\": 2158,\n    \"x\": 0,\n    \"y\": 0\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"}]	`)">
    	<a class="referentie_inner"><span></span></a>
    </div>
    
    
	<div migx_id":"1","naam":"1","beschrijving":"<p="" style="background-image: url("[{"); height: 307.667px; width: 576px;" class="referentie_item">Vochtwering Opstijgend vocht<br>Gent-2015<p></p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref1/Vochtwering-Opstijgend-vocht--Gent-2015/foto-1-opstijgend vocht.jpg\",\n    \"width\": 2560,\n    \"height\": 1536,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 1717,\n    \"height\": 1122,\n    \"x\": 844,\n    \"y\": 0\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"},{"MIGX_id":"2","naam":"2","beschrijving":"<p>Vochtwering Opstijgend vocht<br>Gent-2015</p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref1/Vochtwering-Opstijgend-vocht--Gent-2015/foto-2-injectie.jpg\",\n    \"width\": 4224,\n    \"height\": 2376,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 2706,\n    \"height\": 1842,\n    \"x\": 438,\n    \"y\": 289\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"},{"MIGX_id":"3","naam":"3","beschrijving":"<p>Vochtwering Opstijgend vocht<br>Gent-2015</p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref1/Vochtwering-Opstijgend-vocht--Gent-2015/foto-3-pleistermembraan.jpg\",\n    \"width\": 2560,\n    \"height\": 1536,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 1614,\n    \"height\": 1109,\n    \"x\": 15,\n    \"y\": 125\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"},{"MIGX_id":"4","naam":"4","beschrijving":"<p>Vochtwering Opstijgend vocht<br>Gent-2015</p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref1/Vochtwering-Opstijgend-vocht--Gent-2015/foto-4.jpg\",\n    \"width\": 2560,\n    \"height\": 1536,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 1641,\n    \"height\": 1405,\n    \"x\": 876,\n    \"y\": 123\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"},{"MIGX_id":"5","naam":"5","beschrijving":"<p>Vochtwering Opstijgend vocht<br>Gent-2015</p>","afbeelding":"{\n  \"sourceImg\": {\n    \"src\": \"assets/img/Ref1/Vochtwering-Opstijgend-vocht--Gent-2015/foto-5 herpleisteren.JPG\",\n    \"width\": 4224,\n    \"height\": 2376,\n    \"source\": 1\n  },\n  \"crop\": {\n    \"width\": 2675,\n    \"height\": 1925,\n    \"x\": 1423,\n    \"y\": 186\n  },\n  \"targetWidth\": 0,\n  \"targetHeight\": 0,\n  \"altTag\": false\n}"}]	`)">
    	<a class="referentie_inner"><span></span></a>
    </div>
    
    


    </div>

From that point on, I tried to change the tpl by adding a "getimaglist" in that "referenties_one_thumb_tpl"- TPL, but then nothing shows ... sad

<div class="referentie_item" style="background-image:url([[!getImageList? &tvname=`[[+tv.afbeeldingen]]` &tpl=`referenties_one_thumb_imagelist_tpl` &limit=`1` &docid=`[[+id]]` ]])">
    	<a class="referentie_inner"><span>[[+tv.description]]</span></a>
 </div>

referenties_one_thumb_imagelist_tpl:

[[+source:phpthumbof=`w=420&h=330&zc=1`]]

Any help would be greatly appreciated !

Thanks !!!

This question has been answered by Bruno17. See the first response.

[ed. note: sriananda last edited this post 11 years, 1 month ago.]

discuss.answer

5,888 Posts

Bruno17 Reply #2, 11 years, 1 month ago

you will need something like:

<div class="referentie_item" style="background-image:url('[[!getImageList? &tvname=`afbeeldingen` &docid=`[[+id]]` &tpl=`yourTpl` &limit=`1` ]] ')">
        <a class="referentie_inner"><span></span></a>
</div>

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

144 Posts

Ananda Reply #3, 11 years, 1 month ago

Quote from: Bruno17 at Sep 15, 2015, 12:23 AM

you will need something like:

<div class="referentie_item" style="background-image:url('[[!getImageList? &tvname=`afbeeldingen` &docid=`[[+id]]` &tpl=`yourTpl` &limit=`1` ]] ')">
        <a class="referentie_inner"><span></span></a>
</div>

Thanks, ur a genius laugh

in 'yourTpl' I used this code:

<div class="referentie_item" style="background-image:url([[!getImageList? &tvname=`afbeeldingen` &tpl=`referenties_one_thumb_imagelist_tpl` &limit=`1` &docid=`[[+id]]` ]])">
        <a class="referentie_inner"><span>[[+tv.description]]</span></a>
 </div>