PSI Software SE Design Library

Photowall Inset

Component: Photowall Inset

Implementation Notes

The component can be filled with any number of images, which are then automatically resized and arranged in the design grid.

For this to work, the orientation of the image must be passed for each element via the data-orientation attribute:

  • Landscape formats: <div class="photowallInset-item" data-orientation="landscape"/>
  • Portrait formats: <div class="photowallInset-item" data-orientation="upright"/>
<!-- Default -->
<div class="photowallInset">

    <div class="photowallInset-items">
        <div class="photowallInset-item" data-orientation="landscape">
            <figure class="figure" data-orientation="landscape" style="">

                <img class="figure-image" src="https://picsum.photos/id/193/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
        <div class="photowallInset-item" data-orientation="landscape">
            <figure class="figure" data-orientation="landscape" style="">

                <img class="figure-image" src="https://picsum.photos/id/65/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
        <div class="photowallInset-item" data-orientation="upright">
            <figure class="figure" data-orientation="upright" style="">

                <img class="figure-image" src="https://picsum.photos/id/1062/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
        <div class="photowallInset-item" data-orientation="upright">
            <figure class="figure" data-orientation="upright" style="">

                <img class="figure-image" src="https://picsum.photos/id/6/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
        <div class="photowallInset-item" data-orientation="landscape">
            <figure class="figure" data-orientation="landscape" style="">

                <img class="figure-image" src="https://picsum.photos/id/18/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
        <div class="photowallInset-item" data-orientation="upright">
            <figure class="figure" data-orientation="upright" style="">

                <img class="figure-image" src="https://picsum.photos/id/193/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
        <div class="photowallInset-item" data-orientation="upright">
            <figure class="figure" data-orientation="upright" style="">

                <img class="figure-image" src="https://picsum.photos/id/65/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
        <div class="photowallInset-item" data-orientation="landscape">
            <figure class="figure" data-orientation="landscape" style="">

                <img class="figure-image" src="https://picsum.photos/id/1062/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
    </div>

</div>


<!-- With Title And Description -->
<div class="photowallInset has-backdrop">

    <h2 class="photowallInset-title">Ich bin der Titel</h2>

    <div class="photowallInset-description">
        <p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
    </div>

    <div class="photowallInset-items">
        <div class="photowallInset-item" data-orientation="landscape">
            <figure class="figure" data-orientation="landscape" style="">

                <img class="figure-image" src="https://picsum.photos/id/193/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
        <div class="photowallInset-item" data-orientation="landscape">
            <figure class="figure" data-orientation="landscape" style="">

                <img class="figure-image" src="https://picsum.photos/id/65/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
        <div class="photowallInset-item" data-orientation="upright">
            <figure class="figure" data-orientation="upright" style="">

                <img class="figure-image" src="https://picsum.photos/id/1062/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
        <div class="photowallInset-item" data-orientation="upright">
            <figure class="figure" data-orientation="upright" style="">

                <img class="figure-image" src="https://picsum.photos/id/6/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
        <div class="photowallInset-item" data-orientation="landscape">
            <figure class="figure" data-orientation="landscape" style="">

                <img class="figure-image" src="https://picsum.photos/id/18/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
        <div class="photowallInset-item" data-orientation="upright">
            <figure class="figure" data-orientation="upright" style="">

                <img class="figure-image" src="https://picsum.photos/id/193/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
        <div class="photowallInset-item" data-orientation="upright">
            <figure class="figure" data-orientation="upright" style="">

                <img class="figure-image" src="https://picsum.photos/id/65/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
        <div class="photowallInset-item" data-orientation="landscape">
            <figure class="figure" data-orientation="landscape" style="">

                <img class="figure-image" src="https://picsum.photos/id/1062/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
    </div>

</div>


<!-- Single Landscape -->
<div class="photowallInset">

    <div class="photowallInset-items">
        <div class="photowallInset-item" data-orientation="landscape">
            <figure class="figure" data-orientation="landscape" style="">

                <img class="figure-image" src="https://picsum.photos/id/193/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
    </div>

</div>


<!-- Single Upright -->
<div class="photowallInset">

    <div class="photowallInset-items">
        <div class="photowallInset-item" data-orientation="upright">
            <figure class="figure" data-orientation="upright" style="">

                <img class="figure-image" src="https://picsum.photos/id/18/1200/1200" alt="Alternative Bildbeschreibung" />

                <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

            </figure>

        </div>
    </div>

