Help:Shortcode Post

Display a blog post in a card.

Post
Shortcode
Description
TypeHTML Shortcode
Nested?false
Shortcodepost
Return TypeHTML
Short Description
Display a post in a card, optionally linked to the original blog post.
Development
MaintainerMichael Sasser

Render a card of a blog post. This shortcode cannot be nested. If it somehow finds multiple blog posts with the same title, it will render only the oldest post.

Parameters

The post shortcode has the following parameters:

ParameterDescription
titleThe title of the post to be shown
linkedAdds the link to the card to the post, if linked is not false
containerRenders a class="container" around it, if container is not false
mtThe top margin used in a bootstrap class
mpThe top padding used in a bootstrap class

Note

In this shortcodes the false value is a string, not a boolean. Everything else, even nil, will render them.

Examples 

{{< post title="Spaces Announcement 🎉" linked="false" container="false" >}}
Rendered

Spaces Announcement 🎉

Our community has grown to over 3500 members, and we are grateful for everyone who is bearing with us. Thanks Pythoneers!
As we grow, we want to provide space for more conversations. Keeping discussion on-topic in this room is the right thing to do, but off-topic conversation is fun -- and it builds a stronger community.

Michael Sasser, ilex, BrenBarn and James Belchamber
October 8, 2021  ·  1 min  ·  Matrix and Community

Code

Below you find the implementation of the shortcode.

HTML

Defined in layouts/shortcodes/post.html.

This code is licensed under the MIT license.
<!-- 

  Post Shortcode
  ==============

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layout/shortcodes/post.html
  STYLE:  /assets/scss/components/_shortcode_blog.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Post.md

  Description
  -----------

  Use this shortcode to display a post in a card, optionally linked to the
  original blog post.

  Changelog
  =========

  Version 1
  ---------

  Initial release

-->


<!-- title: The exact title of the blog post -->
{{$title := .Get "title"}}
<!-- linked: disable link with "false". Everything else renders it -->
{{$linked := .Get "linked" | default "true" }}
<!-- container: disable container with "false". Everything else renders it -->
{{$container := .Get "container" | default "true" }}
<!-- mt: Set top margin -->
{{$mt := .Get "mt"  | default "3"}}
<!-- pt: Set top padding -->
{{$pt := .Get "pt"  | default "3"}}

<!-- Blog Card -->
<section class="section section-sm mt-{{- $mt }} pt-{{- $pt -}}">
  {{if ne $container "false"}}
  <div class="container">
    {{ end }}
    <div class="row justify-content-center">
      <div class="card-list">
        {{ range first 1 (where (where .Site.RegularPages.ByDate "Section"
        "blog") "Params.title" "==" $title) -}}
        <div class="card">
          <div class="card-body">
            <h3>
              {{if ne $linked "false"}}
              <a class="stretched-link text-body" href="{{ .RelPermalink }}"
                >{{ .Params.title }}</a
              >
              {{ else }} {{ .Params.title }} {{end}}
            </h3>
            <p>{{ .Params.lead | safeHTML }}</p>
            {{ partial "main/blog-meta.html" . -}}
          </div>
        </div>
        {{ end -}}
      </div>
    </div>
    {{if ne $container "false"}}
  </div>
  {{ end }}
</section>

Download

Copy the source code above or use the download link below to use this file on your website according to the license.

  • Post Shortcode
    post.html ❘ 1.91 KB
  • md5   28b9bfe0369db57672932cd050656b8d
  • sha1   b9c5e5f6689fb26c4668b79b9268aa868b8c8225
  • sha256   3910dc0e927042b059b617fa903d6bdaa4e450e6f6f3154dc6e8f06b622183eb

SASS

Defined in: /assets/scss/components/_shortcode_post.scss

This code is licensed under the MIT license.
/*

  Post Shortcode
  ==============

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layout/shortcodes/post.html
  STYLE:  /assets/scss/components/_shortcode_blog.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Post.md

*/

/* Needs cleaning */

.home .card,
.contributors.list .card,
.blog.list .card {
  margin-top: 2rem;
  margin-bottom: 2rem;
  transition: transform 0.3s;
}

/* .home .card:hover, */

/* .contributors.list .card:hover, */

/* .blog.list .card:hover { */

/*   transform: scale(1.025); */

/* } */

.home .card-body,
.contributors.list .card-body,
.blog.list .card-body {
  padding: 0 2rem 1rem;
}

.blog-header {
  text-align: center;
  margin-bottom: 2rem;
}

.blog-footer {
  text-align: center;
}

Download

Copy the source code above or use the download link below to use this file on your website according to the license.

  • Post Style
    _shortcode_post.scss ❘ 834.00 Bytes
  • md5   a7f30f6ce55a1568452d4879a2286e79
  • sha1   469197964cd3713db29f9f32924ec9be8b0fcfe5
  • sha256   2b1fe024b91c437b721e5cc6be73e1efdb0934185c6374c6f2f72ab24b68bc93
Last modified on February 26, 2024
Edit this page on GitLab
Categories
Contributors
Help, Contribute and ShortcodeMichael Sasser