StarBlog Development Notes (10): Image Display - Waterfall Layout - Homepage Cards

Series Articles

• Developing Blog Project StarBlog with .NetCore - (1) Why Do You Need to Write Your Own Blog?
• Developing Blog Project StarBlog with .NetCore - (2) Environment Setup and Creating the Project
• Developing Blog Project StarBlog with .NetCore - (3) Model Design
• Developing Blog Project StarBlog with .NetCore - (4) Batch Import of Markdown Blogs
• Developing Blog Project StarBlog with .NetCore - (5) Starting to Build the Web Project
• Developing Blog Project StarBlog with .NetCore - (6) Page Development: Blog Post List
• Developing Blog Project StarBlog with .NetCore - (7) Page Development: Post Detail Page
• Developing Blog Project StarBlog with .NetCore - (8) Displaying Category Hierarchy
• Developing Blog Project StarBlog with .NetCore - (9) Batch Image Import
• Developing Blog Project StarBlog with .NetCore - (10) Image Waterfall Layout
• ...

Preface

The previous article covered batch image import. I saw some readers commenting asking why there was no introduction to uploading images, so let me explain: the order of this series is:

• From the blog frontend to the admin backend
• From backend C# code to frontend Vue+ElementUI

So the image upload part will be covered later in the admin backend development. Stay tuned~

Picking up from the previous article, I’ll continue covering the photography module. After images are imported, they need to be displayed. This article covers (filler) implementing the image waterfall layout.

PS: The techniques involved are quite simple, so this article will be a bit lightweight. Feel free to skip it if you’re a pro~

Take a Look at the Result First

I imported some wallpapers collected by a crawler as test data. Let’s look at the waterfall layout first.

Admin backend waterfall layout

This is the homepage card effect

Implementation

The waterfall layout principle is simple, and there are plenty of ready-made wheels to use, so I won’t reinvent the wheel (just copy-paste) haha

Frontend

For the blog frontend waterfall layout I chose masonry-layout. Project homepage: https://github.com/desandro/masonry

I picked this component because I saw Bootstrap 5’s example code using it for the waterfall layout, so I just copied it over (flees)

Usage is very simple

<div class="row" data-masonry='{"percentPosition": true }'>
    @foreach (var photo in Model.Photos) {
    <div class="col-sm-6 col-lg-4 mb-4">
        <partial name="Widgets/PhotoCard" model="photo"/>
    </div>
    }
</div>

There are many options you can configure; I didn’t look into them in depth

Its GitHub homepage doesn’t really introduce it much either; the docs are all on the official site: https://masonry.desandro.com/

The official site’s style is quite distinctive too (flees)

Admin Backend

The admin backend waterfall layout is implemented with the vue-waterfall component, which I’ll cover in a later article~

Finally, these homepage cards were also tweaked from Bootstrap 5 examples

The code is as follows

@model Photo

<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg"
     style="background-image: url('media/@Model.FilePath.Replace("\\", "/")');">
    <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
        <h2 class="pt-5 mt-5 mb-5 display-6 lh-1 fw-bold">
            @Model.Title
            <p></p>
        </h2>
        <ul class="d-flex list-unstyled mt-auto">
            <li class="me-auto">
                <img src="~/images/star.jpg" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
            </li>
            <li class="d-flex align-items-center me-3">
                <span class="bi me-2">
                    <i class="fa-solid fa-location-pin"></i>
                </span>
                <small>@Model.Location</small>
            </li>
            <li class="d-flex align-items-center">
                <span class="bi me-2">
                    <i class="fa-solid fa-calendar-days"></i>
                </span>
                <small>@Model.CreateTime.ToShortDateString()</small>
            </li>
        </ul>
    </div>
</div>

Done~

Advanced

The frontend uses masonry + infinite-scroll to implement load-on-scroll

You must use the imagesLoaded library to handle events after images load. Official site: https://imagesloaded.desandro.com/

Closing

Today happens to be June 1st Children’s Day. I saw lots of kids out playing on the street — wonderful. Wishing all the grown-ups and little ones happiness every day~