Spotify Showcase: Customizing Hugo Shortcodes

1. Create the Spotify Shortcode

#

First, create a file named layouts/shortcodes/spotify.html in your Hugo project and paste the following code into it. This will allow you to invoke the Spotify player in your posts using a shortcode.

{{- $id := .Get "id" | default (.Get 0) -}}
{{- $type := .Get "type" | default "episode" -}}
{{- $width := .Get "width" | default "100%" -}}
{{- $height := .Get "height" | default "352" -}}
{{- $theme := .Get "theme" | default "0" -}}
{{- $start := .Get "start" -}}

<iframe
    style="border-radius:12px"
    src="https://open.spotify.com/embed/{{ $type }}/{{ $id }}?utm_source=generator&theme={{ $theme }}{{ if $start }}&t={{ $start }}{{ end }}"
    width="{{ $width }}"
    height="{{ $height }}"
    frameBorder="0"
    allowfullscreen=""
    allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
    loading="lazy">
</iframe>

2. Usage

#

Once the shortcode file is created, you can embed songs, albums, or playlists in your Markdown posts.

Basic Syntax:

{{< spotify type="TYPE" id="SpotifyID" >}}

Parameters:

• id (Required): The ID obtained from the Spotify share link.
  • Example: In the link https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT, the ID is 4cOdK2wGLETKBW3PvgPWqT
• type (Recommended): Defaults to episode (Podcast).
  • track : Single track
  • album : Album
  • playlist : Playlist
  • episode : Podcast episode (Default)
• height (Optional): Height of the player.
  • 352 : Standard card (Default)
  • 152 : Compact bar
• theme (Optional): Color theme.
  • 0 : Dark mode (Default, matches Spotify style)
  • 1 : Light mode
• width (Optional): Width. Defaults to 100%.
• start (Optional): Start time in seconds.

2.1 Embed a Track

#

{{< spotify type="track" id="4cOdK2wGLETKBW3PvgPWqT" >}}

Demo:

2.2 Embed a Track (Compact)

#

{{< spotify type="track" id="4cOdK2wGLETKBW3PvgPWqT" height="152" theme="1" >}}

Demo:

2.3 Embed an Album or Playlist

#

{{< spotify type="playlist" id="2Zube69s6Xuypcqj9c3NBL" >}}

Demo:

2.4 Embed a Podcast

#

{{< spotify type="episode" id="6Ialo7cJO9UUMJMLjm4kCV" >}}

Demo: