VDL Webdevelopment 

Een loop aanpassen

Een loop aanpassen

Binnen websites worden vaak verzamelingen weergegeven. Een aantal producten bijvoorbeeld, of afbeeldingen in een fotogallery. Om die verzameling samen te stellen wordt eerst de database uitgelezen om de items beschikbaar te maken. Daarna wordt het resultaat in een zogeheten 'loop' uitgelezen. De loop gaat ieder item af en plaatst hem in je pagina.

In het onderstaande voorbeeld zie je de loop van een fotogallery.


    <ul id="{{ __SELF__ }}" class="{{ __SELF__ }}">
        {% for image in gallery.images %}
            <li data-src="{{ image.path }}" data-title="{{ image.title }}" data-desc="{{ image.description }}">
                <a href="#"><img src="{{ image.getThumb(width, height, resizer) }}" alt="{{ image.title }}" /></a>
            </li>
        {% endfor %}
    </ul>

Tijdens de loop komen verschillende gegevens beschikbaar waaronder 'list.index', 'list.first' en 'list.last'. Je kunt de loop daarmee beinvloeden en zo de weergave van je lijst naar je hand zetten.

In dit geval wilde ik dat alleen de eerste foto van een gallery werd getoond en dat de overige pas getoond werden in de fullscreen slider.


    <ul id="{{ __SELF__ }}" class="{{ __SELF__ }}">
        {% for image in gallery.images %}
            <li {% if loop.first %} id="start-image" {% else %} class="hidden" {% endif %} data-src="{{ image.path }}" data-title="{{ image.title }}" data-desc="{{ image.description }}">
                <a href="#"  onclick="enterFullscreen()">test<img src="{{ image.getThumb(width, height, resizer) }}" alt="{{ image.title }}" /></a>
            </li>
        {% endfor %}
    </ul>

De list-index waarde gebruiken

Je kunt ook de list-index waarde gebruiken. De loop houdt het aantal items bij op nummer en zet deze in de variable 'list.index' en deze kun je dus ook gebruiken. Wanneer je bijvoorbeeld van de gallery alleen de eerste drie items wilt tonen kun je daar dynamisch een class aanmeegeven. Die class gebruik je vervolgens om via CSS te verbergen of, wellicht ook leuk, een andere randkleur te geven.


        {% for image in gallery.images %}
            <li {% if loop.index < 4 %} class="MINDERdan-3" {% else %} class="MEERdan-3" {% endif %} data-src="{{ image.path }}" data-title="{{ image.title }}" data-desc="{{ image.description }}">
                <a href="#"  onclick="toggleFullScreen()"><img src="{{ image.getThumb(width, height, resizer) }}" alt="{{ image.title }}" /></a>
            </li>
        {% endfor %}

Nu zullen we lezers zijn die denken, dat bij het verbergen van items deze nog steeds moeten worden ingeladen en dat je in plaats van verbergen beter gewoon niet kunt ophalen, Dat klopt, maar in dit geval moeten juist wel de items worden opgehaald omdat ze anders in de fullscreen slideshow niet beschikbaar zouden zijn. Het beperken van de op te halen items doe je in de databasequery. Daarover hebben we het een andere keer.

Onderstaande foto toont een gallery op mijn persoonlijke website die slechts zes items toont en de rest in de fullscreen slideshow laat zien.

Posted in October CMS on Oct 20, 2016