I have a matrix with a couple of text fields for a caption, location and URL and an image

Every time this page loads I want a random slide to show - so the background image is random, as well as the relevant text fields.

I've tried several variations of the below but keep getting a template error of "Array to string conversion"

Why is this happening? How can I achieve the desired result?

{% if entry.carouselMatrix is not empty %}
    {% set currentSlide = shuffle(entry.carouselMatrix.slides).first() %}
    <div class="hero__wrapper">
        {% for slide in currentSlide.first() %}
            {% set image = slide.image.first() %}
            <div class="hero__image" style="background-image: url('{{ image.getUrl('heroHome') }}');"></div>
            <div class="hero__wrapper--inner grid">
                <h1 class="hero__text grid__item desk-two-thirds">
                    {{ entry.heroText }}
            <div class="hero__image--caption">
                <a href="{{ slide.linkUrl }}">
                    <span>{{ slide.caption }}</span>
        {% endfor %}
{% endif %}

1 Answer 1


You can create a random order by including rand() in your OrderBy function.

{% set randomBlock = entry.carouselMatrix.orderBy('rand()').one() %}
{% if randomBlock is not null %}
    {% set randomSlide = randomBlock.slides.orderBy('rand()').one() %}
    {% if randomSlide is not null %}
        {{ randomSlide .caption }}
        {% set image = randomSlide.image.one() %}
        {{ image is not null? image.getUrl() : '' }}
    {% endif %}
{% endif %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.