⭐ Blog-Teaser

Der Blog-Teaser zeigt einen kurzen Vorspann mit Bildern aus der Resource oder der Bildergalerie und soll neugierig machen sowie zum vollständigen Beitrag führen.

Besispiel:

Chunk modxBlog

[[!pdoPage:default=`Keine Startseite Nachricht vorhanden`?
    &context=`web`
    &element=`pdoResources`
    &parents=`0`
    &depth=`1`
    &limit=`20`
    &tpl=`modxBlogTpl`
    &tplWrapper=`modxBlogWrapper`
    &pageLimit=`20`
    &includeContent=`1`
    &includeTVs=`tvUserInfo,tvStartseite,tvStartseiteBild,tvGalleryPfad,tvStartdatum`
    &processTVs=`1`
    &tvPrefix=``
    &showUnpublished=`0`
    &showHidden=`0`
    &sortby=`publishedon`
    &sortdir=`desc`
    &tvFilters=`tvStartseite==ja`
]]

Chunk modxBlogTpl

• zuerst Galeriebild, sonst Bild aus Content (inkl. eigener Spalte aus dem Bild-Snippet)
• [col-md-3] → ergibt die Bildspalte aus dem Bild-Snippet (typisch col-md-3)
• [col-md-9] → Text (Titel, Intro, Button, Datum, Autor)

[[- in CSS hinzufügen:
/* Blogkarten: wenn nur eine Spalte vorhanden ist (kein Bild),
   soll die Textspalte die volle Breite nutzen */
.modx-blog-card .row.g-0 > .col-md-9:only-child {
    flex: 0 0 100%;
    max-width: 100%;
}
]]

<div class="col">
    <article class="card h-100 mb-4 modx-blog-card">
        <div class="row g-0">

            <!-- linke Spalte: zuerst Galeriebild, sonst Bild aus Content -->
            [[+tvGalleryPfad:notempty=`
                [[!bs5GalleryTeaserImg?
                    &dir=`assets/modx/content/redaktion/[[+tvGalleryPfad]]`
                    &index=`[[+tvStartseiteBild]]`
                    &id=`[[+id]]`
                    &alt=`[[+pagetitle]]`
                    &options=`h=300`
                ]]
            `:empty=`
                [[!getStartseiteBild?
                    &index=`[[+tvStartseiteBild]]`
                    &id=`[[+id]]`
                    &alt=`[[+pagetitle]]`
                    &options=`h=300`
                ]]
            `]]

            <!-- rechte Spalte: Textinhalt -->
            <div class="col-md-9">
                <div class="card-body">

                    <!-- Titelzeile: Parent-Titel + Ressourcentitel -->
                    <h2 class="h5 card-title mb-2">
                        <a href="[[~[[+parent]]]]" class="text-decoration-none">
                            [[#[[+parent]].pagetitle]]
                        </a>: [[+pagetitle]]
                    </h2>

                    <!-- Intro-Text aus Content -->
                    <p class="card-text mb-3">
                        [[+content:notags:limitWholeWords=`240`]]...
                    </p>

                    <!-- Footer: "alles lesen" + Icons + Datum + Autor -->
                    <div class="d-flex justify-content-between align-items-center">
                        <a href="[[~[[+id]]]]" class="btn btn-sm btn-primary">
                            alles lesen
                        </a>

                         [[+tvUserInfo:is=`ja`:then=`
                        <div class="text-muted small d-flex align-items-center">
                            <button type="button" class="btn btn-link p-0 me-1">
                                <i class="bi bi-calendar"></i>
                            </button>
                            <button type="button" class="btn btn-link p-0 me-2">
                                <i class="bi bi-person"></i>
                            </button>
                            <span>
                                Autor
                                [[+publishedon:gt=`0`:then=`[[+publishedon:date=`%Y-%m-%d`]]`:else=`[[+createdon:date=`%Y-%m-%d`]]`]]
                                [[+createdby:userinfo=`username`]]
                            </span>
                        </div>
                        `:else=``]]

                    </div>

                    [[!modxCountdownRow?
                        &date=`[[+tvStartdatum]]`
                        &minYear=`2025`
                        &align=`right`
                    ]]

                </div>
            </div>

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

Chunk modxBlogWrapper

<div class="row row-cols-1 row-cols-md-2 g-4">
    [[+output]]
</div>