Display emojis in a tagcloud shortcode

support
1

Hello I am trying to get emojis to show up in a Tagcloud.

Desired behavior:

  • Emojis to show up in a Tag Cloud.

What I have done:

/layouts/shortcodes/tagcloud.html

{{ if isset .Site.Taxonomies "tags" }}{{ if not (eq (len .Site.Taxonomies.tags) 0) }}
	<div id="tagcloud">
    {{ range $name, $items := .Site.Taxonomies.tags }}{{ $url := printf "%s/%s" "tags" ($name | urlize | lower)}}
    <a href="{{ $url | absURL }}" id="tag_{{ $name }}">{{ $name | title }}</a>
    {{ end }}{{ end }}{{ end }}
	</div>

/static/style.css

body {
	font-family: sans-serif ;
	background: #1a1a1a;
	color: white ;
}

main {
	max-width: 800px ;
	margin: auto ;
}

img {
	max-width: 100% ;
}

h1 {
	text-align: center ;
	color: #a366ff ;
}

h2 {
	text-align: center ;
	color: #d1b3ff ;
}

h3 {
	text-align: center ;
	color: #f0e6ff ;
}

footer {
	text-align: center ;
	clear: both ;
}

/* For TAGLIST.HTML */
.taglist {
	text-align: center ;
	clear: both ;
	color: #ccc ;
}

/* For NEXTPREV.HTML */
#nextprev {
	/* The container for both the previous and next articles. */
}
#prevart {
	float: left ;
	text-align: left ;
}
#nextart {
	float: right ;
	text-align: right ;
}
#nextart,#prevart {
	max-width: 33% ;
	color: #ccc ;
}

#tagcloud {
	border: 2px dashed #ccffcc ;
	padding: 10px ;
	text-align: center ;
	margin: 1.5rem ;
}
/* unvisited link */
a:link {
	color: white ;
}
/* visited link */
a:visited {
	color: white ;
}
/* mouse over link*/
a:hover {
	color: #aaff80 ;
}
/* selected link */
a:activ {
	color: white ;
}
  • I enter UTF-8 emjois in the tag metadata
tags: [" 😀 updates" ]

Current behavior

  • Emojis show up on a footer partial that I use
  • They show at the top of the page when a tag is selected and I’m brought to the tag page.
  • They do not show up in the page where I call the TagCloud shortcode

Thank you for your time.

2

If I replace your shortcode with this…

{{ if isset .Site.Taxonomies "tags" }}
  {{ if not (eq (len .Site.Taxonomies.tags) 0) }}
    <div id="tagcloud">
      {{ range $name, $items := .Site.Taxonomies.tags }}
        <a href="{{ .Page.RelPermalink }}" id="tag_{{ .Page.Data.Term }}">{{ .Page.LinkTitle | title }}</a>
      {{ end }}
    </div>
  {{ end }}
{{ end }}

… then everything works as expected.

Try it:

git clone --single-branch -b hugo-forum-topic-42744 https://github.com/jmooring/hugo-testing hugo-forum-topic-42744
cd hugo-forum-topic-42744
hugo server
3

This works perfectly. Thank you Jmooring. I will study this to learn more about HTML and how this exactly provided the solution.

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.