I’m hoping that this is just a brain fart moment. But I’m having an issue on this page: Barnes Buchanan Security Conference | Buchanan Ingersoll & Rooney PC
I’m using MIGX to assemble a custom list of speakers. But since it’s supposed to be displayed differently on mobile than on desktop, I have two getImageList requests in neighboring containers. They both are using the same &tvname but different &tpl chunks.
For some reason on the example page, the desktop it shows properly. But on mobile, one of the entries is being duplicated several times. When I swap the positions in the DOM of the two sections, the desktop is wrong and the mobile one is correct.
Here’s the section of code I have on my template:
<section class="module-offset_slider contact-cards events">
<div class="row slider-row">
<div class="slider-desktop">
<div class="card-set">
[[getImageList?
&tvname=`speakersList`
&tpl=`speakersListDesktop`
]]
</div>
</div>
</div>
</section>
<div class="contact-cards events">
[[getImageList?
&tvname=`speakersList`
&tpl=`speakersListMobile`
]]
</div>
This is the desktop chunk. The only difference in here is the +idx call at the bottom. This, the <section>
tag and the col-card class are absent on the mobile one to prevent the javascript from creating a slider out of it.
<div class="vcard col-card" style="display:block;">
[[+birEmployee:notempty=`
[[pdoResources?&parents=`186,187,188` &depth=`1` &tpl =`@INLINE [[+id]]` &where=`{"longtitle:LIKE":"%[[+birEmployee]]%"}` &showUnpublished=`1` &toPlaceholder=`birModID`]]
<a href="[[#[[+birModID]].uri]]" target="_blank">
<div class="col-photo" style="background-image: url('[[#[[+birModID]].tv.AttorneyPhoto:default=`/assets/images/people/default.jpg`]]') !important;">
<img src='[[#[[+birModID]].tv.AttorneyPhoto:default=`/assets/images/people/default.jpg`]]' alt="[[#[[+birModID]].pagetitle]]'s Photo">
</div>
</a>
<div class="col-info">
<div class="wrap-info">
<div class="name"><a href="[[#[[+birModID]].uri]]">[[#[[+birModID]].pagetitle]]</a></div>
<div class="title">[[#[[+birModID]].tv.AttorneyTitle:phpTrim:is=`Attorney`:then=`[[#[[+birModID]].tv.AttorneySecondTitle:phpTrim]]`:else=`[[#[[+birModID]].tv.AttorneyTitle]]`]]</div>
[[#[[+birModID]].tv.AttorneyServicesAndIndustries:notempty=`
[[#[[+birModID]].tv.AttorneyServicesAndIndustries:getFirstServiceIdComma:notempty=`<div class="industry"><a href="[[#[[#[[+birModID]].tv.AttorneyServicesAndIndustries:getFirstServiceIdComma]].uri]]">[[#[[#[[+birModID]].tv.AttorneyServicesAndIndustries:getFirstServiceIdComma]].pagetitle]]</a></div>`]]
`]]
</div>
</div>
`:empty=`
<a href="[[+guestUri]]" target="_blank">
<div class="col-photo" style="background-image: url('[[+guestPicture:default=`/assets/images/people/default.jpg`]]') !important;">
<img src='[[+guestPicture:default=`/assets/images/people/default.jpg`]]' alt="[[+guestName]]'s Photo">
</div>
</a>
<div class="col-info">
<div class="wrap-info">
<div class="name"><a href="[[+guestUri]]">[[+guestName]]</a></div>
<div class="title">[[+guestTitle]]</div>
[[+guestCompany:notempty=`<div class="industry"><a href="[[+guestUri]]">[[+guestCompany]]</a></div>`]]
</div>
</div>
`]]
</div>
[[+idx:mod=`3`:isequalto=`0`:then=`</div><div class="card-set">`]]
Please let me know if you need more information. Any help is appreciated.
Thank you