Mark Christie gave me an interesting challenge for the Scottish Summit build – with Scottish Summit championing inclusion and equality, let’s not be elitist about which speakers we feature. The previous speakers we feature should be selected at random. That way we give everyone an equal chance.
TLDR; Here’s my solution:
- Retrieve the speakers using fetchxml
- Randomise the order of the fetchxml results using liquid’s shuffle filter and store in a variable
- Use for to loop through the first 4 results (check the item’s using forloop.index)
Tip – wondering what a filter is in liquid? Filters allow us to transform the output. There’s all sorts of filters available. I highly recommend checking out ‘Available liquid filters‘ on Microsoft Learn
Aside – I originally thought to use the random liquid filter but this only returns a single item. Useful for things like quote of the day
Here’s the commented code if you’d like to repurpose for your own site:
{% comment %}Retrieve speakers for previous Scottish Summit events{% endcomment %}
{% fetchxml previous_speakers_query %}
<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="true">
<entity name="msevtmgt_speaker">
<attribute name="msevtmgt_speakerid" />
<attribute name="msevtmgt_name" />
<attribute name="ss_speakerimage" />
<attribute name="msevtmgt_eventid" />
<attribute name="msevtmgt_about" />
<order attribute="msevtmgt_name" descending="false" />
<filter type="and">
<condition attribute="ss_speakerimage" operator="not-null" />
</filter>
<link-entity name="msevtmgt_speakerengagement" from="msevtmgt_speaker" to="msevtmgt_speakerid" link-type="inner" alias="af">
<filter type="and">
<condition attribute="msevtmgt_event" operator="in">
<value uiname="Scottish Summit 2020" uitype="msevtmgt_event">{7BCEC1F7-25B7-EB11-8236-00224800319A}</value>
<value uiname="Scottish Summit 2022" uitype="msevtmgt_event">{CB67AC6C-96AD-486A-9314-35FC9DBB0C28}</value>
<value uiname="Scottish Summit Virtual 2021" uitype="msevtmgt_event">{79CEC1F7-25B7-EB11-8236-00224800319A}</value>
</condition>
</filter>
</link-entity>
</entity>
</fetch>
{% endfetchxml %}
{% comment %}Shuffle (randomise) the order of the results and store in a variable called speakers_shuffled{% endcomment %}
{% assign speakers_shuffled = previous_speakers_query.results.entities | shuffle %}
<section class="featured-content dark">
<h2 class="h1">Previous <strong>Speakers</strong></h2>
{% comment %}If one or more results is returned{% endcomment %}
{% if speakers_shuffled.size > 0 %}
<!-- Start of headshots -->
<div class="headshots">
{% comment %}Loop through the shuffled array of results{% endcomment %}
{% for result in speakers_shuffled %}
{% comment %}Output the first 4 items in the loop only{% endcomment %}
{% if forloop.index <= 4 %}
<!-- start the loop here -->
<div class="headshot col-xs-12 col-sm-6 col-md-3">
<div class="headshot-inner">
{% if result.ss_speakerimage %}
<img class="img-responsive img-circle" src="{{ result.ss_speakerimage }}" alt="Photo of {{ result.msevtmgt_name }}">
{% endif %}
<h4 class="h3">{{ result.msevtmgt_name }}</h4>
<div class="small-meta">{{ result.msevtmgt_about | truncate: 300 }}</div>
</div>
</div>
<!-- end the loop here -->
{% endif %}
{% endfor %}
</div>
<!-- end of headshots -->
{% endif %}
</section>
