Trying to set up a photo collage


#1

I am trying to set up a photo collage that randomly pulls photos from a folder on my server to be displayed on the home page. The collage is already set up, but I would have to go through and manually change the photo for every frame on the page. Is there an easy fix to set this up? Thanks in advance for any guidance!

This is the JS that exists on the Joomla Framework right now:

{% extends ‘@nucleus/partials/particle.html.twig’ %}
{% do gantry.load(‘lightcase.init’) %}

{% block particle %}

    {% if not particle.source or particle.source == 'particle' %}
        {% if particle.title %}
            <div class="g-photocollage-header">
                <h3 class="g-photocollage-title">{{ particle.title }}</h3>
            </div>
        {% endif %}

        <div class="g-photocollage-grid grid" data-masonry='{"itemSelector": ".g-photocollage-grid-item","columnWidth": ".grid-sizer"}'>
            <div class="grid-sizer"></div>

            {% for item in particle.cases %}
                {% set case_index = loop.index %}

                <div class="g-photocollage-grid-item {{ item.width|default('') }} {{ item.height|default('') }}" data-groups='["{{ case_index }}"]' style="padding: {{ particle.spacing|default('0.8%') }};">
                    {% if item.image %}
                        <div class="image-wrapper">
                            <a href="{{ url(item.image)|e }}" data-rel="lightcase:myCollection" title="{{ item.title }}"></a>
                            <img src="{{ url(item.image)|e }}" alt="{{ item.title }}" />

                            <div class="zoom">
                                <i class="{{ item.icon }}" aria-hidden="true"></i>
                            </div>
                        </div>
                    {% endif %}
                </div>
            {% endfor %}

        </div>

    {% else %}
        {% include '@particles/photocollage-' ~ gantry.platform.name ~ '.html.twig' ignore missing %}
    {% endif %}
</div>

{% endblock %}

{% block javascript_footer %}
{% do gantry.load(‘jquery’) %}


{% endblock %}