Recipe - Parallax Photowall from Content Channel

Skill level: Intermediate

Organization: Chase Oaks Church

Requires Rock: 1.16.13

---

{# strip images & classes from the HTML but otherwise leave structure #}

If you have a lot of photos you want to display, here’s a fun way to create a fully responsive photo wall from a Content Channel. This example is set up to display content over the photo wall that scrolls with a parallax effect.

If you only want the photowall, you can easily modify the code to remove the overlay content.

The code runs in a Content Channel View Content Component and includes HTML + Lava, CSS, and JavaScript for the parallax effect.

A couple things to make sure the photowall works:

1. This example does not trim or resize images, so make sure all of your photos are the same dimensions for the best results.
2. The photos are displayed 6 across on desktop and 3 across on mobile and tablet, so the number of photos needs to be divisible by 6 and 3. If you adjust the CSS to go down to 2 across on mobile, the number will also need to be divisible by 2.
3. iPad Pros require about twice as many photos as other screens. You could change the CSS breakpoint to make them go to 3 across, but that introduces its own issues, so I just added extra photos. In my case, 48 photos worked well.

HTML+Lava Template Code

<div class="position-relative overflow-hidden">
    <div class="jarallax-fix">
        <div id="photowall-background" data-jarallax class="jarallax"
             data-type="scroll" data-speed="0.5"
             data-zindex="2"
             data-no-android="" data-no-ios="false">

            <!-- PHOTOWALL GRID AS BACKGROUND -->
            <div class="jarallax-img">
                <div class="photowall-grid">
                    {% for item in Items %}
                        <div class="photowall-item">
                            <img class="gridImageOverlay rounded-sm"
                                 src="/GetImage.ashx?Guid={{ item | Attribute:'Image','RawValue' }}"
                                 alt="{{ item.Title }}">
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- CONTENT ON TOP -->
    <div class="container position-relative z-10">
        <div class="d-flex flex-column justify-content-center align-items-center">

            <div class="content-block shadow-lg mb-5 bg-body" style="margin-top: 30vh">
                <h3>Content Title</h3>
                <p class="mb-4 fw-medium">
                    Content text goes here
                </p>
                <a href="/dream-teams" class="co-btn co-btn-primary bg-teal">
                    Dream Teams
                </a>
            </div>

            <div class="content-block bg-body shadow-lg" style="margin-bottom: 30vh;">
                <h3>Content title</h3>
                <p class="mb-4 fw-medium">
                    Content text goes here
                </p>
                <a href="/serve" class="co-btn co-btn-primary bg-teal">
                    Opportunity Finder
                </a>
            </div>

        </div>
    </div>
</div>

CSS

<style>
/* PHOTOWALL SECTION */
#photowall-background {
    min-height: 120vh;
    background: transparent;
    position: relative;
    z-index: 0;
}

/* Jarallax background container */
#photowall-background .jarallax-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 120%;
    transform: translate(-10%, -10%);
    z-index: -1;
}

.jarallax-fix .jarallax {    
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
}

.jarallax {
    z-index: 0 !important;
}

/* Photowall layout */
.photowall-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}

.photowall-item {
    width: 16.666%;
    padding: 4px;
}

.photowall-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Slight overlay look */
.gridImageOverlay {
    opacity: 0.95;
}

/* Content blocks */
.content-block {
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 45vw;
    min-width: 45vw;
}

/* Tablet */
@media (max-width: 1200px) {
    .content-block {
        max-width: 80vw;
        min-width: 80vw;
    }
}

/* Photowall responsive layout */
@media (max-width: 992px) {
    .photowall-item {
        width: 33.333%;
    }
}

</style>

Screenshots

• /GetImage.ashx?guid=4731c3d3-5b85-461f-b7b9-b13e80d74fed
• /GetImage.ashx?guid=12f1171c-0d82-4873-9549-c352e5b670dc