locomotive-boilerplate/views/templates/images.twig

{% extends "@layouts/base.twig" %}

{% block content %}
    <div data-module-scroll="main">
        <div class="o-container">
            <h1 class="c-heading -h1">Images</h1>

            <section>
                <h2 class="c-heading -h2">Lazy load demo</h2>

                <h3 class="c-heading -h3">Basic</h3>

                <div style="width: 640px; max-width: 100%;">
                    <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
                    <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
                </div>

                <h4 class="c-heading -h3">Using o-ratio & background-image</h3>

                <div style="width: 480px; max-width: 100%;">
                    <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=1);"></div>
                    <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=2);"></div>
                </div>
            </section>

            <section>
                <h3 class="c-heading -h3">Relative to scroll</h3>

                <h4 class="c-heading -h3">Using o-ratio & img</h3>

                <div style="width: 640px; max-width: 100%;">
                    <div class="o-ratio u-4:3">
                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
                    </div>
                    <div class="o-ratio u-4:3">
                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
                    </div>
                    <div class="o-ratio u-4:3">
                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=3" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
                    </div>
                    <div class="o-ratio u-4:3">
                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=4" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
                    </div>
                    <div class="o-ratio u-4:3">
                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=5" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
                    </div>
                </div>

                <h4 class="c-heading -h3">Using o-ratio & background-image</h3>

                <div style="width: 480px; max-width: 100%;">
                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=1"></div>
                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=2"></div>
                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=3"></div>
                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=4"></div>
                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=5"></div>
                </div>

                <h4 class="c-heading -h3">Using SVG viewport for ratio</h3>

                <div style="width: 480px; max-width: 100%;">
                    <img
                        data-scroll
                        data-scroll-call="lazyLoad, Scroll, main"
                        data-src="http://picsum.photos/640/480?v=6"
                        alt=""
                        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
                    />

                    <img
                        data-scroll
                        data-scroll-call="lazyLoad, Scroll, main"
                        data-src="http://picsum.photos/640/480?v=7"
                        alt=""
                        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
                    />

                    <img
                        data-scroll
                        data-scroll-call="lazyLoad, Scroll, main"
                        data-src="http://picsum.photos/640/480?v=8"
                        alt=""
                        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
                    />
                </div>
            </section>
        </div>
    </div>
{% endblock %}