I have the code below, where I am generating a new list for each 16 entries using Grouper plugin. Note, these list items are being ordered by last name.
However, when the viewport width is reduced and those columns collapse underneath one another, the alphabetical ordering is no longer correct.
I thought if I used MX Mobile Detect plugin, I could write a conditional to output a different groupby="number"
based on the viewport size, but unfortunately that plugin is not working on EE v2.10.1, throws an infinite loop and page won't load, and it doesn't look like it's supported any longer.
2 questions:
- Are there any plugins to achieve what I'm trying to accomplish?
- If not, any recommendations on how to accomplish this?
HTML:
<div class="col-holder clearfix text-capitalize speakers-menu large-menu">
{exp:channel:entries channel="speakers" dynamic="off" orderby="last_name" search:navigation_exclude="not y" sort="asc"}
{exp:grouper:start groupby="16" count="{count}" total="{total_results}"}
<ul class="list-unstyled">
{/exp:grouper:start}
<li><a href="{url_title_path='site/speaker'}">{title}</a></li>
{exp:grouper:end groupby="16" count="{count}" total="{total_results}"}
</ul>
{/exp:grouper:end}
{/exp:channel:entries}
</div>
As an added note, I was able to build something out that works as a temp fix, but definitely clunky and redundant code and not how I like it. I assigned a different class to each div, large-menu
and small-menu
.
HTML:
<div class="col-holder clearfix text-capitalize speakers-menu large-menu">
{exp:channel:entries channel="speakers" dynamic="off" orderby="last_name" search:navigation_exclude="not y" sort="asc"}
{exp:grouper:start groupby="16" count="{count}" total="{total_results}"}
<ul class="list-unstyled">
{/exp:grouper:start}
<li><a href="{url_title_path='site/speaker'}">{title}</a></li>
{exp:grouper:end groupby="16" count="{count}" total="{total_results}"}
</ul>
{/exp:grouper:end}
{/exp:channel:entries}
</div>
<!-- -->
<div class="col-holder clearfix text-capitalize speakers-menu small-menu">
{exp:channel:entries channel="speakers" dynamic="off" orderby="last_name" search:navigation_exclude="not y" sort="asc"}
{exp:grouper:start groupby="45" count="{count}" total="{total_results}"}
<ul class="list-unstyled">
{/exp:grouper:start}
<li><a href="{url_title_path='site/speaker'}">{title}</a></li>
{exp:grouper:end groupby="45" count="{count}" total="{total_results}"}
</ul>
{/exp:grouper:end}
{/exp:channel:entries}
</div>
CSS:
@media only screen and (max-width: 1023px) {
.small-menu {
display: block;
}
.large-menu {
display: none;
}
}
@media only screen and (min-width: 1024px) {
.small-menu {
display: none;
}
.large-menu {
display: block;
}
}