Use liquid’s Shuffle filter to output random results

{% 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>