</div>


<!-- Documentation only -->
<h2 class="doc-section-title">Photowall Inset</h2>

<div class="doc-notes">
    In der Komponente Photowall-Inset werden Bilder abhängig von ihrer Ausrichtung und Reihenfolge automatisch in der Größe angepasst und im Layoutraster platziert.
</div>

<section class="doc-section">

    <div class="photowallInset">

        <div class="photowallInset-items">
            <div class="photowallInset-item" data-orientation="landscape">
                <figure class="figure" data-orientation="landscape" style="">

                    <img class="figure-image" src="https://picsum.photos/id/193/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
            <div class="photowallInset-item" data-orientation="landscape">
                <figure class="figure" data-orientation="landscape" style="">

                    <img class="figure-image" src="https://picsum.photos/id/65/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
            <div class="photowallInset-item" data-orientation="upright">
                <figure class="figure" data-orientation="upright" style="">

                    <img class="figure-image" src="https://picsum.photos/id/1062/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
            <div class="photowallInset-item" data-orientation="upright">
                <figure class="figure" data-orientation="upright" style="">

                    <img class="figure-image" src="https://picsum.photos/id/6/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
            <div class="photowallInset-item" data-orientation="landscape">
                <figure class="figure" data-orientation="landscape" style="">

                    <img class="figure-image" src="https://picsum.photos/id/18/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
            <div class="photowallInset-item" data-orientation="upright">
                <figure class="figure" data-orientation="upright" style="">

                    <img class="figure-image" src="https://picsum.photos/id/193/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
            <div class="photowallInset-item" data-orientation="upright">
                <figure class="figure" data-orientation="upright" style="">

                    <img class="figure-image" src="https://picsum.photos/id/65/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
            <div class="photowallInset-item" data-orientation="landscape">
                <figure class="figure" data-orientation="landscape" style="">

                    <img class="figure-image" src="https://picsum.photos/id/1062/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
        </div>

    </div>

</section>
<section class="doc-section">

    <h2 class="doc-variant-title">With Titel und Description</h2>

    <div class="photowallInset has-backdrop">

        <h2 class="photowallInset-title">Ich bin der Titel</h2>

        <div class="photowallInset-description">
            <p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
        </div>

        <div class="photowallInset-items">
            <div class="photowallInset-item" data-orientation="landscape">
                <figure class="figure" data-orientation="landscape" style="">

                    <img class="figure-image" src="https://picsum.photos/id/193/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
            <div class="photowallInset-item" data-orientation="landscape">
                <figure class="figure" data-orientation="landscape" style="">

                    <img class="figure-image" src="https://picsum.photos/id/65/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
            <div class="photowallInset-item" data-orientation="upright">
                <figure class="figure" data-orientation="upright" style="">

                    <img class="figure-image" src="https://picsum.photos/id/1062/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
            <div class="photowallInset-item" data-orientation="upright">
                <figure class="figure" data-orientation="upright" style="">

                    <img class="figure-image" src="https://picsum.photos/id/6/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
            <div class="photowallInset-item" data-orientation="landscape">
                <figure class="figure" data-orientation="landscape" style="">

                    <img class="figure-image" src="https://picsum.photos/id/18/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
            <div class="photowallInset-item" data-orientation="upright">
                <figure class="figure" data-orientation="upright" style="">

                    <img class="figure-image" src="https://picsum.photos/id/193/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
            <div class="photowallInset-item" data-orientation="upright">
                <figure class="figure" data-orientation="upright" style="">

                    <img class="figure-image" src="https://picsum.photos/id/65/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
            <div class="photowallInset-item" data-orientation="landscape">
                <figure class="figure" data-orientation="landscape" style="">

                    <img class="figure-image" src="https://picsum.photos/id/1062/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
        </div>

    </div>

</section>
<section class="doc-section">

    <h2 class="doc-variant-title">Single Landscape</h2>

    <div class="photowallInset">

        <div class="photowallInset-items">
            <div class="photowallInset-item" data-orientation="landscape">
                <figure class="figure" data-orientation="landscape" style="">

                    <img class="figure-image" src="https://picsum.photos/id/193/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
        </div>

    </div>

