Spotify widgets
Use a shortcode to embed a Spotify widget in your Hugo site. Available widgets include artist, playlist, album, track, podcast, and episode.
To get the URL of a Spotify item:
Log in to Spotify
Locate the artist, playlist, album, track, podcast, or episode
Click on the ellipsis next to the item
Choose Share > Copy link
Widgets
Artist
{{< spotify url=https://open.spotify.com/artist/6qGkLCMQkNGOJ079iEcC5k?si=PKeRvIL9TxmernzM2RSCYQ loading=eager >}}
Playlist
{{< spotify url=https://open.spotify.com/playlist/37i9dQZF1DZ06evO3NpPH1 >}}
Album
{{< spotify url=https://open.spotify.com/album/3h7X7RcVxhSNLCCxJ7I9ar?si=yRK97habReW1KhaGXlIImw >}}
Track
{{< spotify url=https://open.spotify.com/track/47LAsDpMZHXbjX6r3piIqK?si=d649b0af936d4df7 >}}
Podcast
{{< spotify url=https://open.spotify.com/show/0dWpNy3iA6Mm3xYaHB2Zi9?si=1efbcdacec344504 >}}
Episode
{{< spotify url=https://open.spotify.com/episode/24yx39nxmZf7LbJTIkVBOG?si=fdcd5ef67d594cd1 >}}
Shortcode
Arguments
url
- (
string
) Required. The URL of the artist, playlist, album, track, podcast, or episode. useTheme
- (
bool
) Optional. Iftrue
, the background color is automatically determined by content. Iffalse
, the background color is dark gray (#282828
). The default istrue
. width
- (
string
) Optional. Thewidth
attribute of theiframe
element. The default is100%
. height
- (
string
) Optional. Theheight
attribute of theiframe
element. For shows and episodes, the default value is232px
. For other widget types, the default value is380px
. class
- (
string
) Optional. A class name to add to the class attribute of theiframe
element. id
- (
string
) Optional. Theid
attribute of theiframe
element. loading
- (
string
) Optional. Theloading
attribute of theiframe
element, eithereager
orlazy
. The default islazy
.
Example
{{< spotify
url=https://open.spotify.com/track/6PCUP3dWmTjcTtXY02oFdT?si=576230b575ad4886
useTheme=false
width=67%
height=200px
class=my-class
id=my-id
loading=eager
>}}
Source code
layouts/shortcodes/spotify.html
{{- /* Last modified: 2024-08-09T14:24:24-07:00 */}}
{{- /*
Copyright 2023 Veriphor, LLC
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
*/}}
{{- /*
Renders a Spotify Widget.
Spotify Widgets provide an embeddable view of an album, artist, episode, playlist, podcast, or track for use within your Hugo project.
References:
- https://developer.spotify.com/documentation/widgets/
- https://developer.spotify.com/documentation/widgets/terms/
- https://www.spotify.com/us/legal/privacy-policy/
- https://support.spotify.com/us/article/gdpr-article-15-information/
@context {string} Inner The content between the opening and closing shortcode tags.
@context {string} InnerDeindent The content between the opening and closing shortcode tags with indentation removed.
@context {string} Name The file name of the shortcode template, excluding the extension.
@context {int} Ordinal The zero-based ordinal of the shortcode on the page, or within its parent shortcode.
@context {page} Page A reference to the page containing the shortcode.
@context {map} Params The parameters specified in the opening shortcode tag.
@context {hugolib.ShortcodeWithPage} Parent The context of the parent shortcode.
@context {text.Position} Position The position of the shortcode within the page content.
@method {any} Get Returns the parameter value for the given key (for named parameters) or position (for positional parameters).
@mathod {bool} IsNamedParams Returns true if the shortcode is called with named instead of positional parameters.
@method {maps.Scratch) Scratch Returns a writable Scratch to store and manipulate data.
@param {string} Params.url The URL of the artist, playlist, album, track, podcast, or episode.
@param {string} [Params.id] The id attribute of the iframe element.
@param {string} [Params.class] A class name to add to the class attribute of the iframe element.
@param {string} [Params.width=100%] The width attribute of the iframe element.
@param {string} [Params.height=232px or 380px] The height attribute of the iframe element. For shows and episodes, the default value is 232px. For other widget types, the default value is 380px.
@param {string} [Params.loading=lazy] The loading attribute of the iframe element.
@param {bool} [Params.useTheme=true] Render using the Spotify theme? If true, the background color is automatically determined by content. If false, the background color is dark gray (#282828).
@returns {text.HTML} A Spotify Widget.
@example {{< spotify url=https://open.spotify.com/playlist/37i9dQZF1DZ06evO3NpPH1 >}}
*/}}
{{- /* Verify minimum required version. */}}
{{- $minHugoVersion := "0.125.6" }}
{{- if lt hugo.Version $minHugoVersion }}
{{- errorf "The %s shortcode requires Hugo v%s or later." .Name $minHugoVersion }}
{{- end }}
{{- /* Get context. */}}
{{- $name := .Name }}
{{- $ordinal := .Ordinal }}
{{- $position := .Position }}
{{- /* Set default height for each widget type. */}}
{{- $defaultHeight := dict
"album" "380px"
"artist" "380px"
"episode" "232px"
"playlist" "380px"
"show" "232px"
"track" "380px"
}}
{{- /* Parse url. */}}
{{- $url := "" }}
{{- with .Get "url" }}
{{- $url = . }}
{{- else }}
{{- errorf "The %q shortcode requires a url parameter. See %s" $name $position }}
{{- end }}
{{- $path := (urls.Parse $url).Path }}
{{- $type := index (split $path "/" ) 1 }}
{{- /* Set defaults. */}}
{{- $class := printf "spotify spotify-%s" $type }}
{{- $id := printf "h-sc-%s-%d" $name $ordinal }}
{{- $width := "100%" }}
{{- $height := index $defaultHeight $type }}
{{- $loading := "lazy" }}
{{- $useTheme := 1 }}
{{- /* Get parameters. */}}
{{- with .Get "class" }}
{{- $class = printf "%s %s" $class . }}
{{- end }}
{{- with .Get "id" }}
{{- $id = . }}
{{- end }}
{{- with .Get "width" }}
{{- $width = . }}
{{- end }}
{{- with .Get "height" }}
{{- $height = . }}
{{- end }}
{{- with .Get "loading" }}
{{- $loading = . }}
{{- end }}
{{- if isset .Params "useTheme" }}
{{- if in (slice false "false") (.Get "useTheme") }}
{{- $useTheme = 0 }}
{{- end }}
{{- end }}
{{- /* Define attributes map. */}}
{{- $attrs := dict
"class" $class
"id" $id
"style" (printf "width: %s; height: %s; border: none;" $width $height)
"loading" $loading
"src" (printf "https://open.spotify.com/embed%s?theme=%d" $path $useTheme)
"allow" "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
"allowfullscreen" "allowfullscreen"
}}
{{- /* Render. */}}
<iframe
{{- range $k, $v := $attrs }}
{{- if $v }}
{{- printf " %s=%q" $k (string $v) | safeHTMLAttr }}
{{- end }}
{{- end -}}
></iframe>
{{- /**/ -}}
Last modified: