Getting correct frontend output from MIGX array

Support Extras
1

I should say at the outset, apologies for the lengthy post - I have been struggling to figure this out for some time now ,so have included as much info as possible to be helpful! I know I am missing something really obvious…

I’m currently in the process of creating a new design layout for my site, www.racingcircuits.info using the components from MDBootstrap. I’m struggling with with adapting one of my existing templates which makes use of MIGX.

It is my template for an individual circuit page (see Autódromo Internacional do Algarve - RacingCircuits.info as a current example).

This is the data in the MIGX array for this example page:

Array
(
    [MIGX_id] => 3
    [date] => 2021
    [info] => [{"MIGX_id":"1","title":"Car Circuit","length":"2.891 miles / 4.653 km","map":"assets/images/maps/Europe/Portugal/Portimao/Portimao-2021.png"},{"MIGX_id":"2","title":"Car Circuit with T1 chicane","length":"2.911 miles / 4.684 km","map":"assets/images/maps/Europe/Portugal/Portimao/Portimao-Chicane-2021.png"},{"MIGX_id":"3","title":"Bike Circuit","length":"2.853 miles / 4.592 km","map":"assets/images/maps/Europe/Portugal/Portimao/Portimao-Bike-2021.png"},{"MIGX_id":"4","title":"Bike Circuit with T1 chicane","length":"2.904 miles / 4.674 km","map":"assets/images/maps/Europe/Portugal/Portimao/Portimao-Bike-Chicane-2021.png"}]
    [_alt] => 0
    [_first] => 1
    [_last] => 
    [idx] => 1
    [property.tvname] => circuits
    [property.tpl] => 
)

Array
(
    [MIGX_id] => 2
    [date] => 2020
    [info] => [{"MIGX_id":"1","title":"Car Circuit","length":"2.891 miles \/ 4.653 km","map":"assets\/images\/maps\/Europe\/Portugal\/Portimao\/Portimao-2020.png"},{"MIGX_id":"2","title":"Car Circuit with T1 chicane","length":"2.911 miles \/ 4.684 km","map":"assets\/images\/maps\/Europe\/Portugal\/Portimao\/Portimao-Chicane-2020.png"},{"MIGX_id":"3","title":"Bike Circuit","length":"2.853 miles \/ 4.592 km","map":"assets\/images\/maps\/Europe\/Portugal\/Portimao\/Portimao-Bike-2020.png"},{"MIGX_id":"4","title":"Bike Circuit with T1 chicane","length":"2.904 miles \/ 4.674 km","map":"assets\/images\/maps\/Europe\/Portugal\/Portimao\/Portimao-Bike-Chicane-2020.png"}]
    [_alt] => 1
    [_first] => 
    [_last] => 
    [idx] => 2
    [property.tvname] => circuits
    [property.tpl] => 
)

Array
(
    [MIGX_id] => 1
    [date] => 2008-19
    [info] => [{"MIGX_id":"1","title":"Car Circuit","length":"2.920 miles \/ 4.699 km","map":"assets\/images\/maps\/Europe\/Portugal\/Portimao\/Portimao-1-2008.png"},{"MIGX_id":"2","title":"Car Circuit with T1 chicane","length":"2.911 miles \/ 4.684 km","map":"assets\/images\/maps\/Europe\/Portugal\/Portimao\/Portimao-2-2008.png"},{"MIGX_id":"3","title":"Bike Circuit","length":"2.894 miles \/ 4.658 km","map":"assets\/images\/maps\/Europe\/Portugal\/Portimao\/Portimao-Bike1-2008.png"},{"MIGX_id":"4","title":"Bike Circuit with T1 chicane","length":"2.904 miles \/ 4.674 km","map":"assets\/images\/maps\/Europe\/Portugal\/Portimao\/Portimao-Bike2-2008.png"}]
    [_alt] => 0
    [_first] => 
    [_last] => 1
    [idx] => 3
    [property.tvname] => circuits
    [property.tpl] => 
)

What I’m stuggling with is writing the relevant getImageList calls to be able to output at the frontend in my new layout.

These are my various template entries:

<section id="maps">
<!-- Map Panel -->

	<!-- Tab panels -->
    <div class="tab-content ml-n2 mt-n3">
        [[getImageList? 
    	&tvname=`circuits`
    	&tpl=`migx-circuit-tabpanel`
        ]]
    </div>
    <!-- Tab panels -->

    <!-- Timeline nav -->
        <ul class="nav nav-tabs md-tabs primary-color mx-n1 mt-n3" role="tablist">
          [[getImageList?
          &tvname=`circuits`
          &tpl=`migx-circuit-bar-render`
          ]]
        </ul>
    <!-- End of Timeline nav -->   

<!-- End of Map Panel -->
</section>

For migx-circuit-tabpanel:

<!-- Panel [[+idx]] -->
  <div class="tab-pane fade in show [[If? &subject=`[[+idx]]` &operator=`===` &operand=`1` &then=`active`]]" id="panel[[+idx]]" role="tabpanel">
      <div class="row justify-content-between">
          <div class="col-md-8 mt-n2 ml-n2 p-0">
              <div class="tab-content mt-n4" id="nav-tabContent">
                [[getImageList? 
                  &tvname=`circuits`
                  &tpl=`migx-circuit-images`
                ]]
              </div>    
           </div>
           
          <div class="col-md-4 mt-0 mr-0 mb-3 p-0">
              <div class="list-group z-depth-1 scrollbar-primary overflow-auto" id="list-tab" role="tablist">
                  [[getImageList?
                    &tvname=`circuits`
                    &tpl=`migx-circuit-data`
                  ]]
              </div>
          </div>      
       </div>   
    </div>       
<!-- End of Panel [[+idx]] -->

For migx-circuit-images:

<div class="tab-pane fade [[If? &subject=`[[+idx]]` &operator=`===` &operand=`1` &then=`show active`]]" id="map_[[+idx]]" role="tabpanel" aria-labelledby="map_[[+idx]]_data"><img src="[[getImageList? &value=`[[+info]]` &limit=`1` &tpl=`@CODE:[[+map]]`]]" class="img-fluid z-depth-1" alt="Map of [[*pagetitle]], [[+title]] [[!getImageList? &tvname=`circuits` &tpl=`@CODE:[[+date]]` &limit=`1`]]"></div>

For migx-circuit-data:

<a class="list-group-item list-group-item-action [[If? &subject=`[[+idx]]` &operator=`===` &operand=`1` &then=`active`]]" id="map_[[+idx]]_data" data-toggle="list" href="#map_[[+idx]]"role="tab" aria-controls="map_[[+idx]]"><strong>[[!getImageList? &value=`[[+info]]` &limit=`1` &tpl=`@CODE:[[+title]]`]]</strong><span class="badge badge-light z-depth-0 ml-2">[[!getImageList? &tvname=`circuits` &tpl=`@CODE:[[+date]]` &limit=`1`]]</span></strong><br /><small>[[!getImageList? &value=`[[+info]]` &limit=`1` &tpl=`@CODE:[[+length]]`]]</small></a>

What this currently outputs is the following:

output
output1227×563 82.8 KB

How can I get it to show the full content of [info] array for each [date] iteration?. The tabs for 2020/2008-19 are identical to the 2021 one above.

I obviously want it to show the data as per the array groupings. What am I doing wrong?

2

I don’t exactly understand what you are doing (as it is too confusing), but generally if you have a nested MIGX, you have one call to getImageList that iterates over the outer array (here the years)

[[getImageList? 
  &tvname=`circuits`
  &tpl=`outerTpl`
]]

and in the chunk outerTpl another call to getImageList that iterates over the inner array.

Year: [[+date]]
[[getImageList? 
	&value=`[[+info]]`
	&tpl=`innerTpl`
]]

You kind of do that, but then you use &limit=`1` to prevent the iteration over the whole array.

I also don’t understand why you use so many additional calls to getImageList in your chunks. In outerTpl you should have access to placeholders like [[+date]] without calling getImageList again.

3

Essentially the issue I’m having is getting the initial getImageList call to iterate through the top level arrays in sequence. The resultant mutlitude of getImageList calls in the tpls is my ham-fisted way to try and achieve this, which is clearly where I am going wrong.

So I guess my basic problem is how to get that first getImageList call to restrict the results in the template to show only the results from that specific array in the placeholders: i.e. the first tab generated shows only the data from MIGX_id3 and its nested info placeholders, then the second tab shows only the data from MIGX_id2 and its nested info placeholders and so on.

4

It’s still unclear to me what your final output should be.
Let’s say we have this simplifed data

Array
(
    [MIGX_id] => 1
    [date] => 2021
    [info] => [
		{"MIGX_id":"1","title":"1A","map":"1a.png"},
		{"MIGX_id":"2","title":"1B","map":"1b.png"}]
    [idx] => 1
)
Array
(
    [MIGX_id] => 2
    [date] => 2020
    [info] => [
		{"MIGX_id":"1","title":"2A","map":"2a.png"},
		{"MIGX_id":"2","title":"2B","map":"2b.png"}]
    [idx] => 2 
)

What is the final structure of the HTML that you are trying to get?
(And please keep the HTML as simple as possible. No classes. No unnecessary tags.)

5

Ok, at basic level, what I need is:

<--! Panel 1 -->
<div>
     <div> 
        <img src="1a.png" alt="Map of title 1A, 2021">
     </div>

     <div> 
        <img src="1b.png" alt="Map of 1B, 2021">
     </div>
</div>

<div>
   <a>Title 1A</a>
   <a>Title 1B</a>
</div>

<--! Panel 2 -->
<div>
     <div> 
        <img src="2a.png" alt="Map of title 2A, 2020">
     </div>

     <div> 
        <img src="2b.png" alt="Map of 2B, 2020">
     </div>
</div>

<div>
   <a>Title 2A</a>
   <a>Title 2B</a>
</div>
6

If you use this call in your template/resource

[[getImageList? 
  &tvname=`circuits`
  &tpl=`outerTpl`
]]

and this chunk outerTpl

<!-- Panel [[+idx]] -->
<div>
[[getImageList? 
    &value=`[[+info]]`
    &tpl=`@CODE:<div><img src="[[+map]]" alt="[[+title]], [[+date]]"></div>`
]]
</div>

<div>
[[getImageList? 
    &value=`[[+info]]`
    &tpl=`@CODE:<a>[[+title]]</a>`
]]
</div>

that should give you the HTML you provided.

7

Thanks so much - it was the &value I was missing. Added in and everything works as expected. I knew it was something really obvious that I couldn’t see after spending days looking at it!

8

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.