Hugo

Cactus Plus Twittercard Issue

Hi, can anybody guide on twittercard issue with https://themes.gohugo.io/hugo-theme-cactus-plus/? Thank you

What is the issue?

1 Like

Hey @wasim, cool profile pic. You gotta give us more when you ask questions. Please read Requesting Help and follow the advice. It will go a long way, and your questions will actually get answered. :slight_smile:

@pkollitsch The Twitter card is not working on that website.

Following the source code from the Theme Github:

{{ if .IsPage }}
  {{ with .Params.images }}
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image:src" content="{{ index . 0 | absURL }}"/>
{{ else }}
<meta name="twitter:card" content="summary"/>
{{ if .Site.Params.twitterCardImage }}
  <meta name="twitter:image" content="{{ .Site.Params.twitterCardImage | absURL }}" />
  {{ else }}
  <meta name="twitter:image" content="{{ .Site.BaseURL }}images/avatar.png" />
{{ end }}
  {{ end }}
  <!-- Twitter Card data -->
  <meta name="twitter:title" content="{{ .Title }}"/>
  <meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}"/>
  {{ with .Site.Params.twitter }}
<meta name="twitter:site" content="@{{ . }}"/>
  {{ end }}
  {{ range .Site.Authors }}
{{ with .twitter }}
  <meta name="twitter:creator" content="@{{ . }}"/>
{{ end }}
  {{ end }}
  <!-- no post authors, show site author -->
  {{ if eq (len .Site.Authors) 0 }}
<meta name="twitter:creator" content="@{{ .Site.Params.author }}"/>
  {{ end }}

{{ else }}

  <meta name="twitter:card" content="summary" />
  {{ with .Site.Params.twitter }}
<meta name="twitter:site" content="@{{ . }}"/>
  {{ end }}
  {{ with .Site.Params.author }}
<meta name="twitter:creator" content="@{{ . }}"/>
  {{ end }}
  <meta name="twitter:title" content="{{ .Site.Title }}"/>
  <meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}"/>
  {{ if .Site.Params.twitterCardImage }}
<meta name="twitter:image" content="{{ .Site.Params.twitterCardImage | absURL }}" />
{{ else }}
<meta name="twitter:image" content="{{ .Site.BaseURL }}images/avatar.png" />
  {{ end }}
{{ end }}

It also used the following in the .toml file. Please see it at this link:

enableTwitterCard = true
# The url for twitter card image, default is avatar.png in static/images directory
twitterCardImage = ""

@maiki I am sorry I didn’t realize that when I was posting, you are right. Thanks for the compliment.

The card is not working because you did not define images.

twitterCardImage in your config.toml should be an image that is used if you have no other images defined.

Then in your content files you can define images in your front matter and the first image is used for a large image twitter card.

---
images:
- path/to/image.jpg
- another/image.jpg
---

You have it disabled:

remove the comments around the code, then set enableTwitterCard in your config.toml to true.

It should work then. the file reference for the default image is right.

1 Like

Thank you!

Can I ask it again? The twittercard (preview) image is still appearing smaller square, than in a larger landscape. Thanks a bunch.

I am not sure what could cause this, but I would do the following: Go to https://cards-dev.twitter.com/validator, enter your URL and see what Twitter themself have to say about the issue. Maybe it’s “normal” :wink: