partial for Card shortcode

[Gray-Stone]

I would love to use the card shortcode to create a tilted view of my posts with featured images.

I don't want to type every single post into a card shortcode as this is not scalable when I move posts around. I would prefer a programmatic way of looping through my posts (and maybe with filtering as well), and generate cards from the loop.

Since I can't put shortcode in shortcode, the only option seems to be using partials.

Can someone help me to get a basic version of the a card partial? Even a very stripped down version would be great.

[imfing]

Created an issue #335 for tracking the implementation progress.

[mafendi]

Sorry, I didn't catch it... You mean like on this site https://leipapa.com below in Blog latest section?

[Gray-Stone]

Yeah basically. I am not after a different look from what hextra's Card shortcode provide. The emphasis is on enabling the auto generation of a grid of them through code (in case of many many poses need to be listed as cards).

[imfing]

@Gray-Stone the card partial is now available: #339

hextra/layouts/shortcodes/card.html

Line 41 in 0d6cbba

{{- partial "shortcodes/card" (dict

you can try it out by upgrading to the latest main branch or wait for the next release which will be very soon

[mafendi]

I created a 'blog-cards.html' file. The path is: themes/hextra/layouts/partials/custom/blog-cards.html

Here is the content of that file:

{{ $posts := where .Site.RegularPages "Type" "blog" | first 6 }}
{{ $blogLatest := (T "blogLatest") }}

<div class="mt-16 mb-16">
    <h2 class="mb-4 text-4xl font-bold leading-tight tracking-tighter md:text-5xl bg-clip-text">{{ $blogLatest | markdownify }}</h2>
    <div class="hextra-cards mt-4 gap-4 grid not-prose" style="--rows: 3;">
        {{ range $posts }}
        {{ $postTitle := .Title }}
        <a
        class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border dark:border-neutral-700 border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200" 
        href="{{ .RelPermalink }}" title="{{ $postTitle }}"
        >
            {{ with .Params.featuredImage }}
                <img
                alt="{{ $postTitle }}"
                title="{{ $postTitle }}"
                loading="lazy"
                decoding="async"
                src="{{ . }}"
                />
            {{- end -}}
            
            <h3><span class="flex font-semibold items-start gap-2 pt-4 px-4 text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
            {{ .Title }}</h3>
            </span>
            <div class="line-clamp-1 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mt-2">
                {{ .Date.Format "January 2, 2006" }}, 
                {{ with .Params.categories }}
                    {{ range . }}
                        <span>{{ . }}</span>
                    {{ end }}
                {{ end }}
            </div>
            <div class="line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2">{{- .Description | markdownify -}}</div>
        </a>
        {{ end }}
    </div>
</div>

Then you can add
{{ partial "custom/blog-cards.html" . }} whenever you want in the template file.

[Gray-Stone]

Ah this is a great help ! Thank you so much. I'll get these a try later!.