</section>
<section class="doc-section">

    <h2 class="doc-variant-title">Single Upright</h2>

    <div class="photowallInset">

        <div class="photowallInset-items">
            <div class="photowallInset-item" data-orientation="upright">
                <figure class="figure" data-orientation="upright" style="">

                    <img class="figure-image" src="https://picsum.photos/id/18/1200/1200" alt="Alternative Bildbeschreibung" />

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

                </figure>

            </div>
        </div>

    </div>

</section>


<!-- Default -->
<div class="photowallInset{{#modifier}} {{.}}{{/modifier}}">

            {{#title}}
    <h2 class="photowallInset-title">{{{.}}}</h2>
        {{/title}}

        {{#description}}
    <div class="photowallInset-description">{{{.}}}</div>
        {{/description}}

    <div class="photowallInset-items">
            {{#figures}}
        <div class="photowallInset-item"{{#orientation}} data-orientation="{{.}}"{{/orientation}}>
            {{render '@figure' (contextData '@photowallinset' this) merge=true}}
        </div>
            {{/figures}}
    </div>

</div>

<!-- With Title And Description -->
<div class="photowallInset{{#modifier}} {{.}}{{/modifier}}">

            {{#title}}
    <h2 class="photowallInset-title">{{{.}}}</h2>
        {{/title}}

        {{#description}}
    <div class="photowallInset-description">{{{.}}}</div>
        {{/description}}

    <div class="photowallInset-items">
            {{#figures}}
        <div class="photowallInset-item"{{#orientation}} data-orientation="{{.}}"{{/orientation}}>
            {{render '@figure' (contextData '@photowallinset' this) merge=true}}
        </div>
            {{/figures}}
    </div>

</div>

<!-- Single Landscape -->
<div class="photowallInset{{#modifier}} {{.}}{{/modifier}}">

            {{#title}}
    <h2 class="photowallInset-title">{{{.}}}</h2>
        {{/title}}

        {{#description}}
    <div class="photowallInset-description">{{{.}}}</div>
        {{/description}}

    <div class="photowallInset-items">
            {{#figures}}
        <div class="photowallInset-item"{{#orientation}} data-orientation="{{.}}"{{/orientation}}>
            {{render '@figure' (contextData '@photowallinset' this) merge=true}}
        </div>
            {{/figures}}
    </div>

</div>

<!-- Single Upright -->
<div class="photowallInset{{#modifier}} {{.}}{{/modifier}}">

            {{#title}}
    <h2 class="photowallInset-title">{{{.}}}</h2>
        {{/title}}

        {{#description}}
    <div class="photowallInset-description">{{{.}}}</div>
        {{/description}}

    <div class="photowallInset-items">
            {{#figures}}
        <div class="photowallInset-item"{{#orientation}} data-orientation="{{.}}"{{/orientation}}>
            {{render '@figure' (contextData '@photowallinset' this) merge=true}}
        </div>
            {{/figures}}
    </div>

</div>

<!-- Documentation only -->
<h2 class="doc-section-title">Photowall Inset</h2>

<div class="doc-notes">
    In der Komponente Photowall-Inset werden Bilder abhängig von ihrer Ausrichtung und Reihenfolge automatisch in der Größe angepasst und im Layoutraster platziert.
</div>

    {{#variants}}
<section class="doc-section">

        {{#title}}
    <h2 class="doc-variant-title">{{{.}}}</h2>
        {{/title}}

    {{#variant}}
        {{render '@photowallinset' (contextData '@photowallinset' this) merge=true}}
    {{/variant}}

</section>
    {{/variants}}
 
/* Default */
{
  "figures": [
    {
      "orientation": "landscape",
      "src": "https://picsum.photos/id/193/1200/1200"
    },
    {
      "orientation": "landscape",
      "src": "https://picsum.photos/id/65/1200/1200"
    },
    {
      "orientation": "upright",
      "src": "https://picsum.photos/id/1062/1200/1200"
    },
    {
      "orientation": "upright",
      "src": "https://picsum.photos/id/6/1200/1200"
    },
    {
      "orientation": "landscape",
      "src": "https://picsum.photos/id/18/1200/1200"
    },
    {
      "orientation": "upright",
      "src": "https://picsum.photos/id/193/1200/1200"
    },
    {
      "orientation": "upright",
      "src": "https://picsum.photos/id/65/1200/1200"
    },
    {
      "orientation": "landscape",
      "src": "https://picsum.photos/id/1062/1200/1200"
    }
  ]
}


/* With Title And Description */
{
  "figures": [
    {
      "orientation": "landscape",
      "src": "https://picsum.photos/id/193/1200/1200"
    },
    {
      "orientation": "landscape",
      "src": "https://picsum.photos/id/65/1200/1200"
    },
    {
      "orientation": "upright",
      "src": "https://picsum.photos/id/1062/1200/1200"
    },
    {
      "orientation": "upright",
      "src": "https://picsum.photos/id/6/1200/1200"
    },
    {
      "orientation": "landscape",
      "src": "https://picsum.photos/id/18/1200/1200"
    },
    {
      "orientation": "upright",
      "src": "https://picsum.photos/id/193/1200/1200"
    },
    {
      "orientation": "upright",
      "src": "https://picsum.photos/id/65/1200/1200"
    },
    {
      "orientation": "landscape",
      "src": "https://picsum.photos/id/1062/1200/1200"
    }
  ],
  "modifier": "has-backdrop",
  "title": "Ich bin der Titel",
  "description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}


/* Single Landscape */
{
  "figures": [
    {
      "orientation": "landscape",
      "src": "https://picsum.photos/id/193/1200/1200"
    }
  ]
}


/* Single Upright */
{
  "figures": [
    {
      "orientation": "upright",
      "src": "https://picsum.photos/id/18/1200/1200"
    }
  ]
}


/* Documentation only */
{
  "figures": [
    {
      "orientation": "landscape",
      "src": "https://picsum.photos/id/193/1200/1200"
    },
    {
      "orientation": "landscape",
      "src": "https://picsum.photos/id/65/1200/1200"
    },
    {
      "orientation": "upright",
      "src": "https://picsum.photos/id/1062/1200/1200"
    },
    {
      "orientation": "upright",
      "src": "https://picsum.photos/id/6/1200/1200"
    },
    {
      "orientation": "landscape",
      "src": "https://picsum.photos/id/18/1200/1200"
    },
    {
      "orientation": "upright",
      "src": "https://picsum.photos/id/193/1200/1200"
    },
    {
      "orientation": "upright",
      "src": "https://picsum.photos/id/65/1200/1200"
    },
    {
      "orientation": "landscape",
      "src": "https://picsum.photos/id/1062/1200/1200"
    }
  ],
  "variants": [
    {
      "variant": {
        "figures": [
          {
            "orientation": "landscape",
            "src": "https://picsum.photos/id/193/1200/1200"
          },
          {
            "orientation": "landscape",
            "src": "https://picsum.photos/id/65/1200/1200"
          },
          {
            "orientation": "upright",
            "src": "https://picsum.photos/id/1062/1200/1200"
          },
          {
            "orientation": "upright",
            "src": "https://picsum.photos/id/6/1200/1200"
          },
          {
            "orientation": "landscape",
            "src": "https://picsum.photos/id/18/1200/1200"
          },
          {
            "orientation": "upright",
            "src": "https://picsum.photos/id/193/1200/1200"
          },
          {
            "orientation": "upright",
            "src": "https://picsum.photos/id/65/1200/1200"
          },
          {
            "orientation": "landscape",
            "src": "https://picsum.photos/id/1062/1200/1200"
          }
        ]
      }
    },
    {
      "title": "With Titel und Description",
      "variant": {
        "figures": [
          {
            "orientation": "landscape",
            "src": "https://picsum.photos/id/193/1200/1200"
          },
          {
            "orientation": "landscape",
            "src": "https://picsum.photos/id/65/1200/1200"
          },
          {
            "orientation": "upright",
            "src": "https://picsum.photos/id/1062/1200/1200"
          },
          {
            "orientation": "upright",
            "src": "https://picsum.photos/id/6/1200/1200"
          },
          {
            "orientation": "landscape",
            "src": "https://picsum.photos/id/18/1200/1200"
          },
          {
            "orientation": "upright",
            "src": "https://picsum.photos/id/193/1200/1200"
          },
          {
            "orientation": "upright",
            "src": "https://picsum.photos/id/65/1200/1200"
          },
          {
            "orientation": "landscape",
            "src": "https://picsum.photos/id/1062/1200/1200"
          }
        ],
        "modifier": "has-backdrop",
        "title": "Ich bin der Titel",
        "description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
      }
    },
    {
      "title": "Single Landscape",
      "variant": {
        "figures": [
          {
            "orientation": "landscape",
            "src": "https://picsum.photos/id/193/1200/1200"
          }
        ]
      }
    },
    {
      "title": "Single Upright",
      "variant": {
        "figures": [
          {
            "orientation": "upright",
            "src": "https://picsum.photos/id/18/1200/1200"
          }
        ]
      }
    }
  ]
}
  • Content: 
    @import "_photowallInset.styles";

.photowallInset {

    &-title {
        @extend %sectionTitle;
        @include stack-spacing(0);
    }

    &-description {

        &:not(:first-child) {
            @include stack-spacing(component);
        }

    }

    &-title + &-items,
    &-description + &-items {
        @include stack-spacing(section);
    }

    @include only-on-desktop(){

        &-description {
            width: get-columns-width(8);
            margin-left: auto;
            margin-right: auto;

            text-align: center;
        }

    }

}
  • URL: /components/raw/photowallinset/_photowallInset.scss
  • Filesystem Path: components/04-modules/photowallInset/_photowallInset.scss
  • Size: 572 Bytes
  • Content: 
    %photowallInset {
    @include stack-spacing(section);

    &-items {
        display: flex;
        flex-wrap: wrap;

        justify-content: center;
    }

    .figure {
        @include stack-spacing(0);
    }

    @include not-on-desktop(){

        &-item {
            width: 100%;

            & + & {
                @include stack-spacing(component);
            }

        }

        &-item[data-orientation="upright"] {
            width: (math.div(2, 3) * 100%);
        }

    }

    @include only-on-desktop(){

        &-items {
            margin: 0 (-.5 * $_grid_gutter);
        }

        &-item {
            width: (.5 * 100%);
            padding: 0 (.5 * $_grid_gutter);

            position: relative;

            .figure-caption {
                position: absolute;
                margin-right: (.5 * $_grid_gutter);
            }

            @include only-last-row($column-count: 2) {

                .figure-caption {
                    position: static;
                    margin-right: 0;
                }

            }

                // Single item or unmatched landscape at end
            &:only-child:not([data-orientation="upright"]),
            &:nth-child(odd):last-child:not([data-orientation="upright"]) {
                width: (math.div(2, 3) * 100%) !important;
            }

            &:nth-child(n+3) {
                margin-top: calc((100% + var(--gg)) * #{math.div(1, 12)} + var(--gg));
            }

        }

        &-item[data-orientation="upright"] {
            width: (math.div(5, 12) * 100%);
        }

            // Upright + Landscape / Landscape + Upright
        &-item[data-orientation="upright"]:nth-child(odd) + &-item:not([data-orientation="upright"]),
        &-item:not([data-orientation="upright"]):nth-child(odd) + &-item[data-orientation="upright"] {
            margin-left: (math.div(1, 12) * 100%);
        }

            // Landscape + Landscape
        &-item:not([data-orientation="upright"]):nth-child(odd) + &-item:not([data-orientation="upright"]) {
            margin-left: (math.div(1, 12) * 100%);
            width: (math.div(5, 12) * 100%);
        }

            // Upright + Upright
        &-item[data-orientation="upright"]:nth-child(odd) + &-item[data-orientation="upright"] {
            margin-left: (math.div(1, 12) * 100%);
            width: (math.div(4, 12) * 100%);
        }

            // Landscape + Landscape + Landscape + Landscape
        &-item[data-orientation="landscape"]:nth-child(odd) + &-item[data-orientation="landscape"] + &-item[data-orientation="landscape"]:nth-child(3n) {
            margin-left: 0;
            width: (math.div(5, 12) * 100%);
        }

        &-item[data-orientation="landscape"]:nth-child(odd) + &-item[data-orientation="landscape"] + &-item[data-orientation="landscape"]:nth-child(3n) + &-item[data-orientation="landscape"] {
            margin-left: (math.div(1, 12) * 100%);
            width: (.5 * 100%);
        }

    }

    &.has-backdrop {
        padding-top: var(--sp-section);
        padding-bottom: var(--sp-section);
        @include full-width-backdrop();
    }

}

.photowallInset {
    @extend %photowallInset;

    &-items {
        @extend %photowallInset-items;
    }

    &-item {
        @extend %photowallInset-item;
    }

}
  • URL: /components/raw/photowallinset/_photowallInset.styles.scss
  • Filesystem Path: components/04-modules/photowallInset/_photowallInset.styles.scss
  • Size: 3.3 KB